標準の ComboBox の使い方を紹介。

ComboBox

コンボボックス(ComboBox)は、一覧の項目を値を選択することができるコントロールです。標準コンポーネントです。

基本的な使い方

以下のようなタグをソースに挿入します。

   <mx:ComboBox>
       <mx:ArrayCollection>
           <mx:String>カレー</mx:String>
           <mx:String>ハンバーグ</mx:String>
           <mx:String>たぬきうどん</mx:String>
           <mx:String>親子丼</mx:String>
       </mx:ArrayCollection>
   </mx:ComboBox>

イベントを記述する方法：

file:TestCombo.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#FFFFFF">
    <mx:ComboBox x="50" y="50"
        id="a_cmb"
        change="onChange()">
        <mx:ArrayCollection>
            <mx:String>カレー</mx:String>
            <mx:String>ハンバーグ</mx:String>
            <mx:String>たぬきうどん</mx:String>
            <mx:String>親子丼</mx:String>
        </mx:ArrayCollection>
    </mx:ComboBox>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function onChange():void {
                var sel:String = String(a_cmb.selectedItem);
                Alert.show(sel);
            }
        ]]>
    </mx:Script>
</mx:Application>

選択肢を選ぶと change イベントが生成されるので、 change にイベントハンドラを設定します。

そして、選択したアイテムを得るには、コンボボックスの、 selectedItem を参照します。 selectedItem 自体は、オブジェクト型なので、 String型でキャストすることで文字列として取得できます。

或いは、表示中のテキストを、text プロパティで得ることもできます。 onChange()関数を次のように書いても同じ意味になります。

private function onChange():void {
    var sel:String = a_cmb.text;
    Alert.show(sel);
}

ラベルに値を関連付ける

コンボボックスのアイテムに値を関連付けることができます。データを定義するときに、<mx:String>で定義していたものを、以下のように<mx:Object>タグでデータを記述します。

        <mx:ArrayCollection>
            <mx:Object label="カレー" value="650"/>
            <mx:Object label="ハンバーグ" value="580"/>
            <mx:Object label="たぬきうどん" value="450"/>
            <mx:Object label="親子丼" value="700"/>
        </mx:ArrayCollection>

これは、定食屋のメニュー名を label に値段を、valueのように記述しています。このように、コンボボックス内に表示する値を、 Objectのlabelとして定義します。その他の値は、value や data など、好きなプロパティを指定することができます。

以下は、コンボボックスでアイテムを選択すると、定食屋のメニューの値段を表示するプログラムです。

file:TestComboBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#FFFFFF">
    <mx:ComboBox x="50" y="50"
        id="a_cmb"
        change="onChange()">
        <mx:ArrayCollection>
            <mx:Object label="カレー" value="650"/>
            <mx:Object label="ハンバーグ" value="580"/>
            <mx:Object label="たぬきうどん" value="450"/>
            <mx:Object label="親子丼" value="700"/>
        </mx:ArrayCollection>
    </mx:ComboBox>
    <mx:Label id="a_lbl" x="50" y="90"/>
    <mx:Script>
        <![CDATA[
            private function onChange():void {
                var sel:Object = a_cmb.selectedItem;
                a_lbl.text = sel.value + "円です";
            }
        ]]>
    </mx:Script>
</mx:Application>

このプログラムは、データバインディングの仕組みを利用して、以下のように書くこともできます。

file:TestComboBox2.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#FFFFFF">
    <mx:ComboBox x="50" y="50"
        id="a_cmb">
        <mx:ArrayCollection>
            <mx:Object label="カレー" value="650"/>
            <mx:Object label="ハンバーグ" value="580"/>
            <mx:Object label="たぬきうどん" value="450"/>
            <mx:Object label="親子丼" value="700"/>
        </mx:ArrayCollection>
    </mx:ComboBox>
    <mx:Label id="a_lbl" x="50" y="90"
        text="{a_cmb.selectedItem.value}円"/>
</mx:Application>

まとめ

• ComboBoxから選択肢を選ぶと change イベントが生成されます。
• 選択されたアイテムを得るには、selectedItem を使います。

コメント