Flexのリッチな画面遷移テクニック集：現場で使えるFlex実践テクニック（1）（2/2 ページ）

» 2007年06月14日 00時00分公開

[成瀬勉，クラスメソッド]

画面の一部の要素を変更するビューステート

　ビューステートとは、表示中の画面の一部の要素を変更するための仕組みです。例えば、ユーザーが特定の項目を選択したときのみ、新たな入力項目が追加されたりするような場合などに使用します。

　ビューステートを使用するには、コンテナの持つstatesというプロパティに複数のStateオブジェクトを指定します。Stateでは、動的に画面要素の追加や削除、イベントハンドラやプロパティの設定などをするためのタグが用意されており、そのビューステートになったときの処理をタグで記述できます。

　ビューステートの変更をするには、コンテナのcurrentStateに、Stateオブジェクトのnameで指定した名前を指定します。

ViewStateSample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
 
    <mx:Script>
    <![CDATA[
        private function selectForm(event:Event):void{
            switch(event.currentTarget.selectedItem.label){
            case "カレー":
                currentState = "curry";
                break;
            case "ハンバーグ":
                currentState = "hamburger";
                break;
            }
        }
    ]]>
    </mx:Script>
 
    <mx:states>
        <mx:State name="curry">
            <mx:AddChild relativeTo="{form1}" position="lastChild">
                <mx:FormItem label="カレーの具は？">
                    <mx:CheckBox label="チキン" />
                    <mx:CheckBox label="ポーク" />
                    <mx:CheckBox label="ビーフ" />
                    <mx:CheckBox label="ジャガイモ" />
                </mx:FormItem>
            </mx:AddChild>
        </mx:State>
 
        <mx:State name="hamburger">
            <mx:AddChild relativeTo="{form1}" position="lastChild">
                <mx:FormItem label="焼き加減は？">
                    <mx:RadioButton label="レア" />
                    <mx:RadioButton label="ミディアム" />
                    <mx:RadioButton label="ウェルダン" />
                </mx:FormItem>
            </mx:AddChild>
        </mx:State>
    </mx:states>
 
    <mx:Form id="form1">
        <mx:FormItem label="好きな食べ物は？">
            <mx:ComboBox change="selectForm(event)"
                         prompt="選択してください">
                <mx:dataProvider>
                    <mx:Object>
                        <mx:label>カレー</mx:label>
                    </mx:Object>
                    <mx:Object>
                        <mx:label>ハンバーグ</mx:label>
                    </mx:Object>
                </mx:dataProvider>
            </mx:ComboBox>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

画面6　ビューステートの例

画面7　カレーを選択したとき

画面8　ハンバーグを選択したとき

ウィンドウをもう1つ作るポップアップウィンドウ

　ポップアップウィンドウは補助的な情報の表示や、ユーザーに手続きを必ず完了させるためのモーダルダイアログを表示するための機能です。

　ポップアップウィンドウを実装するには、PopUpManagerを使用して、ポップアップさせるコンポーネントを指定します。通常ポップアップさせるコンポーネントはTitleWindowを利用します。TitleWindowには、ポップアップウィンドウのドラッグ移動やクローズボタンなどが用意されています。

PopupWindowSample.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical">
 
    <mx:Button label="ポップアップを開く" 
               click="PopUpManager.createPopUp(this, PopupWindow)" />
    <mx:Script>
    <![CDATA[
        import mx.containers.TitleWindow;
        import mx.managers.PopUpManager;
    ]]>
    </mx:Script>
</mx:Application>

PopupWindow.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" 
                  layout="vertical" width="400" height="300"
                   title="ポップアップウィンドウ" 
                   close="PopUpManager.removePopUp(this)">
    <mx:Label text="ポップアップウィンドウです。" />
    <mx:RichTextEditor width="100%" height="100%" />
</mx:TitleWindow>

画面9　ポップアップウィンドウの例

画面遷移の履歴を管理するには？

　Flexでは、画面遷移の履歴を管理する機構としてHistoryManagerがあります。HistoryManagerにより、ブラウザの「戻る」を押したときに以前表示していた画面状態に戻ることができます。

　ナビゲートコンテナでは、この機能がデフォルトで有効になっています。ナビゲートコンテナのhistoryManagementEnabledをfalseにすれば、そのナビゲートコンテナの履歴管理を、またプロジェクトプロパティのコンパイルオプションの「履歴管理（ブラウザの戻るボタン）を有効にする」のチェックを外すと、アプリケーション全体の履歴管理を、それぞれ無効にできます。