フォームは多くのアプリケーションの基本的なコンポーネントです。しかし、複雑なフォームの操作や複数ページにわたるフォームの移動は、ユーザーにわかりやすいとは言えません。また、フォームが大きすぎて画面内に収まらない場合もあります。

Flex では Accordion ナビゲータコンテナを使用して、フォームの外観と移動の操作性を向上させることができます。Accordion コンテナでは一連の子パネルを定義しますが、一度に表示されるパネルは 1 つだけです。次の図は、Accordion コンテナの例です。

コンテナを移動する場合、ユーザーはアクセスする子パネルに対応するナビゲーションボタンをクリックします。Accordion コンテナを使用すると、ユーザーはどのような順序でもフォーム内を移動できます。例えば、ユーザーが Credit Card Information パネルを使用しているときに、Billing Address パネルの情報を変更したいと考えたとします。そのためには、Billing Address パネルに移動して情報を編集してから、Credit Card Information パネルに戻らなければなりません。

HTML の場合、配送先住所、請求先住所、およびクレジットカード情報を入力するフォームは 3 ページで作成されることが多く、ユーザーは次のページに移動する前に各ページをサーバーに送信する必要があります。Accordion コンテナを使用すると、3 つの子パネルの情報をまとめて、1 つの送信ボタンで送信できます。このアーキテクチャにより、サーバーのトラフィックが最小限に抑えられるとともに、ユーザーが自分が今どこにいてどのような操作をしているのかを把握しやすくなります。

Accordion コンテナは特にフォームや Form コンテナの操作に便利ですが、Flex のどのコンポーネントも Accordion コンテナの子パネル内で使用できます。例えば、Accordion コンテナを使用して製品のカタログを作成し、各パネルで類似製品のグループを紹介する使い方が考えられます。

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

Accordion コンテナの作成

<mx:Accordion> タグを使用して、Accordion コンテナを定義します。Accordion コンテナでは、子パネル 1 つに対して 1 つのコンテナを定義します。例えば、Accordion コンテナに子パネルが 4 つあり、それぞれがフォームの 4 つの部分に対応する場合は、次の例のように、Form コンテナを使用して各子パネルを定義します。

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

    <mx:Accordion id="accordion1" height="450">

        <mx:Form id="shippingAddress" label="1. Shipping Address">

            <mx:FormItem id="sfirstNameItem" label="First Name">
                <mx:TextInput id="sfirstName"/>
            </mx:FormItem>

            <!-- Additional contents goes here. -->

        </mx:Form>

        <mx:Form id="billingAddress" label="2. Billing Address">
            <!-- Form contents goes here. -->
        </mx:Form>

        <mx:Form id="creditCardInfo" label="3. Credit Card Information">
            <!-- Form contents goes here. -->
        </mx:Form>

        <mx:Form id="submitOrder"   label="4. Submit Order">
            <!-- Form contents goes here. -->
        </mx:Form>

    </mx:Accordion>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、Form コンテナを使用して各子パネルを定義します。子パネルの定義には、他のコンテナも使用できます。

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

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

Button コントロールを使用した Accordion コンテナの移動

ユーザーが Accordion コンテナのパネルを移動する最も簡単な方法は、移動先のパネルのナビゲーションボタンをクリックすることです。ただし、Back や Next などの移動用 Button コントロールを Accordion コンテナに追加して、ユーザーが移動しやすいようにすることもできます。

移動用の Button コントロールでは、Accordion コンテナの次のプロパティを使用して子パネル間を移動します。

これらのプロパティの詳細については、ViewStack ナビゲータコンテナを参照してください。

例えば、Accordion コンテナの 2 つ目のパネル（パネル番号 1）で次の 2 つの Button コントロールを使用して、パネル番号 0 に戻ったり、パネル番号 2 に進んだりできます。

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

    <mx:Accordion id="accordion1" height="450">

        <mx:Form id="shippingAddress" label="1. Shipping Address">

            <mx:FormItem id="sfirstNameItem" label="First Name">
                <mx:TextInput id="sfirstName"/>
            </mx:FormItem>

        </mx:Form>

        <mx:Form id="billingAddress" label="2. Billing Address">
            <mx:Button id="backButton" 
                label="Back" 
                click="accordion1.selectedIndex=0;"/>
            <mx:Button id="nextButton" 
                label="Next" 
                click="accordion1.selectedIndex=2;"/>
        </mx:Form>

        <mx:Form id="creditCardInfo" label="3. Credit Card Information">
        </mx:Form>

    </mx:Accordion>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ナビゲーションボタンでは、相対位置も使用できます。次の Button コントロールを使用すると、Accordion コンテナの現在のパネル番号を基準として、前のパネルや次のパネルに移動できます。

<mx:Button id="backButton" label="Back"click="accordion1.selectedIndex = accordion1.selectedIndex - 1;"/>
<mx:Button id="nextButton" label="Next"click="accordion1.selectedIndex = accordion1.selectedIndex + 1;"/>

「Next」Button コントロールでは、次のように selectedChild プロパティを使用し、パネルのコンテナの id プロパティの値に基づいて次のパネルに移動できます。

<mx:Button id="nextButton" label="Next" click="accordion1.selectedChild=creditCardInfo;"/>

次の Button コントロールは Accordion コンテナの最後のパネルを開きます。

<mx:Button id="lastButton" label="Last" click="accordion1.selectedIndex = accordion1.numChildren - 1;"/>

子のボタンイベントの処理

Accordion コンテナは、ユーザーがパネルを変更したときにイベントを認識します。ボタンのクリックや PageDown などのキー入力によってユーザーが子パネルを変更すると、Accordion コンテナから change イベントがブロードキャストされます。

change イベントのイベントハンドラは、<mx:Accordion> タグの change プロパティを使用して登録します。ActionScript でハンドラを登録することもできます。次の例では、ユーザーがパネルを変更するたびに change イベントを flashlog.txt にログ出力しています。

<mx:Accordion id="accordion1" height="450" change="trace('change');">

Accordion ボタンの外観の制御

Accordion コンテナのボタンは、AccordionHeader クラスによってレンダリングされます。AccordionHeader クラスは Button のサブクラスで、Button クラス と同じスタイルプロパティを持ちます。

Accordion ボタンのスタイルを変更するには、Accordion クラスの getHeaderAt() メソッドを呼び出して子コンテナのボタンへの参照を取得してから、ボタンの setStyle() メソッドを呼び出してスタイルを設定します。次の例ではこの手法を使用して、それぞれの Accordion ボタンのテキストを異なる色に設定しています。

<?xml version="1.0"?>
<!-- containers\navigators\AccordionStyling.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="600"
    height="600" 
    creationComplete="setButtonStyles();">

    <mx:Script>
        <![CDATA[
            public function setButtonStyles():void {
                comp.getHeaderAt(0).setStyle('color', 0xAA0000);
                comp.getHeaderAt(1).setStyle('color', 0x00AA00);
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="comp">
        <mx:VBox label="first box">
            <mx:TextInput/>
            <mx:Button label="Button 1"/>
        </mx:VBox>
        <mx:VBox label="second box">
            <mx:TextInput/>
            <mx:Button label="Button 2"/>
        </mx:VBox>
    </mx:Accordion>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

また、Accordion クラスの headerStyleName スタイルプロパティを使用して、ボタンの外観を制御することもできます。詳細については、『Adobe Flex リファレンスガイド』の Accordion を参照してください。