TabNavigator container

A TabNavigator container creates and manages a set of tabs, which you use to navigate among its children. The children of a TabNavigator container are other containers. The TabNavigator container creates one tab for each child. When the user selects a tab, the TabNavigator container displays the associated child, as the following image shows:

The TabNavigator container is a child class of the ViewStack container and inherits much of its functionality. For complete reference information, see the Adobe Flex Language Reference.

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>
The executing SWF file for the previous example is shown below:

You can also set the currently active child by 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:Text text="This is a text control."/>
        </mx:VBox>

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

        <mx:VBox label="Futures" 
            width="300" 
            height="150"
            showEffect="{myWL}">
            <!-- Futures view goes here. -->
            <mx:Text text="This is a text control."/>
        </mx:VBox>   
    
    </mx:TabNavigator>  
</mx:Application>
The executing SWF file for the previous example is shown below:

Sizing the children of a TabNavigator container

The default width and height of a TabNavigator container is the width and height of the first child. A TabNavigator container does not change size every time you change the active child.

You can use the following techniques to control the size of a TabNavigator container so that it displays all the components inside its children:

Set explicit width and height properties for all children to the same fixed values.
Set percentage-based width and height properties for all children to the same fixed values.
Set explicit or percentage-based width and height properties for the TabNavigator container.

The method that you use is based on your application and the content of your TabNavigator container.