ButtonBar コントロールと ToggleButtonBar コントロールは、共通の外観を持つ関連するボタンの水平または垂直の列を定義します。これらのコントロールは単一のイベントである itemClick イベントを定義し、このイベントはコントロールのボタンのいずれかが選択されると送出されます。

ButtonBar コントロールは、選択状態を保持しないボタンのグループを定義します。ButtonBar コントロールのボタンが選択されると、ボタンの外観が選択状態に変わり、ボタンの選択が解除されると、ボタンの外観が選択されない状態に戻ります。

ToggleButtonBar コントロールは、選択状態または非選択状態を保持するボタンのグループを定義します。ToggleButtonBar コントロールで 1 つのボタンだけが選択状態になることができます。つまり、ToggleButtonBar コントロールの 1 つのボタンを選択すると、そのボタンは他のボタンが選択されるまで、選択状態を継続します。

ToggleButtonBar コントロールの toggleOnClick プロパティを true に設定した場合、現在選択されているボタンを選択すると、そのボタンの選択が解除されます。デフォルトでは、toggleOnClick プロパティは false に設定されています。

次の図は、一連のボタンが定義されている ButtonBar コントロールの例です。

次の図は、一連のボタンが定義されている ToggleButtonBar コントロールの例です。コントロールの Dreamweaver ボタンが選択されています。

ButtonBar コントロールの作成

ButtonBar コントロールは、次の例のように、<mx:ButtonBar> タグを使用して MXML 内で作成します。

<?xml version="1.0"?>
<!-- controls\bar\BBarSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:ButtonBar borderStyle="solid" horizontalGap="5">
        <mx:dataProvider>
            <mx:String>Flash</mx:String>
            <mx:String>Director</mx:String>
            <mx:String>Dreamweaver</mx:String>
            <mx:String>ColdFusion</mx:String>
        </mx:dataProvider>
    </mx:ButtonBar>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、ButtonBar コントロールと ToggleButtonBar コントロールの図のような 4 つの Button コントロールが並ぶ列を作成します。

ToggleButtonBar コントロールを作成する場合は、<mx:ButtonBar> タグを <mx:ToggleButtonBar> に置き換えます。ToggleButtonBar コントロールでは、selectedIndex プロパティによって、コントロールの作成時に選択されるボタンが決定されます。selectedIndex のデフォルト値は 0 で、バーの左端のボタンが選択されます。selectedIndex プロパティを -1 に設定すると、バー内のすべてのボタンが選択解除されます。それ以外のシンタックスは同じです。

dataProvider プロパティには、4 つのボタンのラベルを指定します。dataProvider プロパティには、オブジェクトの配列を使用してもデータを格納できます。各オブジェクトには、label、icon および toolTip の最大 3 つのフィールドを含めることができます。

次の例では、オブジェクトの配列で各ボタンのラベルとアイコンを指定しています。

<?xml version="1.0"?>
<!-- controls\bar\BBarLogo.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:ButtonBar borderStyle="solid" horizontalGap="5">
        <mx:dataProvider>
            <mx:Object label="Flash" 
                icon="@Embed(source='assets/Flashlogo.gif')"/>
            <mx:Object label="Director" 
                icon="@Embed(source='assets/Dirlogo.gif')"/>
            <mx:Object label="Dreamweaver" 
                icon="@Embed(source='assets/Dlogo.gif')"/>
            <mx:Object label="ColdFusion" 
                icon="@Embed(source='assets/CFlogo.gif')"/>
        </mx:dataProvider>
    </mx:ButtonBar>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ButtonBar コントロールや ToggleButtonBar コントロールは、dataProvider プロパティの値に基づいて Button コントロールを作成します。ButtonBar および ToggleButtonBar は Container のサブクラスですが、Container.addChild() メソッドや Container.removeChild() メソッドを使用して Button コントロールを追加または削除しないでください。代わりに、addItem() メソッドや removeItem() メソッドを使用して dataProvider プロパティを操作します。ButtonBar コントロールや ToggleButtonBar コントロールは、dataProvider プロパティに対する変更に基づいて、自動的に子を追加または削除します。

ButtonBar イベントの処理

ButtonBar コントロールと ToggleButtonBar コントロールは、ユーザーがボタンを選択すると、itemClick イベントを送出します。イベントリスナーに渡されるイベントオブジェクトは、ItemClickEvent 型です。イベントリスナー内からイベントオブジェクトのプロパティにアクセスし、選択したボタンのインデックスやその他の情報を確認します。最初のボタンのインデックスは 0 です。イベントオブジェクトの詳細については、『Adobe Flex リファレンスガイド』の ItemClickEvent クラスの説明を参照してください。

次の例の ToggleButtonBar コントロールでは、itemClick イベントの clickHandler() というイベントリスナーを定義しています。

<?xml version="1.0"?>
<!-- controls\bar\BBarEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private var savedIndex:int = 99999;
            
            private function clickHandler(event:ItemClickEvent):void {
                if (event.index == savedIndex) {
                    myTA.text=""
                }
                else {
                    savedIndex = event.index;
                    myTA.text="Selected button index: " +
                    String(event.index) + "\n" +
                    "Selected button label: " +
                    event.label;
                }    
            }
        ]]>
    </mx:Script>
    
    <mx:ToggleButtonBar
        borderStyle="solid"
        horizontalGap="5"
        itemClick="clickHandler(event);"
        toggleOnClick="true"
        selectedIndex="-1">
        
        <mx:dataProvider>
            <mx:String>Flash</mx:String>
            <mx:String>Director</mx:String>
            <mx:String>Dreamweaver</mx:String>
            <mx:String>ColdFusion</mx:String>
        </mx:dataProvider>

    </mx:ToggleButtonBar>

    <mx:TextArea id="myTA" width="250" height="100"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、クリックハンドラが、itemClick イベントに応じて、選択されたボタンのインデックスとラベルを TextArea コントロールに表示します。選択したボタンを 2 度目に押すと、ボタンの選択が解除され、サンプルクリックハンドラはテキスト領域をクリアします。