ComboBox コントロールはドロップダウンリストで、ユーザーは値を 1 つ選択できます。その機能は、HTML の SELECT フォームエレメントによく似ています。

詳しくは、『Adobe Flex リファレンスガイド』を参照してください。

ComboBox コントロールについて

次の図は ComboBox コントロールを示しています。

コントロールが編集可能な状態の場合、ユーザーはリストの最上部に直接テキストを入力できます。また、リストにあらかじめ設定されている値から 1 つを選択することもできます。編集不可能な状態の場合、ユーザーが 1 文字入力するとドロップダウンリストが開き、入力された文字に最も近い値までスクロールされます。マッチングには、ユーザーが入力した 1 文字目だけが使用されます。

ドロップダウンリストを開いたときに、アプリケーションの下側の境界内に収まらない場合は、上方向に開かれます。リストアイテムが長すぎて、表示領域の水平方向内に収まらない場合は、収まる範囲のテキストだけが表示されます。ドロップダウンリストに表示するアイテム数が多い場合は、垂直スクロールバーが表示されます。

ComboBox コントロールの作成

ComboBox コントロールを MXML で定義するには、<mx:ComboBox> タグを使用します。MXML の他の場所（別のタグまたは ActionScript ブロック）のコンポーネントを参照する場合は、id 値を指定します。

ComboBox コントロールではリストベースのデータプロバイダを使用します。詳しくは、データプロバイダおよびコレクションの使用を参照してください。

ComboBox コントロールのデータは、<mx:ComboBox> タグの dataProvider プロパティを使用して指定します。データプロバイダにはコレクションを指定する必要があります。標準的なコレクションの実装は ArrayCollection クラスと XMLListCollection クラスで、それぞれ配列ベースのデータと XML ベースのデータを操作します。データプロバイダとして Array オブジェクトまたは XMLList オブジェクトなどの生データオブジェクトを使用することもできますが、変更する可能性のあるデータに対してはコレクションを明示的に指定することをお勧めします。データプロバイダおよびコレクションについて詳しくは、データプロバイダおよびコレクションの使用を参照してください。

ComboBox コントロールを作成する簡単な方法では、次の例のように、<mx:dataProvider> 子タグを使用してプロパティを指定し、<mx:ArrayCollection> タグを使用して各項目を ArrayCollection として定義します。ArrayCollection のソースはストリングの配列です。

<?xml version="1.0"?>
<!-- dpcontrols/ComboBoxSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:ComboBox> 
      <mx:ArrayCollection>
         <mx:String>AK</mx:String>
         <mx:String>AL</mx:String>
         <mx:String>AR</mx:String>
      </mx:ArrayCollection>
   </mx:ComboBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例は、MXML のデフォルトを活用する方法を示しています。dataProvider は ComboBox コントロールのデフォルトのプロパティなので、<mx:dataProvider> タグを使用する必要はありません。同様に、source は ArrayCollection クラスのデフォルトのプロパティなので、<mx:ArrayCollection> タグ内で <mx:source> タグを使用する必要はありません。最後に、ソース配列に <mx:Array> タグを指定する必要もありません。

データプロバイダには、次の例のように、複数のフィールドを持つオブジェクトも含めることができます。

<?xml version="1.0"?>
<!-- dpcontrols/ComboBoxMultiple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:ComboBox> 
      <mx:ArrayCollection>
         <mx:Object label="AL" data="Montgomery"/>
         <mx:Object label="AK" data="Juneau"/>
         <mx:Object label="AR" data="Little Rock"/>
      </mx:ArrayCollection>
   </mx:ComboBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

最初の例のようにデータソースがストリングの配列である場合、ComboBox にはストリングがドロップダウンリストのアイテムとして表示されます。データソースがオブジェクトで構成されている場合、ComboBox にはデフォルトでラベルフィールドの内容が使用されます。ただしこの動作は、ComboBox のラベルの指定の説明にあるように、オーバーライドすることが可能です。

ComboBox コントロールのアイテムのインデックスはゼロベースです。つまり、0、1、2、...、, n-1 の値で、n はアイテムの総数です。アイテムの値はラベルテキストです。

ComboBox コントロールでのイベントの使用

通常、ComboBox コントロールに対するユーザーの操作はイベントで処理します。

ComboBox コントロールは、次のようなユーザーの操作によってコントロールの selectedIndex プロパティまたは selectedItem プロパティの値が変化すると、change イベント（flash.events.Event クラス、type プロパティの値は flash.events.Event.CHANGE）をブロードキャストします。

