A TabBar control defines a horizontal or vertical row of tabs. The following shows an example of a TabBar control:

As with the LinkBar control, you can use a TabBar control to control the active child container of a ViewStack container. The syntax for using a TabBar control to control the active child of a ViewStack container is the same as for a LinkBar control. For an example, see ViewStack navigator container.

While a TabBar control is similar to a TabNavigator container, it does not have any children. For example, you use the tabs of a TabNavigator container to select its visible child container. You can use a TabBar control to set the visible contents of a single container to make that container's children visible or invisible based on the selected tab.

Creating a TabBar control

You use the <mx:TabBar> tag to define aTabBar control in MXML. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or in an ActionScript block.

You specify the data for the TabBar control by using the <mx:dataProvider> and <mx:Array> child tags of the <mx:TabBar> tag. The <mx:dataProvider> tag lets you specify data in several different ways. In the simplest case for creating a TabBar control, you use the <mx:dataProvider>, <mx:Array>, and <mx:String> tags to specify the text for each tab, as the following example shows:

<?xml version="1.0"?>
<!-- controls\bar\TBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TabBar>
        <mx:dataProvider>
            <mx:String>Alabama</mx:String>
            <mx:String>Alaska</mx:String>
            <mx:String>Arkansas</mx:String>
        </mx:dataProvider>
    </mx:TabBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

The <mx:String> tags define the text for each tab in the TabBar control.

You can also use the <mx:Object> tag to define the entries as an array of objects, where each object contains a label property and an associated data value, as the following example shows:

<?xml version="1.0"?>
<!-- controls\bar\TBarObject.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TabBar>
        <mx:dataProvider>
            <mx:Object label="Alabama" data="Montgomery"/>
            <mx:Object label="Alaska" data="Juneau"/>
            <mx:Object label="Arkansas" data="Little Rock"/>                    
        </mx:dataProvider>
    </mx:TabBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

The label property contains the state name and the data property contains the name of its capital. The data property lets you associate a data value with the text label. For example, the label text could be the name of a color, and the associated data value could be the numeric representation of that color.

By default, Flex uses the value of the label property to define the tab text. If the object does not contain a label property, you can use the labelField property of the TabBar control to specify the property name containing the tab text, as the following example shows:

<?xml version="1.0"?>
<!-- controls\bar\TBarLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:TabBar labelField="state">
        <mx:dataProvider>
            <mx:Object state="Alabama" data="Montgomery"/>
            <mx:Object state="Alaska" data="Juneau"/>
            <mx:Object state="Arkansas" data="Little Rock"/>                    
        </mx:dataProvider>
    </mx:TabBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

Passing data to a TabBar control

Flex lets you populate a TabBar control from an ActionScript variable definition or from a Flex data model. When you use a variable, you can define it to contain one of the following:

• A label (string)
• A label (string) paired with data (scalar value or object)

The following example populates a TabBar control from a variable:

<?xml version="1.0"?>
<!-- controls\bar\TBarVar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var STATE_ARRAY:ArrayCollection = new ArrayCollection([
                {label:"Alabama", data:"Montgomery"},
                {label:"Alaska", data:"Juneau"},
                {label:"Arkansas", data:"LittleRock"} 
            ]);
        ]]>
    </mx:Script>

    <mx:TabBar >
        <mx:dataProvider>
            {STATE_ARRAY}
        </mx:dataProvider> 
    </mx:TabBar>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also bind a Flex data model to the dataProvider property. For more information on using data models, see Storing Data.

Handling TabBar control events

The TabBar control defines an itemClick event that is broadcast when a user selects a tab. The event object contains the following properties:

• label String containing the label of the selected tab.
• index Number containing the index of the selected tab. Indexes are numbered from 0 to n - 1, where n is the total number of tabs. The default value is 0, corresponding to the first tab.

The following example code shows a handler for the itemClick event for this TabBar control:

<?xml version="1.0"?>
<!-- controls\bar\TBarEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.events.ItemClickEvent;
            import mx.controls.TabBar;
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var STATE_ARRAY:ArrayCollection = new ArrayCollection([
                {label:"Alabama", data:"Montgomery"},
                {label:"Alaska", data:"Juneau"},
                {label:"Arkansas", data:"LittleRock"} 
            ]);

            private function clickEvt(event:ItemClickEvent):void {
                // Access target TabBar control.
                var targetComp:TabBar = TabBar(event.currentTarget);
                forClick.text="label is: " + event.label + "\nindex is: " + 
                    event.index + "\ncapital is: " +
                    targetComp.dataProvider[event.index].data;
            }   
        ]]>
    </mx:Script>

    <mx:TabBar id="myTB" itemClick="clickEvt(event);"> 
        <mx:dataProvider>
            {STATE_ARRAY}
        </mx:dataProvider> 
    </mx:TabBar>

    <mx:TextArea id="forClick" width="250" height="100"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

In this example, every itemClick event updates the TextArea control with the tab label, selected index, and the selected data from the TabBar control's dataProvider Array.