Navigator containers provide a way to organize your user interface into a group of related views. For example, you can use them to create a tabbed user interface. The containers provide built-in mechanisms for letting the user move through, or navigate, the views. For example, the TabNavigator container has tabs that let users select a different view.

You can use Flex Builder to insert navigator containers in your application, and then create the layout of each of the container's views. If you use a ViewStack container, you can use Flex Builder to add the means for the user to select a view.

Creating layouts in navigator containers

After you insert a navigator container in your application, you can use Flex Builder to create the layout of each of the container's views. The views are child containers of the navigator container.

Only the ViewStack, TabNavigator, and Accordion navigator containers have child containers that you can lay out. The LinkBar, ButtonBar, and TabBar navigator containers don't have child containers. Instead, they let users control the active child container of a ViewStack container.

1. In the MXML editor's Design mode, drag a ViewStack, TabNavigator, or Accordion container from the Components view into the application.
2. To add or remove a child container in the navigator container expand the top of the container.
3. For the ViewStack container, select a child container by clicking the Left or Right arrows that appear at the top of the container.

   The arrows let you cycle through the child containers in the container.

   

   You can also select views in the Outline view (Window > Outline).

   

4. For the TabNavigator and Accordion containers, click the child tab to select a child container.
5. To set properties of the child container in the Properties view, click its background.
6. Create your layout by inserting controls or containers into the child container.
7. If you are working with a ViewStack container, add a mechanism to let users select the child containers.

Letting users select a view in a ViewStack container

A ViewStack container consists of a collection of child containers stacked on top of each other with only one container visible, or active, at a time. The ViewStack container does not have a built-in mechanism for letting users select a child container. You must add a LinkBar, ButtonBar, or TabBar navigator container, or build the logic yourself in ActionScript. The following example shows an example of a ViewStack container with a LinkBar container:

You use Flex Builder to add a LinkBar, ButtonBar, or TabBar to a ViewStack container so that users can select the child containers in the ViewStack container. A LinkBar defines a horizontal row of Link controls that designate a series of link destinations, as the following example shows:

A ButtonBar defines a horizontal row of buttons. A TabBar defines a horizontal row of tabs, as the following example shows:

1. Ensure that you set the label property for each child in the ViewStack container.

   The label property of the ViewStack children determines the text of the labels that appear on the TabBar or LinkBar. The following example shows children of a ViewStack container:

   <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%">
           <mx:Canvas id="search" label="Search">
               <mx:Label text="Enter search terms"/>
               ...
           </mx:Canvas>
           <mx:Canvas id="custInfo" label="Customer Info">
               <mx:Label text="Please enter your customer information"/>
               ...
           </mx:Canvas>
           <mx:Canvas id="accountInfo" label="Account Info">
               <mx:Label text="Please enter your account information"/>
               ...
           </mx:Canvas>
   </mx:ViewStack>
   
   

2. Drag a LinkBar, ButtonBar, or TabBar container from the Components view into your layout, above the ViewStack container.

   The LinkBar, ButtonBar, and TabBar containers are listed in the Navigator category of the Components view.

3. Set the dataProvider property of the LinkBar, ButtonBar, or TabBar container to the ID of the target ViewStack container.

   To set the dataProvider property, you can select the LinkBar, ButtonBar, or TabBar and set the property in the Flex Properties view. Alternatively, you can click the navigator's Plus (+) button and then select the ViewStack ID in the dialog box that appears.

   Setting the dataProvider property to the ViewStack ID specifies the name of the ViewStack container associated with it. The text of the labels on the LinkBar, ButtonBar, or TabBar correspond to the values of the label property of each child of the ViewStack container.

   

   Once the association is made between a ViewStack and a navigator, clicking the buttons or tabs of the navigator in Design mode will select the corresponding view in the ViewStack.