Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > TabBar コントロール

TabBar コントロール

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


TabBar コンテナ

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

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

TabBar コントロールには次のデフォルトプロパティがあります。

プロパティ

デフォルト値

推奨サイズ

すべてのラベルテキストを設定された追加スペースとともに表示できる幅と、ラベルテキストを表示できる高さです。

デフォルトのタブの高さは、コントロールに適用されるフォント、スタイル、およびスキンによって決まります。tabHeight プロパティを使用して明示的に高さを設定すると、その値によってデフォルト値がオーバーライドされます。

コントロールのサイズ変更規則

デフォルトでは、TabBar コントロールのサイズは変更されません。親コンテナのサイズに合わせて TabBar のサイズを変更する場合は、パーセント値でサイズを指定します。

パディング

left および right の各プロパティは、0 ピクセルに設定されています。

サブトピック

TabBar コントロールの作成 283
TabBar コントロールへのデータの受け渡し 284
TabBar コントロールのイベントの処理 285

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>

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

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>

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>

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

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

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

次の例のコードは、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>

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

Flex 2.01