• ユーザーが前に選択されていたアイテムと異なるアイテムを選択して、マウスクリック、Enter キー、または Ctrl + ↑（上向き矢印）キーを使用してドロップダウンリストを閉じた場合。
• ドロップダウンリストが閉じた状態で、ユーザーが上向き矢印、下向き矢印、PageUp、PageDown のいずれかのキーを押して新しいアイテムを選択した場合。
• ComboBox コントロールが編集可能でユーザーがコントロール内にテキストを入力した場合、コントロールのテキストフィールドが変更されるたびに change イベントがブロードキャストされます。

ComboBox コントロールは、開かれた際および閉じた際に、mx.events.DropdownEvent.OPEN 型（開いたとき）および mx.events.DropdownEvent.CLOSE 型（閉じたとき）の mx.events.DropdownEvent をブロードキャストします。これらのイベントと、その他の ComboBox イベントについて詳しくは、『Adobe Flex リファレンスガイド』の「ComboBox」を参照してください。

次の例では、ComboBox イベントからの情報が表示されます。

<?xml version="1.0"?>
<!-- dpcontrols/ComboBoxEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
   <mx:Script>
      <![CDATA[
         import flash.events.Event;
         import mx.events.DropdownEvent;

         // Display the type of event for open and close events.
         private function dropEvt(event:DropdownEvent):void {
            forChange.text+=event.type + "\n";
         }

         // Display a selected item's label field and index for change events.
         private function changeEvt(event:Event):void {
            forChange.text+=event.currentTarget.selectedItem.label + " " + 
               event.currentTarget.selectedIndex + "\n";
         }
      ]]>
   </mx:Script>

   <mx:ComboBox open="dropEvt(event)" close="dropEvt(event)"
         change="changeEvt(event)" > 
      <mx:ArrayCollection>
         <mx:Object label="AL" data="Montgomery"/>
         <mx:Object label="AK" data="Juneau"/>
         <mx:Object label="AR" data="Little Rock"/>
      </mx:ArrayCollection>
   </mx:ComboBox>
   <mx:TextArea id="forChange" width="150" height="100%"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ストリングの配列を使用して ComboBox コントロールを作成した場合、currentTarget.selectedItem フィールドにはストリングが格納されます。オブジェクトの配列を使用して作成した場合は、currentTarget.selectedItem フィールドには選択されたアイテムに対応するオブジェクトが設定されます。したがって、この場合、currentTarget.selectedItem.label は選択された Item オブジェクトのラベルフィールドを参照します。

この例では、ComboBox コントロールの selectedItem プロパティおよび selectedIndex プロパティをイベントハンドラで使用しています。change イベントが発生すると、選択されたアイテムのラベルとアイテムのインデックスでコントロール内の TextArea コントロールが更新され、open イベントまたは close イベントが発生すると、イベントタイプが追加されます。

ComboBox のラベルの指定

ComboBox のデータソースがストリングの配列である場合、コントロールには各アイテムのストリングが表示されます。データソースにオブジェクトが含まれる場合、デフォルトでは、ComboBox コントロールのアイテムとして表示されるテキストを定義する label という名前のプロパティが各オブジェクトに設定されている必要があります。オブジェクトに label プロパティがない場合、次の例のように、ComboBox コントロールの labelField プロパティを使用してプロパティ名を指定できます。

    <mx:ComboBox open="dropEvt(event)" close="dropEvt(event)"
            change="changeEvt(event)" labelField="state">
        <mx:ArrayCollection>
            <mx:Object state="AL" capital="Montgomery"/>
            <mx:Object state="AK" capital="Juneau"/>
            <mx:Object state="AR" capital="Little Rock"/>
        </mx:ArrayCollection>
    </mx:ComboBox>

ComboBox コントロールでのイベントの使用の節のイベントハンドラで州 ID および州都を表示するには、次の例のように、change イベントハンドラが state というプロパティを使用するように修正します。

        private function changeEvt(event) {
            forChange.text=event.currentTarget.selectedItem.state + " " + 
            event.currentTarget.selectedItem.capital + " " +
            event.currenttarget.selectedIndex;
        }

また、ラベル関数の使用の説明にあるように、ラベル関数を使用して ComboBox のラベルを指定することもできます。

変数とモデルを使用した ComboBox コントロールの作成

Flex では、ActionScript の変数定義または Flex のデータモデルから ComboBox コントロールのデータプロバイダを作成できます。データプロバイダの各エレメントは、ストリングのラベルを含む必要があり、追加データのフィールドも含むことができます。次の例では、2 つの ComboBox コントロールを作成しています。1 つは ArrayCollection 変数からで、これは配列から直接作成され、もう 1 つは ArrayCollection からで、これは <MX:Model> タグのアイテムの配列から作成されます。

