多くの高度なインターネットアプリケーションでは、ユーザーの実行するタスクに応じてインターフェイスが変化します。簡単な例としては、ユーザーがマウスポインタをイメージの上に置くと別のイメージに変わるなどの変化が挙げられます。より複雑な例としては、ユーザーによるタスクの進捗状況に応じてブラウズビューから詳細ビューに変更するなどの、ユーザーインターフェイスの内容の変化が挙げられます。ビューステートを使用すると、このようなアプリケーションを簡単に実装できます。

最も単純なビューステートでは、コンポーネントのある特定のビューが定義されます。例えば、製品サムネールには、最小限の情報だけを表示する基本ステートと、詳細な情報へのリンクのある「詳細」ステートの 2 つのビューステートを定義できます。次の図は、ショッピングカートに商品を追加できる詳細ステートです。

ビューステートを作成するには、基本ステートを定義し、次に、基本ステートを変更する一連の変更またはオーバーライドを定義して新しいビューステートを定義します。追加のビューステートでは、子コンポーネントの追加または削除、スタイル値やプロパティの値の設定、状態固有のイベントリスナーの定義などによって、基本ビューステートを変更できます。

ビューステートで基本ステートを変更する必要はありません。ビューステートでは、他のビューステートに対する変更を指定できます。これにより、各ビューステート固有のオーバーライドを追加でき、一方で共通の機能を共有する一連のビューステートを作成できます。詳細については、他のビューステートへの依存を参照してください。

ビューステートを使用してログインインターフェイスを定義

ビューステートを使用すると、ログインフォームおよび登録フォームを実装できます。この例では、基本ビューステートでユーザーにログインが促されます。また、ユーザーが必要に応じて登録を実行できる LinkButton コントロールも表示されます。次の図を参照してください。

ユーザーが「Need to Register」リンクを選択すると、フォームのビューステートが変化して登録情報が表示されます。次の図を参照してください。

この新しいビューステートを作成するために、基本ビューステートに次の変更が加えられています。

• Panel コンテナのタイトルが Register に設定されている。
• Form コンテナに、パスワードを確認するための新しい TextInput コントロールが追加されている。
• Button コントロールのラベルが Register に設定されている。
• ユーザーがステートを変更して基本ビューステートに戻ることができる新しい LinkButton コントロールに、LinkButton コントロールが置き換えられている。

ユーザーが「Return to Login」リンクをクリックすると、ビューステートが変更されて基本ビューステートに戻り、ログインフォームが表示され、Register ビューステートでユーザーが行ったすべての変更が元に戻されます。

次の表に、ビューステートを定義するために使用するクラスを示します。

例：ログインフォームアプリケーション

アプリケーションまたはコンポーネントの基本ビューステートは、デフォルトのビューステートです。ビューステートの指定を省略すると、アプリケーションには単一のビューステート（基本ステート）のみ設定されます。基本ビューステートに追加ビューステートを追加するには、<mx:states> タグを使用します。<mx:states> タグの本体内に、それぞれ 1 つの追加ビューステートを示す <mx:State> タグを 1 つ以上追加できます。

UIComponent クラスは、ビューステートを設定するために使用する currentState プロパティを定義しています。前の例では、Button コントロールを使用して、Application オブジェクトの currentState プロパティを "NewButton"（<mx:State> タグで指定されたビューステートの名前）、または基本ビューステートに対応する空のストリング "" に設定しています。アプリケーション開始時の currentState プロパティのデフォルト値は '' です。

アプリケーションまたはコンポーネントの初期ビューステートを、基本以外のビューステートに設定することもできます。基本ビューステート以外を初期ビューステートとして使用するには、currentState プロパティを特定のビューステートに設定します。例えば、次のようなコードを使用して、コンポーネントの初期ステートを折り畳まれたステートに指定します。

<myComps:CollapsePanel currentState="collapsed">

次の例では、例：ログインフォームアプリケーションに示されたログインフォームおよび登録フォームを作成します。このアプリケーションには次の機能があります。

• ユーザーが「Need to Register」LinkButton コントロールをクリックすると、click イベントのイベントハンドラによってビューステートが Register に設定されます。
• Register ステートのコードによって、TextInput コントロールが追加され、Panel コンテナおよび Button コントロールのプロパティが変更され、既存の LinkButton コントロールが削除され、新しい LinkButton コントロールが追加されます。
• ユーザーが「Return to Login」LinkButton コントロールをクリックすると、click イベントのイベントハンドラによってビューステートが基本ビューステートにリセットされます。

<?xml version="1.0"?>
<!-- states\LoginExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    verticalAlign="middle">

    <!-- The Application class states property defines the view states.-->
    <mx:states>
        <mx:State name="Register">
            <!-- Add a TextInput control to the form. -->           
            <mx:AddChild relativeTo="{loginForm}" 
                position="lastChild">
                <mx:FormItem id="confirm" label="Confirm:">
                    <mx:TextInput/>
                </mx:FormItem>
            </mx:AddChild>
            
            <!-- Set properties on the Panel container and Button control.-->
            <mx:SetProperty target="{loginPanel}" 
                name="title" value="Register"/>
            <mx:SetProperty target="{loginButton}" 
                name="label" value="Register"/>

            <!-- Remove the existing LinkButton control.-->            
            <mx:RemoveChild target="{registerLink}"/>
            
            <!-- Add a new LinkButton control to change view state 
                back to the login form.-->          
            <mx:AddChild relativeTo="{spacer1}" position="before">
                <mx:LinkButton label="Return to Login" 
                    click="currentState=''"/>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Panel id="loginPanel" 
        title="Login" 
        horizontalScrollPolicy="off" 
        verticalScrollPolicy="off">
        
        <mx:Form id="loginForm">
            <mx:FormItem label="Username:">
                <mx:TextInput/>
            </mx:FormItem>
            <mx:FormItem label="Password:">
                <mx:TextInput/>
            </mx:FormItem>
        </mx:Form>
        
        <mx:ControlBar>
            <!-- Use the LinkButton to change to the Register view state.-->                   
            <mx:LinkButton id="registerLink" 
                label="Need to Register?" 
                click="currentState='Register'"/>
            <mx:Spacer width="100%" id="spacer1"/>
            <mx:Button label="Login" id="loginButton"/>
        </mx:ControlBar>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

