TabNavigator コンテナは一連のタブを作成し、管理します。ユーザーはそれらのタブを使用して、TabNavigator コンテナの子から子へ移動できます。TabNavigator コンテナの子は別のコンテナです。TabNavigator コンテナは、子コンテナごとにタブを 1 つ作成します。ユーザーがタブを選択すると、次の図のように、関連付けられた子が TabNavigator コンテナに表示されます。

TabNavigator コンテナは ViewStack コンテナの子クラスで、ViewStack コンテナの機能の多くを継承します。詳細については、『Adobe Flex リファレンスガイド』を参照してください。

TabNavigator コンテナの作成

TabNavigator コンテナは、<mx:TabNavigator> タグを使用して定義します。一度に表示される TabNavigator コンテナの子は 1 つだけです。ユーザーは、タブの選択またはキーボード操作によって子を選択できます。ユーザーが現在アクティブな子を変更するたびに、TabNavigator コンテナから change イベントがブロードキャストされます。

TabNavigator コンテナは、その子に対応するタブを自動的に作成し、子の label プロパティからタブテキストを、子の icon プロパティからタブアイコンを、それぞれ決定します。タブは、子のインデックスの番号順に左から右に並べられます。TabNavigator コンテナの幅にすべてのタブが収まる場合には、タブはすべて表示されます。

TabNavigator コンテナの子の enabled プロパティを false に設定して無効にすると、関連するタブも無効になります。

次のコードにより、TabNavigator コンテナの図にある TabNavigator コンテナが作成されます。

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

次のように、ViewStack コンテナから継承される selectedChild プロパティと selectedIndex プロパティを使用して、現在アクティブな子を設定することもできます。

• numChildren 子コンテナが定義されている場合、現在アクティブなコンテナのインデックスを表します。インデックスは 0 ～ numChildren - 1 の範囲の整数です（numChildren は TabNavigator コンテナ内の子コンテナの総数）。このプロパティをアクティブにするコンテナのインデックスに設定します。
• selectedChild 子コンテナが定義されている場合、現在アクティブなコンテナを表します。子コンテナが定義されていない場合、このプロパティの値は null になります。このプロパティは、アクティブにするコンテナの識別子に設定します。このプロパティは ActionScript ステートメントでのみ設定できます。MXML では設定できません。

例など、selectedChild プロパティと selectedIndex プロパティの詳細については、ViewStack ナビゲータコンテナを参照してください。

ユーザーが現在アクティブな子を変更したときに再生するエフェクトを指定するには、TabNavigator コントロールの子の showEffect プロパティと hideEffect プロパティを使用します。次の例は、選択されているタブが変更されるたびに WipeLeft エフェクトを再生します。

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

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

        <mx:VBox label="Futures" 
            width="300" 
            height="150"
            showEffect="{myWL}">
            <!-- Futures view goes here. -->
        </mx:VBox>   
    
    </mx:TabNavigator>  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

TabNavigator コンテナの子のサイズ設定

TabNavigator コンテナのデフォルトの幅と高さは、最初の子の幅と高さになります。TabNavigator コンテナのサイズは、アクティブな子が変更されても変わりません。

次のテクニックを使用すると、TabNavigator コンテナのサイズを制御して、TabNavigator コンテナの子の中にすべてのコンポーネントを表示できます。

• すべての子の width プロパティと height プロパティを明示的に同じ固定値に設定します。
• すべての子のパーセント値ベースの width プロパティと height プロパティを明示的に同じ固定値に設定します。
• TabNavigator コンテナの width プロパティと height プロパティを明示的またはパーセント値ベースで設定します。

どの方法を使用するかは、作成するアプリケーションと TabNavigator コンテナの内容に応じて決定してください。

TabNavigator コンテナのキーボード操作

TabNavigator コンテナにフォーカスがあるときは、次の表のようにキーストロークが処理されます。