1. ホーム
2. デベロッパーセンター
3. Flexデベロッパーセンター
4. Flex クイックスタート

Flex クイックスタート： 簡単なユーザインタフェースの作成

目次

• コントロールの使用
• コンテナの使用
• コンポーネントへのスタイルの適用
• エフェクトの追加
• ステートの作成
• ステートのトランジションの定義
• ツールヒントの使用
• カーソルの制御

---

ステートの作成

多くのリッチインターネットアプリケーションでは、ユーザが行う作業に基づいてインタフェースが変化します。 簡単な例として、ユーザがマウスを合わせると画像が変化するインタフェースが挙げられます。 より複雑な例として、ユーザの作業の進行状況に応じて、たとえば、ブラウズビューから詳細ビューにコンテンツが変化するユーザインタフェースが挙げられます。 こうしたインタフェースでは、スムーズな開く／閉じるエフェクトを使用してビューを切り替えています。

ビューステートを使用すれば、複雑なイベント処理コードを記述しなくても、こうした動作を簡単に実現することができます。

ビューステート間の切り替えを定義する方法について詳しくは、「ステートのトランジションの定義」を参照してください。

もっとも簡単なビューステートは、コンポーネントの特定のビューを定義するものです。 たとえば、製品のサムネールに最小限の情報を含むベースステートと追加情報を含むリッチステートの 2 つのビューステートを割り当てることができます。 アプリケーションの場合も同様に、ログインステート、概要ステートまたは検索結果ステートなど、異なるアプリケーション状態に応じた複数のビューステートを割り当てることができます。

次の例では、ビューステートを使用してログインおよび登録フォームを簡単に実装します。 この例では、最初のビューステートでユーザのログインを促します。さらに、必要に応じてユーザがログインするためのリンクも用意します。 ユーザが Need to Register リンクを選択すると、フォームのビューステートが変更されて登録情報が表示されます。 ユーザが Return to Login リンクをクリックすると、ビューステートがログインフォームに戻ります。

例

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"
    width="340" height="250"
>
    <!-- The states property of the Application class 
         defines the view states. -->
    <mx:states>
        
        <!-- 
            The "Register" state is based on the base state. 
            All states are based on the base state by default
            so you can leave out the basedOn property. 
        -->
        <mx:State name="Register" basedOn="">

            <!-- Add a FormItem component to the form. -->
            <mx:AddChild 
                relativeTo="{loginForm}" 
                position="lastChild" 
                creationPolicy="all"
            >

                <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 
        title="Login" id="loginPanel"
        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 control to change to
            the Register view state. 
        -->
        <mx:LinkButton 
            label="Need to Register?" id="registerLink"
            click="currentState='Register'"
        />

        <mx:Spacer width="100%" id="spacer1"/>
        <mx:Button label="Login" id="loginButton"/>
    </mx:ControlBar>
  </mx:Panel>
</mx:Application>

結果

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

トップへ戻る

---

詳細情報

ステートの作成について詳しくは、『Flex 2 Developer's Guide』の「Using View States」を参照してください。

著者について