Looking for an easier way to highlight the selected nav item (and un-hilite others)
In a number of places in the app I'm prototyping at the moment, there is a side-nav with anywhere from four to a dozen or so selectable items.
Presently, the "brute force" way I've implemented this is to create an On Click event with an action for every item in the nav group. One of the actions styles the clicked item to the highlighted appearance, while the others style each of the other nav items to the un-highlighted appearance.
This seems clunky and crude, and is a real pain to update. If, for example, a new nav item is added, then I have to add a new action to all of the existing events to un-highlight them when the new item is clicked.
Even worse, if I change the nav item style (as I had to do recently when we changed the font size of the nav text), then on a screen with 11 nav items, shrinking the font from 11pt to 10pt necessitates 121 separate trips to to the action editing panel (i.e., 11 actions for each of 11 nav items). That is a lot of window opening and closing.*
If there's a more efficient way to implement highlighting just one item out of a group of items, I would love to learn it!
If, for example, an action that can restyle multiple items at once, or a way to restyle an item based on a variable (that is, an action that restyles an item selected by a condition — in my case, a variable identifying the previously selected nav item, rather than restyling all 11 items every time).
--
* To be honest, I didn't actually make all 121 trips to the action window: After changing 11 actions for the first nav item, I saved, closed Justinmind, unzipped a copy of the prototype, edited the XML in a text editor, then re-zipped it. This ended up being a LOT faster.
Hello Dave,
You may consider doing so by using a master and setting a 'page' variable based on the clicked link. Then, the highlight can be changed based on the variable, making it simpler to add items later. If you like, I would be happy to send you a sample prototype with this implemented.
Sincerely,
Luisa
Hello Dave,
You may consider doing so by using a master and setting a 'page' variable based on the clicked link. Then, the highlight can be changed based on the variable, making it simpler to add items later. If you like, I would be happy to send you a sample prototype with this implemented.
Sincerely,
Luisa
Thank you. I have responded via email requesting the sample prototype.
Thank you. I have responded via email requesting the sample prototype.
With the help of another contributor to this community, I came up with the following solution:
Create the navigation items however you like: as rectangles, labels — whatever you like. Style them according to your design's "de-selected" state.
Add a text input. It doesn't have to be visible (you can check "Hide component" on the properties panel), although I happen to leave it visible and style it as a label for use on the page. If it is visible, make sure that it is not "Editable" (uncheck this option in the properties panel). I tend to name this something like "Helper for un-styling deselected nav items" or something like that. Future me is likely to forget why there's an extra input on the page.
Add an "on Focus In" event to the text input. Name this event "Un-style all nav items" or so forth, to remind future forgetful you what it's for.
Add a "Change Style" action for each of the navigation items to the "on Focus In" event that sets their style to the "de-selected" appearance (whatever that may be for your design: font, background color, etc).
Here's the key to the whole thing: To each nav item, add an "on Click" event that contains a "Set Focus On" action targeting the text input. When the nav item is clicked, it will "send a message" to the input, which will reset the styling of all the nav items. I usually name this "Un-style other nav items", even though it also unstyles the present nav item.
To each nav item, add another "on Click" event that contains a "Change Style" action that sets the style for the selected state, whatever that may be. Call it "Highlight selected nav item" or the like. Note: This event must come after the "Set Focus On" action, or your selected item won't be styled :-).
Test it. Be amazed.
Next time you have to add a nav item, just add an action to "un-style" it to the event on the input, and make sure that the events attached to the nav item correctly style itself.
Although it may embarass him to be called out, I'd like to give credit to fellow community member Maciej Sawicki for coming up with the basis of this technique.
With the help of another contributor to this community, I came up with the following solution:
Create the navigation items however you like: as rectangles, labels — whatever you like. Style them according to your design's "de-selected" state.
Add a text input. It doesn't have to be visible (you can check "Hide component" on the properties panel), although I happen to leave it visible and style it as a label for use on the page. If it is visible, make sure that it is not "Editable" (uncheck this option in the properties panel). I tend to name this something like "Helper for un-styling deselected nav items" or something like that. Future me is likely to forget why there's an extra input on the page.
Add an "on Focus In" event to the text input. Name this event "Un-style all nav items" or so forth, to remind future forgetful you what it's for.
Add a "Change Style" action for each of the navigation items to the "on Focus In" event that sets their style to the "de-selected" appearance (whatever that may be for your design: font, background color, etc).
Here's the key to the whole thing: To each nav item, add an "on Click" event that contains a "Set Focus On" action targeting the text input. When the nav item is clicked, it will "send a message" to the input, which will reset the styling of all the nav items. I usually name this "Un-style other nav items", even though it also unstyles the present nav item.
To each nav item, add another "on Click" event that contains a "Change Style" action that sets the style for the selected state, whatever that may be. Call it "Highlight selected nav item" or the like. Note: This event must come after the "Set Focus On" action, or your selected item won't be styled :-).
Test it. Be amazed.
Next time you have to add a nav item, just add an action to "un-style" it to the event on the input, and make sure that the events attached to the nav item correctly style itself.
Although it may embarass him to be called out, I'd like to give credit to fellow community member Maciej Sawicki for coming up with the basis of this technique.
Replies have been locked on this page!