- Requirements
Prerequisite knowledge Required products Sample files
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

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

 
Create an Accordion container

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.)
View the components directory.
Figure 2. View the components directory.
  1. Open ex4_06_starter.mxml.
  2. Run the file.
    The components are displayed vertically (see Figure 3).
     
See the components are displayed vertically.
Figure 3. See the components are displayed vertically.
  1. Return to Flash Builder.
  2. Locate the UI components comment.
  3. Below the last component, create an Accordion container.
<components:InformationTechnology label="Information Technology" /> <mx:Accordion> </mx:Accordion>
  1. Move the component instances inside the Accordion container.
<mx:Accordion> <components:HumanResources label="Human Resources" /> <components:Marketing label="Marketing" /> <components:InformationTechnology label="Information Technology" /> </mx:Accordion>
  1. 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).
     
Note that the content is not contained within the Accordion container.
Figure 4. Note that the content is not contained within the Accordion container.
Next, you will use the resizeToContent property to assure the employee content is visible.
 
  1. Return to Flash Builder.
  2. To the Accordion container, add the resizeToContent property set to true.
<mx:Accordion resizeToContent="true"> ... </mx:Accordion>
  1. Save the file and run the application.
  2. Click through the tabs.
    Notice that each pane resizes to fit all of the components (see Figure 5).
     
Note that the containers resize to fit all of the components.
Figure 5. Note that the containers resize to fit all of the components.

 
Use a TabNavigator container

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.
<mx:TabNavigator resizeToContent="true"> <components:HumanResources label="Human Resources" /> ... </mx:TabNavigator>
  1. Save the file and run the application.
    You should see a TabNavigator container interface (see Figure 6).
     
You should see the TabNavigator container.
Figure 6. You should see the TabNavigator container.

 
Use a ViewStack container

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.
<mx:ViewStack resizeToContent="true"> <components:HumanResources label="Human Resources" /> ... </mx:ViewStack>
  1. 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).
     
Only the content of the first child conainer in the ViewStack container is visible.
Figure 7. Only the content of the first child conainer in the ViewStack container is visible.

 
Use the TabBar control

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.
<mx:ViewStack id="employeeDepartments" resizeToContent="true"> <components:HumanResources label="Human Resources" /> ...
  1. Above the ViewStack container, create a Spark TabBar control.
<s:TabBar/> <mx:ViewStack id="employeeDepartments" resizeToContent="true"> ...
  1. To the TabBar control, add the dataProvider property with a value that is bound to the content in the employeeDepartments ViewStack container.
<s:TabBar dataProvider="{employeeDepartments}"/>
Click the TabBar to change components.
Figure 8. Click the TabBar to change components.
  1. Save the file and run the application.
  2. Click through the tabs (see Figure 8).

 
Use a LinkBar control

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.
<mx:LinkBar dataProvider="{employeeDepartments}"/>
  1. 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).
     
Run the application to see it now uses a LinkBar control.
Figure 9. Run the application to see it now uses a LinkBar control.

 
Use a ButtonBar control

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.
<s:ButtonBar dataProvider="{employeeDepartments}"/>
  1. Save the file and run the application.
    The application now uses a ButtonBar control to switch betweencomponents in the ViewStack container (see Figure 10).
     
Run the application to see it now uses the ButtonBar control.
Figure 10. Run the application to see it now uses the ButtonBar control.
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.
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.