ViewStack ナビゲータコンテナは、相互に積み重ねられた子コンテナのコレクションによって構成され、一度に 1 つのコンテナだけが表示されます（これを「アクティブになる」と言います）。ViewStack コンテナには、現在アクティブなコンテナをユーザーが切り替えるメカニズムは組み込まれていません。ユーザーが現在アクティブな子を変更できるようにするためには、LinkBar、TabBar、ButtonBar、ToggleButtonBar のいずれかのコントロールを使用するか、または ActionScript を使用して独自のロジックを作成する必要があります。例えば、子コンテナ間の切り替えを制御する一連の Button コントロールを定義できます。

次の例は、ViewStack コンテナ内の積み重ねられた子コンテナを示します。

左の図は、1 つ目の子がアクティブな状態の ViewStack コンテナを表しています。ViewStack コンテナの子のインデックスは、0 ～ n - 1 の範囲の整数です（n は子コンテナの総数）。右の図は、2 つ目の子コンテナがアクティブな状態の ViewStack コンテナを表しています。

詳細については、『Adobe Flex リファレンスガイド』の ViewStack を参照してください。

ViewStack コンテナの作成

ViewStack コンテナは < mx:ViewStack> タグを使用して定義し、タグ本体で子コンテナを定義します。アクティブにする子コンテナを制御するには、ViewStack コンテナの次のプロパティを使用します。

1. selectedIndex 子コンテナが定義されている場合、現在アクティブなコンテナのインデックスを表します。子コンテナが定義されていない場合、このプロパティの値は -1 になります。インデックスは 0 ～ numChildren - 1 の範囲の整数です（numChildren は ViewStack コンテナ内の子コンテナの総数）。このプロパティをアクティブにするコンテナのインデックスに設定します。

   <mx:ViewStack> タグの selectedIndex プロパティを使用して、アプリケーションの起動時にデフォルトでアクティブにするコンテナを設定できます。次の例では、デフォルトでアクティブにするコンテナのインデックスを 1 に設定しています。

   <mx:ViewStack id="myViewStack" selectedIndex="1">
   
   

   次の例では、スタック内の 2 番目の子コンテナをアクティブにするため、ActionScript を使用して selectedIndex プロパティを設定しています。

   myViewStack.selectedIndex=1;
   
   

2. selectedChild 子コンテナが定義されている場合、現在アクティブなコンテナを表します。子コンテナが定義されていない場合、このプロパティの値は null になります。このプロパティは ActionScript 内で、アクティブにするコンテナの識別子に設定します。

   このプロパティは ActionScript ステートメントでのみ設定できます。MXML では設定できません。

   次の例は、ActionScript を使用して selectedChild プロパティを設定し、search という識別子を持つ子コンテナをアクティブにします。

   myViewStack.selectedChild=search;
   
   

3. numChildren ViewStack コンテナ内の子コンテナの数を表します。

   次の例は、ActionScript ステートメントで numChildren プロパティを使用して、スタック内の最後の子コンテナをアクティブに設定します。

   myViewStack.selectedIndex=myViewStack.numChildren-1;
   
   

次の例では、3 つの子コンテナを持つ ViewStack コンテナを作成します。また、子コンテナを制御する 3 つの Button コントロールを定義し、ボタンをクリックしてアクティブにする子コンテナを選択します。

<?xml version="1.0"?>
<!-- containers\navigators\VSSimple.mxml  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Create a VBox container so the container for 
        the buttons appears above the ViewStack container. -->
    <mx:VBox>
        <!-- Create an HBox container to hold the three buttons. -->
        <mx:HBox borderStyle="solid">

            <!-- Define the three buttons. 
                Each uses the child container identifier 
                to set the active child container. -->
            <mx:Button id="searchButton" 
                label="Search Screen" 
                click="myViewStack.selectedChild=search;"/>

            <mx:Button id="cInfoButton" 
                label="Customer Info Screen" 
                click="myViewStack.selectedChild=custInfo;"/>

            <mx:Button id="aInfoButton" 
                label="Account Info Screen"
                click="myViewStack.selectedChild=accountInfo;"/>
        </mx:HBox>

        <!-- Define the ViewStack and the three child containers and have it
            resize up to the size of the container for the buttons. -->
        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" width="100%">

            <mx:Canvas id="search" label="Search">
                <mx:Label text="Search Screen"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" label="Customer Info">
                <mx:Label text="Customer Info"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" label="Account Info">
                <mx:Label text="Account Info"/>
            </mx:Canvas>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例をロードすると、3 つの Button コントロールが表示され、ViewStack コンテナで最初に定義された子コンテナがアクティブになります。Button コントロールをクリックすると、アクティブコンテナが変わります。

