ButtonBar コントロールと ToggleButtonBar コントロール -- Flex 2.01

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

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

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

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

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

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

ButtonBar コントロールと ToggleButtonBar コントロールには、次のデフォルトプロパティがあります。

プロパティ	デフォルト値
推奨サイズ	ラベルテキストを含むすべてのボタンとアイコンを、必要な追加スペースおよびセパレータとともに表示できる幅です。
コントロールのサイズ変更規則	デフォルトでは、コントロールのサイズは変更されません。親コンテナのサイズに合わせて ButtonBar のサイズを変更する場合は、パーセント値でサイズを指定します。
追加スペース	`top`、`bottom`、`left`、および `right` の各プロパティは 0 ピクセルに設定されています。

サブトピック

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>

ToggleButtonBar コントロールを作成する場合は、<mx:ButtonBar> タグを <mx:ToggleButtonBar> に置き換えます。それ以外のシンタックスは同じです。

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>

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 2 リファレンスガイド』の ItemClickEvent クラスの説明を参照してください。

次の例では、ButtonBar コントロールが itemClick イベントのイベントリスナーを定義します。

<?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 function clickHandler(event:ItemClickEvent):void {
                myTA.text="Selected button index: " + 
                    String(event.index) + "\n" + 
                    "Selected button label: " + 
                    event.label;
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="myTA" width="200" height="100"/>

    <mx:ButtonBar 
        borderStyle="solid" 
        horizontalGap="5" 
        itemClick="clickHandler(event);">
        <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>

この例では、イベントリスナーが、itemClick イベントに応じて、選択されたボタンのインデックスとラベルを TextArea コントロールに表示します。