例：ビューステートを使用してレイアウトを制御

この例では、次の例のように 3 つの Panel コンテナと 3 つのビューステートを持つアプリケーションを定義します。

ビューステートを変更するには、拡大サイズで表示される Panel コンテナをクリックします。ビューステートの切り替わりをアニメーション化するトランジションを追加しているこの例のバージョンについては、トランジションの定義を参照してください。

<?xml version="1.0"?>
<!-- states/ThreePanel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400">

    <!-- Define the two view states, in addition to the base state.-->
    <mx:states>
        <mx:State name="One">
            <mx:SetProperty target="{p1}" name="x" value="110"/>
            <mx:SetProperty target="{p1}" name="y" value="0"/>
            <mx:SetProperty target="{p1}" name="width" value="200"/>
            <mx:SetProperty target="{p1}" name="height" value="210"/>
            <mx:SetProperty target="{p2}" name="x" value="0"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="100"/>
            <mx:SetProperty target="{p2}" name="height" value="100"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
        <mx:State name="Two">
            <mx:SetProperty target="{p2}" name="x" value="110"/>
            <mx:SetProperty target="{p2}" name="y" value="0"/>
            <mx:SetProperty target="{p2}" name="width" value="200"/>
            <mx:SetProperty target="{p2}" name="height" value="210"/>
            <mx:SetProperty target="{p3}" name="x" value="0"/>
            <mx:SetProperty target="{p3}" name="y" value="110"/>
            <mx:SetProperty target="{p3}" name="width" value="100"/>
            <mx:SetProperty target="{p3}" name="height" value="100"/>
        </mx:State>
    </mx:states>

    <!-- Define the Canvas container holding the three Panel containers.-->
    <mx:Canvas id="pm" width="100%" height="100%">
        <mx:Panel id="p1" title="One" 
                x="0" y="0" width="100" height="100"
                click="currentState='One'">
            <mx:Label fontSize="24" text="One"/>
        </mx:Panel>
        
        <mx:Panel id="p2" title="Two" 
                x="0" y="110" width="100" height="100"
                click="currentState='Two'">
            <mx:Label fontSize="24" text="Two"/>
        </mx:Panel>
        
        <mx:Panel id="p3" title="Three" 
                x="110" y="0" width="200" height="210" 
                click="currentState=''">
            <mx:Label fontSize="24" text="Three"/>
        </mx:Panel>
    </mx:Canvas>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ビューステートとナビゲータコンテナの比較

ビューステートは、ユーザーの操作に応答してアプリケーションまたはコンポーネントの外観を変える方法の 1 つです。複数のコンポーネントに影響する変更を実行するときは、Accordion、Tab Navigator、ViewStack コンテナなどのナビゲータコンテナも使用できます。

ナビゲータコンテナとステートのどちらを使用するかは、アプリケーションの要件およびユーザーインターフェイスの設計に基づき決定します。例えば、タブ付きのインターフェイスを使用する場合、TabNavigator コンテナを使用します。ユーザーが複雑なフォームを迷わず移動できるようにするには、この処理を実行するビューステートの代わりに Accordion コンテナを使用します。

ビューステートと ViewStack コンテナを比較するとき、ViewStack コンテナの異なるビュー間ではコンポーネントを簡単には共有できないことを考慮する必要があります。つまり、ビューを変更するたびにコンポーネントを再作成する必要があります。例えば、View Stack コンテナのすべてのビューに検索コンポーネントを表示する場合、各ビューにその検索コンポーネントを定義する必要があります。

ビューステートを使用する場合、コンポーネントを一度定義し、それを各ビューステートに組み込むことにより、複数のビューステート間でコンポーネントを簡単に共有できます。ビューステート間でのコンポーネントの共有については、オーバーライドを使用したコンポーネントの追加と削除を参照してください。

ナビゲータコンテナの詳細については、ナビゲータコンテナの使用を参照してください。

ビューステートベースアプリケーションに関する追加の手法

ビューステートベースアプリケーションの構築と実装では次のようなテクニックも活用できます。

• カスケーディングのビューステート定義を作成します。basedOn プロパティを使用して、あるビューステートの上に別のビューステートを明示的に配置します。このテクニックは、共通のエレメントをいくつか含む複数のビューステートがある場合に有効です。すべての共通エレメントを 1 つのビューステートに含ませ、その上に別のビューステートを配置します。詳細については、他のビューステートへの依存を参照してください。
• 表示画面の主要なセクションを置き換えるビューステートを使用します。例えば、ショッピングアプリケーションでビューステートを使用して、製品セレクタパネルとチェックアウト Accordion コントロールのどちらを画面に大きく表示するかを制御することができます。例については、例：ビューステートを使用してレイアウトを制御を参照してください。
• ビューステート間の変化を制御するトランジションを使用します。例えば、ビューステートの変更時にサイズが変更されるすべてのコンポーネントに Resize エフェクトを追加できます。トランジションの詳細については、トランジションの使用を参照してください。