LinkBar、TabBar、ButtonBar、ToggleButtonBar のいずれかのコントロールを使用して、ViewStack コンテナのアクティブな子を設定することもできます。これらのクラスは NavBar クラスのサブクラスなので、総称して「ナビゲータバーコントロール」と呼びます。ナビゲータバーコントロールは ViewStack コンテナに含まれる子コンテナの数を調べ、次の図のように水平または垂直に並んだリンク、タブ、またはボタンを作成します。ユーザーはこれらのエレメントを使用して、アクティブにする子コンテナを選択できます。

LinkBar コントロール内のアイテムは、次の例のように、ViewStack コンテナの各子コンテナの label プロパティの値に対応します。

<?xml version="1.0"?>
<!-- containers\navigators\VSLinkBar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <!-- Create a LinkBar control to navigate 
            the ViewStack container. -->
        <mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid"/>

        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" 
            width="100%">
            
            <mx:Canvas id="search" label="Search">
                <mx:Label text="Search Screen"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" label="Customer Info">
                <mx:Label text="Customer Info"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" label="Account Info">
                <mx:Label text="Account Info"/>
            </mx:Canvas>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ナビゲータバーコントロールで設定するプロパティは dataProvider だけです。このプロパティでは、ナビゲータバーコントロールに関連付ける ViewStack の名前を指定します。LinkBar コントロールの詳細については、LinkBar コントロールを参照してください。TabBar コントロールの詳細については、TabBar コントロールを参照してください。ButtonBar コントロールと ToggleButtonBar コントロールの詳細については、ButtonBar コントロールと ToggleButtonBar コントロールを参照してください。

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

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

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

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

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

ViewStack コンテナへのビヘイビアの適用

ViewStack コンテナまたは ViewStack コンテナの子に、エフェクトを割り当てることができます。例えば、ViewStack コントロールの creationCompleteEffect プロパティに WipeRight エフェクトを割り当てると、ViewStack が初めて表示されたときに WipeRight エフェクトが一度だけ再生されます。

ViewStack の子が変更されたときに実行するエフェクトを指定するには、子の hideEffect プロパティと showEffect プロパティを使用します。hideEffect プロパティで指定したエフェクトはコンテナが非表示になると再生され、showEffect プロパティで指定したエフェクトは新しい子が表示されると再生されます。ViewStack コンテナは、非表示になるコンテナの hideEffect プロパティに指定されたエフェクトが完了するまで待機し、その後で新しい子コンテナを表示します。

次の例では、ViewStack コンテナが初めて作成されたときに WipeRight エフェクトを実行し、各々の子が非表示になるときに WipeDown エフェクトを、新しい子が表示されるときに WipeUp エフェクトをそれぞれ実行します。

<?xml version="1.0"?>
<!-- containers\navigators\VSLinkEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:WipeUp id="myWU" duration="300"/>
    <mx:WipeDown id="myWD" duration="300"/>
    <mx:WipeRight id="myWR" duration="300"/>

    <mx:VBox>
        <mx:LinkBar dataProvider="{myViewStack}" 
            borderStyle="solid"
            backgroundColor="#EEEEFF"/>

        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" 
            width="100%"
            creationCompleteEffect="{myWR}">

            <mx:Canvas id="search" 
                label="Search"
                hideEffect="{myWD}" 
                showEffect="{myWU}">
                <mx:Label text="Search Screen"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" 
                label="Customer Info"
                hideEffect="{myWD}" 
                showEffect="{myWU}">
                <mx:Label text="Customer Info"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" 
                label="Account Info"
                hideEffect="{myWD}" 
                showEffect="{myWU}">
                <mx:Label text="Account Info"/>
            </mx:Canvas>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

コンテナの showEffect プロパティは、コンテナの可視性が false から true に変わったときだけトリガされます。したがって、コンポーネントが初めて作成されたときにエフェクトをトリガする場合は、creationCompleteEffect プロパティを使用します。