TabBar コントロールは、タブの列を定義して水平方向または垂直方向に配置します。次は、TabBar コントロールの例です。

LinkBar コントロールと同様に、TabBar コントロールを使用して ViewStack コンテナでアクティブにする子コンテナを制御できます。TabBar コントロールを使用して ViewStack コンテナでアクティブにする子コンテナを制御するには、LinkBar コントロールと同じシンタックスを使用します。例については、ViewStack ナビゲータコンテナを参照してください。

TabBar コントロールは TabNavigator コンテナに似ていますが、TabBar コンテナは子を持てません。例えば、TabNavigator コンテナのタブは表示する子コンテナの選択に使用しますが、TabBar コントロールは 1 つのコンテナの表示内容を設定し、選択されたタブに基づいて、そのコンテナの子の表示 / 非表示を切り替えます。

TabBar コントロールの作成

<mx:TabBar> タグを使用して、MXML で TabBar コントロールを定義します。MXML の他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。

TabBar コントロールのデータは、<mx:TabBar> タグの子タグである <mx:dataProvider> および <mx:Array> を使用して指定します。<mx:dataProvider> タグでのデータの指定方法はいくつかあります。TabBar コントロールを作成する最も簡単な方法では、次の例のように、<mx:dataProvider> タグ、<mx:Array> タグおよび <mx:String> タグを使用して、各タブのテキストを指定します。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

<mx:String> タグは、TabBar コントロールの各タブのテキストを定義します。

また次の例のように、<mx:Object> タグを使用して、項目をオブジェクトの配列として定義することができます。各オブジェクトには、label プロパティと、関連するデータ値を格納します。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

label プロパティには州の名前が設定され、data プロパティにはその州都が設定されています。data プロパティを使用すると、データ値とテキストラベルを関連付けることができます。例えば、label テキストを色の名前として使用し、その色の数値表現をデータ値として関連付けることができます。

デフォルトでは、Flex は label プロパティの値を使用してタブテキストを定義します。オブジェクトに label プロパティがない場合、次の例のように、TabBar コントロールの labelField プロパティを使用して、タブテキストを含むプロパティ名を指定できます。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

TabBar コントロールへのデータの受け渡し

Flex では、ActionScript の変数定義または Flex のデータモデルから TabBar コントロールを作成できます。変数を使用する場合は、その定義で次のいずれかを設定します。

• ラベル（ストリング）
• ラベル（ストリング）とデータ（スカラー値またはオブジェクト）のペア

次の例では、変数を使用して TabBar コントロールを作成しています。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

Flex のデータモデルを dataProvider プロパティにバインドすることもできます。データモデルの使用について詳しくは、データの格納を参照してください。

TabBar コントロールのイベントの処理

TabBar コントロールは、ユーザーがタブを選択したときにブロードキャストされる itemClick イベントを定義します。イベントオブジェクトには次のプロパティがあります。

• label 選択されたタブのラベルを含むストリングです。
• index 選択されたタブのインデックスを含む数値です。インデックスは、0 ～ n - 1 の範囲の整数です。n は、タブの総数です。デフォルト値は 0 で、1 つ目のタブを表します。

次のコード例に、この TabBar コントロールの itemClick イベントハンドラを示します。

<?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>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、itemClick イベントが発生するたびに、タブラベル、選択されたインデックスおよび TabBar コントロールの dataProvider 配列の選択されたデータを使用して TextArea コントロールが更新されます。