Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > ナビゲータコンテナの使用 > Accordion ナビゲータコンテナ > Button コントロールを使用した Accordion コンテナの移動

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

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

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

プロパティ	説明
`numChildren`	Accordion コンテナ内に定義されている子パネルの総数を表します。
`selectedIndex`	現在アクティブな子パネルのインデックスを表します。子パネルには 0 ～ `numChildren` - 1 までの番号が付けられます。`selectedIndex` プロパティを変更すると、現在アクティブなパネルが変更されます。
`selectedChild`	子コンテナが定義されている場合、現在アクティブなコンテナを表します。子コンテナが定義されていない場合、このプロパティの値は `null` になります。このプロパティは、アクティブにするコンテナの識別子に設定します。このプロパティは ActionScript ステートメントでのみ設定できます。MXML では設定できません。

これらのプロパティの詳細については、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>

ナビゲーションボタンでは、相対位置も使用できます。次の 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;"/>

Flex 2.01