Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Navigator Containers > TabNavigator container > Creating a TabNavigator container

Creating a TabNavigator container

You use the <mx:TabNavigator> tag to define a TabNavigator container. Only one child of the TabNavigator container is visible at a time. Users can make any child the selected child by selecting its associated tab or by using keyboard navigation controls. Whenever the user changes the current child, the TabNavigator container broadcasts a change event.

The TabNavigator container automatically creates a tab for each of its children and determines the tab text from the label property of the child, and the tab icon from the icon property of the child. The tabs are arranged left to right in the order determined by the child indexes. All tabs are visible, unless they do not fit within the width of the TabNavigator container.

If you disable a child of a TabNavigator container by setting its enabled property to false, you also disable the associated tab.

The following code creates the TabNavigator container in the image in TabNavigator container:

<?xml version="1.0"?>
<!-- containers\navigators\TNSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TabNavigator borderStyle="solid" >

        <mx:VBox label="Accounts" 
            width="300" 
            height="150">
            <!-- Accounts view goes here. -->
        </mx:VBox>

        <mx:VBox label="Stocks" 
            width="300" 
            height="150">
            <!-- Stocks view goes here. -->
        </mx:VBox>

        <mx:VBox label="Futures" 
            width="300" 
            height="150">
            <!-- Futures view goes here. -->
        </mx:VBox>   
    
    </mx:TabNavigator>
</mx:Application>

You can also set the currently active child using the selectedChild and selectedIndex properties inherited from the ViewStack container as follows:

• numChildren The index of the currently active container if one or more child containers are defined. The index is numbered from 0 to numChildren - 1, where numChildren is the number of child containers in the TabNavigator container. Set this property to the index of the container that you want active.
• selectedChild The currently active container, if one or more child containers are defined. This property is null if no child containers are defined. Set this property to the identifier of the container that you want active. You can set this property only in an ActionScript statement, not in MXML.

For more information on the selectedChild and selectedIndex properties, including examples, see ViewStack navigator container.

You use the showEffect and hideEffect properties of the children of a TabNavigator container to specify an effect to play when the user changes the currently active child. The following example plays the WipeLeft effect each time the selected tab changes:

<?xml version="1.0"?>
<!-- containers\navigators\TNEffect.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:WipeLeft id="myWL"/>

    <mx:TabNavigator>

        <mx:VBox label="Accounts" 
            width="300" 
            height="150"
            showEffect="{myWL}">
            <!-- Accounts view goes here. -->
        </mx:VBox>

        <mx:VBox label="Stocks" 
            width="300" 
            height="150"
            showEffect="{myWL}">
            <!-- Stocks view goes here. -->
        </mx:VBox>

        <mx:VBox label="Futures" 
            width="300" 
            height="150"
            showEffect="{myWL}">
            <!-- Futures view goes here. -->
        </mx:VBox>   
    
    </mx:TabNavigator>  
</mx:Application>

Flex 2.01

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/201/html/navigators_066_08.html

Add Comment