Exercise 4.6: Navigating using navigator containers

In this exercise you will use multiple navigator containers to display the content shown in Figure 1.

In this exercise, you will learn how to:

• Use an Accordion navigator container
• Use a TabNavigator navigator container
• Use a ViewStack navigator container
• Use a TabBar navigator control
• Use a LinkBar navigator control
• Use a ButtonBar control

In this section you will create an Accordion container to display employee information.

1. Download the ex4_06_starter.zip file if you haven't done so already and extract the file ex4_06_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_06_starter.fxp file.
4. Within the Package Explorer view, expand the components folder to show the HumanResources, InfomationTechnology, and Marketing MXML components (see Figure 2.)

5. Open ex4_06_starter.mxml.
6. Run the file.

   The components are displayed vertically (see Figure 3).

7. Return to Flash Builder.
8. Locate the UI components comment.
9. Below the last component, create an Accordion container.

10. Move the component instances inside the Accordion container.

11. Save the file and run the application.

    The components are now listed in an Accordion container, but note that the employees are not contained within the container. (see Figure 4).

Next, you will use the resizeToContent property to assure the employee content is visible.

12. Return to Flash Builder.
13. To the Accordion container, add the resizeToContent property set to true.

14. Save the file and run the application.
15. Click through the tabs.

    Notice that each pane resizes to fit all of the components (see Figure 5).

In this section you will replace the Accordion container with a TabNavigator container.

1. Return to Flash Builder.
2. Change the Accordion container into a TabNavigator container. Remember to change both the opening and closing tags.

3. Save the file and run the application.

   You should see a TabNavigator container interface (see Figure 6).

In this section you will create a ViewStack container to display employee information.

1. Return to Flash Builder.
2. Change the TabNavigator container into a ViewStack container. Remember to change both the opening and closing tags.

3. Save the file and run the application.

   Note that only the content of the first child container is displayed by default in the ViewStack container (see Figure 7).

In this section you will use a TabBar control to switch between components in the control.

1. To the ViewStack container, add the id property set to employeeDepartments.

2. Above the ViewStack container, create a Spark TabBar control.

3. To the TabBar control, add the dataProvider property with a value that is bound to the content in the employeeDepartments ViewStack container.

4. Save the file and run the application.
5. Click through the tabs (see Figure 8).

In this section you will replace the TabBar control with a LinkBar control.

1. Return to Flash Builder.
2. Change the TabBar control into a LinkBar control.

3. Save the file and run the application.

   The application now uses a LinkBar control to switch between components in the ViewStack container (see Figure 9).

In this section, you will use a ButtonBar control toswitch between components in the control.

1. Return to Flash Builder.
2. Change the LinkBar control into a Spark ButtonBar control.

3. Save the file and run the application.

   The application now uses a ButtonBar control to switch betweencomponents in the ViewStack container (see Figure 10).

In this exercise you used multiple navigator containers to display the content shown in Figure 10. In the next exercise you will use Flash Builder to create a login page.