<?xml version="1.0"?>
<!-- dpcontrols/ComboBoxVariables.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
   initialize="initData();">

   <mx:Script>
      <![CDATA[
         import mx.collections.*
         private var COLOR_ARRAY:Array= 
            [{label:"Red", data:"#FF0000"},
            {label:"Green", data:"#00FF00"},
            {label:"Blue", data:"#0000FF"}];
         // Declare an ArrayCollection variable for the colors.
         // Make it Bindable so it can be used in bind 
         // expressions ({colorAC}).
         [Bindable]
         public var colorAC:ArrayCollection;

         // Initialize colorAC ArrayCollection variable from the Array.
         // Use an initialize event handler to initialize data variables
         // that do not rely on components, so that the initial values are
         // available when the controls that use them are constructed.
         //See the mx:ArrayCollection tag, below, for a second way to
         //initialize an ArrayCollection.
         private function initData():void {
            colorAC=new ArrayCollection(COLOR_ARRAY);
         }
      ]]>
   </mx:Script>
   <!-- This example shows two different ways to 
        structure a Model. -->
   <mx:Model id="myDP">
      <obj>
         <item label="AL" data="Montgomery"/>
         <item>
            <label>AK</label>
            <data>Juneau</data>
         </item>
         <item>
            <label>AR</label>
            <data>Little Rock</data>
         </item>
      </obj>
   </mx:Model>
      
   <!-- Create a stateAC ArrayCollection that uses as its source an Array of
         the item elements from the myDP model. 
         This technique and the declaration and initialization code used for
         the colorAC variable are alternative methods of creating and
         initializing the ArrayCollection. -->
   <mx:ArrayCollection id="stateAC" source="{myDP.item}"/>

   <mx:ComboBox dataProvider="{colorAC}"/>
   <mx:ComboBox dataProvider="{stateAC}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、簡単なモデルが使用されています。しかし、外部データソースからのモデルの作成や ActionScript を使用したカスタムデータモデルの定義も可能です。データモデルの使用について詳しくは、データの格納を参照してください。

リモートデータプロバイダを使用して ComboBox コントロールにデータを提供することもできます。例えば、Web サービス処理でストリングの配列が返される場合には、次のフォーマットを使用して、ComboBox コントロールの各行にストリングを表示できます。

<mx:ArrayCollection id="resultAC"
    source="mx.utils.ArrayUtil.toArray(service.operation.lastResult);"
<mx:ComboBox dataProvider="{resultAC}" />

リモートデータプロバイダの使用について詳しくは、データプロバイダコンポーネント内のリモートデータを参照してください。

ComboBox コントロールのユーザー操作

ArrayCollection コントロールは編集できる場合とできない場合があります。これはブール型の editable プロパティで指定します。編集不可能な ComboBox コントロールでは、ユーザーはドロップダウンリストからアイテムを 1 つ選択できます。編集可能な ComboBox では、コントロールのテキストフィールドが編集できるようになっており、ユーザーはここに直接テキストを入力するか、またはドロップダウンリストからアイテムを選択して内容を設定できます。ユーザーが ComboBox コントロールのリストからアイテムを選択すると、選択したアイテムのラベルが ComboBox コントロールの最上部にあるテキストフィールドにコピーされます。

編集可能な ComboBox コントロール（ドロップダウンボックスではなく）にフォーカスがあるときには、すべてのキーストロークがテキストフィールドに送られ、TextInput コントロールの規則に従って処理されます（TextInput コントロールを参照）。ただし Ctrl + ↓（下矢印）キーの組み合わせは例外で、この場合はドロップダウンリストが開きます。ドロップダウンリストが開いたら、上向き矢印キーおよび下向き矢印キーでリスト内の移動、Enter キーでリスト内のアイテムの選択ができます。

編集不可能な ComboBox コントロールにフォーカスがあるときには、英数字キーを使用すると、データプロバイダ内で入力キーと先頭文字が一致する次のアイテムを選択し、そのラベルをテキストフィールドに表示することができます。ドロップダウンリストが開いている場合は、選択したアイテムが選択表示されます。

ドロップダウンリストが開いていない場合は、以下のキーを使用して、編集不可能な ComboBox コントロールを制御することもできます。

編集不可能な ComboBox コントロールのドロップダウンリストにフォーカスがあるときには、英数字キーを使用すると、ドロップダウンリスト内で入力キーと先頭文字が一致する次のアイテムを選択できます。また、ドロップダウンリストが開いているときには、次のキーを使用して制御できます。