Introducing Navigation | Adobe Flex 2: Training from the Source

Navigation enables users to move through your application and (just as important) enables you to control user movement through the application. For an example of letting the user choose where to move in an application, you will add navigation to the data-entry application so the user can choose between adding a product and updating/deleting a product. Right now, functionality for both processes share the same crowded screen. There are also times when you want to control the user's movement through an application. You will do this in this lesson when you implement a checkout process to the e-commerce application. During this process, you need to control which screens the user sees and when. Both approaches are easily implemented using Flex's navigator containers.

Navigator containers control user movement through the application by controlling which containers are displayed. You've used many containers so far (for example, Canvas, VBox, HBox, and Form); they enable you to add functionality to move among them. Here is a list of Flex's navigator components displayed in the Components panel:

At the heart of navigation in Flex is the ViewStack class, which is a Flex container component. The ViewStack is a collection of other containers, or children, that are stacked on top of each other so only one is visible at a time. You then add functionality to control which child is visible at any one time. The ViewStack can have only other containers as children, including other navigator containers. If you use a noncontainer as a child of a ViewStack a run-time error is produced. So this is a valid ViewStack because it contains only containers:

<mx:ViewStack  height="100%" width="100%">   <mx:HBox  label="Child 0">     <mx:Label text="Zeroth child label 1" fontSize="40"/>     <mx:Label text="Zeroth child label 2" fontSize="40"/>   </mx:HBox>   <mx:VBox  label="Child 1">     <mx:Label text="First child label 1" fontSize="40"/>     <mx:Label text="First child label 2" fontSize="40"/>   </mx:VBox> </mx:ViewStack>

The following would generate a run-time error because the ViewStack contains a Label component that is not a container:

<mx:ViewStack  height="100%" width="100%">   <mx:HBox  label="Child 0">     <mx:Label text="Zeroth child label 1" fontSize="40"/>     <mx:Label text="Zeroth child label 2" fontSize="40"/>   </mx:HBox>   <mx:VBox  label="Child 1">     <mx:Label text="First child label 1" fontSize="40"/>     <mx:Label text="First child label 2" fontSize="40"/>   </mx:VBox>   <mx:Label text="This will not work here"/> </mx:ViewStack>

Although the ViewStack is the key element to implementing navigation in Flex, it does not intrinsically have a way to switch which child is visible; that must be done using another tool. You can use built-in tools to control the ViewStack or build your own.

An example built-in component to control the ViewStack is the LinkBar. If you set the dataProvider of the LinkBar to be the ViewStack, a link will appear for each child. Displayed on the link will be the label of the child container. For instance, code using a ViewStack and LinkBar is shown as follows, followed by its result when run. In the result, the middle link displaying the VBox container has been clicked.

<mx:LinkBar dataProvider="{myNav}" fontSize="30"/> <mx:ViewStack  height="100%" width="100%">   <mx:HBox  label="Child 0">     <mx:Label text="Zeroth child label 1" fontSize="20"/>     <mx:Label text="Zeroth child label 2" fontSize="20"/>   </mx:HBox>   <mx:VBox  label="Child 1">     <mx:Label text="First child label 1" fontSize="20"/>     <mx:Label text="First child label 2" fontSize="20"/>   </mx:VBox>   <mx:HBox  label="Child 2">     <mx:Label text="Second child label 1" fontSize="20"/>     <mx:Label text="Second child label 2" fontSize="20"/>   </mx:HBox> </mx:ViewStack>

The following example is of a ViewStack being used with a LinkBar (with the middle link selected).

You might want to control navigation by implementing your own process, such as by using Buttons. If you do this, two properties of the ViewStack are very important: selectedIndex and selectedChild. You use the selectedIndex to choose which child of the ViewStack should be displayed.

Note

The ViewStack is zero-indexed, so the "first" child is numerated 0 in human terms.

Use the selectedChild property if you would rather indicate which child of the ViewStack should be displayed by a logical name rather than numeric index. The selectedChild property will display the appropriate container in the ViewStack based on the instance name provided in the id property. The following example shows how to use plain Button components to control which child of the ViewStack is displayed using both the selectedChild and selectedIndex:

<mx:HBox>   <mx:Button label="Child 0" click="myNav.selectedIndex=0"/>   <mx:Button label="Child 1" click="myNav.selectedChild=child1"/>   <mx:Button label="Child 2" click="myNav.selectedIndex=2"/> </mx:HBox> <mx:ViewStack  height="100%" width="100%">   <mx:HBox >     <mx:Label text="Zeroth child label 1" fontSize="20"/>     <mx:Label text="Zeroth child label 2" fontSize="20"/>   </mx:HBox>   <mx:VBox >     <mx:Label text="First child label 1" fontSize="20"/>     <mx:Label text="First child label 2" fontSize="20"/>   </mx:VBox>   <mx:HBox >     <mx:Label text="Second child label 1" fontSize="20"/>     <mx:Label text="Second child label 2" fontSize="20"/>   </mx:HBox> </mx:ViewStack>

This would create a result as shown here when run (with the middle Button clicked). The following example is of a ViewStack being used with Buttons:

With this brief overview of the navigator containers, you are now ready to implement navigation in your applications.