« Flex2 コントロール - 入力系 - | トップページ | Flex2 コントロール - Window・Dialog - »

2006年7月15日 (土)

Flex2 コントロール - ボタン -

使用頻度の高いボタン系コントロールですが、Flex2では数種類用意されているようです。
以下、サンプルと簡単な説明です。
コントロール サンプルページ
サンプルのMXMLファイル

  • Button
    通常のボタンです。
    labelプロパティでラベルを取得・設定できます。
    clickイベントでクリック時の処理を行います。
    <mx:Button label="Click" click="mx.controls.Alert.show('クリックされました');" />
  • ButtonBar
    複数のボタンを1つのグループとして扱うことが出来ます。
    dataProviderプロパティに配列などを指定して複数のボタンを生成できます。
    itemClickイベントでクリック時の処理を行います。その際、event.indexで何番目のボタンが押されたかを知ることが出来ます。 また、event.labelで押されたボタンのラベルを取得できます。
    <mx:ButtonBar itemClick="mx.controls.Alert.show(event.label);">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>Button1</mx:String>
                <mx:String>Button2</mx:String>
                <mx:String>Button3</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>
    
  • ToggleButtonBar
    ButtonBarのトグルボタン版です。
    グループ内のボタンのうち、1つだけが選択状態となります。
    RadioButtonの見た目がボタンになったような感じです。
    使用方法はButtonBarと同じようです
    <mx:ButtonBar itemClick="mx.controls.Alert.show(event.label);">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>Button1</mx:String>
                <mx:String>Button2</mx:String>
                <mx:String>Button3</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>
    
  • LinkButton
    リンクボタンです。
    labelプロパティでラベルを取得・設定できます。
    clickイベントでクリック時の処理を行います。
    <mx:LinkButton label="Click"
        click="mx.controls.Alert.show('クリックされました');" />
  • PopUpButton
    見た目はコンボボックスのようですが、ボタンです。
    popUpプロパティにポップアップされるものを指定することが出来ます。
    右の三角の部分を押すとポップアップされる動きはコンボボックスと同じですが、ポップアップされるものとしてIUIComponentインターフェイスを 実装してるものを指定できる点が面白いです。
    以下の例はカレンダーをポップアップするサンプルです。
    ただ、どういう時に使うのか思い浮かびません。
    <mx:PopUpButton id="popupButton" width="170"
        click="mx.controls.Alert.show(popupButton.label);">
        <mx:popUp>
            <mx:DateChooser id="dateChooser"
                change="popupButton.label=dateChooser.selectedDate.toLocaleDateString();
                    popupButton.close();" />
        </mx:popUp>
    </mx:PopUpButton>
  • PopUpMenuButton
    PopUpButtonのMenu版です。
    PopUpButton以上に使い道が思い浮かびません。
    <mx:PopUpMenuButton id="menuButton" width="120" labelField="@label"
             click="mx.controls.Alert.show(menuButton.label);"
            itemClick="menuButton.label=event.label;">
        <mx:dataProvider>
            <mx:XMLList>
                <item label="MenuItem1" />
                <item label="MenuItem2">
                    <subitem label="SubItem1" />
                    <subitem label="SubItem2" />
                </item>
            </mx:XMLList>
        </mx:dataProvider>
    </mx:PopUpMenuButton>

|

« Flex2 コントロール - 入力系 - | トップページ | Flex2 コントロール - Window・Dialog - »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12438/10951550

この記事へのトラックバック一覧です: Flex2 コントロール - ボタン -:

« Flex2 コントロール - 入力系 - | トップページ | Flex2 コントロール - Window・Dialog - »