TabBar control -- Flex 2.01

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.

Property	Default value
Preferred size	A width wide enough to contain all label text, plus any padding, and a height tall enough for the label text. The default tab height is determined by the font, style, and skin applied to the control. If you set an explicit height using the `tabHeight` property, that value overrides the default value.
Control resizing rules	TabBar controls do not resize by default. Specify percentage sizes if you want your TabBar to resize based on the size of its parent container.
Padding	0 pixels for the `left` and `right` properties.

Subtopics

Creating a TabBar control

You use the <mx:TabBar> tag to define a TabBar 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 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>

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 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>

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:

<?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>

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 a itemClick event that is broadcast when a user selects a tab. The event object contains the following properties:

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 + " index is: " + 
                    event.index + " capital 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="150"/>
</mx:Application>

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.