Creating a Navigation Bar

In this lesson we will see how to create a navigation bar which will allow us to navigate between the cards in our stack.

Create a new stack

First create a new stack.

  1. Select File -> New Stack -> iPhone
  2. Open the Stack Insector and set the name to "NavigationExample"
  3. Save your stack

Add a Navigation Bar widget

Drag on on Navigation Bar widget and place it at the bottom of the card.

Set up the Navigation Bar

Open the Property Inspector for the Naviagtion Bar and set up the Navigation data and Navigation names.

We wil have 3 items in the Navigation Bar: List, Contacts and Mail.

Create a background group

A background group allows a control to be shared between cards. Because the Navigation Bar will appear on all the cards in the app and is used to show the user which card they are on sharing the widget across the cards is the best solution. It reduces the amount of code you need to write and the number of controls you need to create.

  1. Select the Navigation Bar widget
  2. Click the Group button in the Menubar
  3. Open the Property Inspector for the group
    1. Set the name to "navigation"
    2. Check Shared group
    3. Check Behave like a background

Background groups are automatically placed on new cards.

Create additional cards

Out app will have 3 cards, to match the items in the navigation bar. We need to set the name of each card so we can refer to them easily in our code.

We'll start by setting up the first card.

  • Open the Card Inspector
  • Set the name to "list"
  • Add a label field
  • Set the contents to "List"
  • Add a new card by selecting Object -> New Card. LiveCode will automatically change to the new card. You will see that the navigation bar is automatically placed on the card and the title changes to show "NavigationExample (2)
  • Open the Card Inspector
  • Set the name to "contacts"
  • Add a label field
  • Set the contents to "Contacts"
  • Repeat this to create a "Mail" card

Adding code to the Navigation Bar

The final step is to add code so the navigation bar switches cards when the user selects an item.

  1. Select the navigation bar widget, you might need to select Select Grouped in the Menbar to allow you to select the widget and not the group.
  2. Open the Code Editor for the navigation bar widget. You will see that the widget had a default hiliteChanged message.
  3. Add the code to the Code Editor
on hiliteChanged
   go to card the hilitedItemName of me
end hiliteChanged

The hilitedItemName property returns the item name of the selected item. Becuase the names of our cards match the item names of the navigation bar you can use this property to navigate to the correct card.

Switch to Run mode and test the stack.

0 Comments

Add your comment

E-Mail me when someone replies to this comment