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.

4 Comments

EL_C

Hello everybody thanks for the helpful Tutorial.
I have a Question regarding the Icons you can use in the navigation data.
I can choose different icons from the list but I'm wondering if I can use my own Icons, I made myself?

Elanor Buchanan

Hi EL_C,

At the moment you can't do this but there is an enhancement request in our database. You can add your email address to the CC list to receive updates when the status of the bug changes.

https://quality.livecode.com/show_bug.cgi?id=17685

Elanor

Wes

I can see it working. However, let's say I have already created some cards without a menu bar. I create the menu bar and it is showing up only for the new cards I create from then on. How do I get it to show up on the old cards that do not have them?

Elanor Buchanan

Hi Wes

You can use the place command to add background groups to cards that already existed when the background was created.

I hope that helps.

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.