Using the Navigation Bar Widget
This article will show you how to use the Navigation Bar widget that is included with LiveCode 8.
Adding the navigation bar widget
Firstly, we will create a new stack and name the first card 'contacts'. This matches the first selection option for the navigation bar, when using the default options.
We will now add the navigation widget to the stack by dragging it from the tools palette (1). Once we have the control, we will place it in a group (2) which is set to behave like a background (backgroundBehavior is set to true) (3). This will cause the navigation bar to be created automatically on every new card we create in the stack, which is usually the desired behavior of a navigation bar. Once this has been done, we will create three other cards named "favourites", "music", and "search".
Navigating with the navigation bar
Navigating around cards with the widget is very simple. Each option on the navigation bar is assigned a name (1). This name corresponds to the hilitedItemName property of each option button on the navigation bar. Therefore, the following code added to the navigation bar allows us to use it to switch between the cards in the stack, which have the same names as are assigned to each button on the navigation bar:
on hiliteChanged go to card the hilitedItemName of me end hiliteChanged
Customizing the navigation bar
Using the widget's property inspector, it is simple to customize the navigation controls:
1. Delete item
2. Set item label
3. Set item's icon
4. Set item's hilited icon
5. Add new item
6. Drag to reorder
In order to set the colors used by the navigation bar, set the foreColor, backColor, borderColor, and hiliteColor properties as usual for LiveCode controls.
Controlling the navigation bar by script
Aside from responding to a change in the highlight using the hiliteChanged message, there is generally not very much that requires scripting when using the navigation bar. However, each of the various aspects of the navigation bar items’ display (icon, highlighted icon, label) can be set individually from script using the itemLabels, itemIcons and hilitedItemIcons properties. The values of these properties are just comma-delimited lists. It can be handy to write utility functions to set these if you are going to do so often, for example:
command setLabelAtIndex pLabel, pIndex local tLabels put the itemLabels of widget "navbar" into tLabels put pLabel into item pIndex of tLabels set the itemLabels of widget "navbar" to tLabels end setLabelAtIndex
Alternatively, it is possible to set all the data of the navbar at once, using the itemArray property.
local tNavItems put "Contacts" into tNavItems["label"] put "contacts" into tNavItems["name"] put "user" into tNavItems["icon_name"] put "user" into tNavItems["hilited_icon_name"] ... set the itemArray of widget "navbar" to tNavItems