ColorPicker コントロールを使用すると、ユーザーはドロップダウン色見本パネル（パレット）から色を選択できます。このコントロールは、最初に選択された色付きのプレビューサンプルとして表示されます。ユーザーがコントロールを選択すると、色見本パネルが表示されます。このパネルには、選択した色のサンプルと色見本パネルが含まれています。デフォルトでは、この色見本パネルに Web セーフカラー（216 色、三原色のそれぞれの値が #CC0066 のような 33 の倍数になっている）が表示されます。

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

ColorPicker コントロールについて

ColorPicker コントロールを開くと、アプリケーションの他のコントロール上に色見本パネルが展開します。通常、下方向に開きます。色見本パネルがアプリケーションの下側の境界内には収まらないが、ColorPicker ボタンより上に収まる場合は、上方向に開かれます。

showTextField プロパティを true（デフォルト）に設定すると、パネルには選択した色のラベルが付いたテキストボックスが表示されます。テキストボックスを表示して、editable プロパティを true（デフォルト）に設定した場合、ユーザーは 16 進数値を入力することで色を指定できます。

次の例に、mx:ColorPicker タグのデフォルト設定を使用する畳まれた状態と展開された状態の ColorPicker コントロールを示します。

Flex は、データプロバイダから色見本パネルとテキストボックスを作成します。デフォルトでは、このコントロールは、すべての Web セーフカラーを含むデータプロバイダを使用します。独自のデータプロバイダを使用する場合、次の項目を指定できます。

表示する色 

独自のデータプロバイダを使用する場合、色を指定する必要があります。

テキストボックスに表示する色用のラベル  

テキストラベルを指定しない場合、16 進数のカラー値が使用されます。

各色に関する追加情報 

この情報には、ID や説明コメントなど、アプリケーションに使用できる任意の情報を指定できます。

次の図に、カラーラベル値を含むカスタムデータプロバイダを使用する展開された状態の ColorPicker コントロールを示します。このコントロールは、スタイルを使用して表示要素のサイズも設定しています。

ColorPicker コントロールの作成

ColorPicker コントロールを MXML で定義するには <mx:ColorPicker> タグを使用します。MXML で他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。例えば、図の ColorPicker コントロールは、次の最低限のコードで作成されています。

<mx:ColorPicker id="cp"/>

ColorPicker コントロールでは色にリストデータプロバイダを使用します。この種のデータプロバイダについて詳しくは、データプロバイダおよびコレクションの使用を参照してください。データプロバイダを省略すると、Web セーフカラーを使用するデフォルトのデータプロバイダが使用されます。データプロバイダは、色の配列でも、オブジェクトの配列でもかまいません。次の例は、単純な色の配列を持つ ColorPicker を作成しています。より複雑なデータプロバイダの使用方法については、オブジェクトを使用した ColorPicker コントロールの作成を参照してください。

<?xml version="1.0"?>
<!-- controls\colorpicker\CPSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
                '0xFFFF00', '0x88FF00', '0x00FF00', '0x00FF88', '0x00FFFF', 
                '0x0088FF', '0x0000FF', '0x8800FF', '0xFF00FF', '0xFFFFFF'];
        ]]>    
    </mx:Script>
    
    <mx:ColorPicker id="cp" dataProvider="{simpleDP}"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

通常、ColorPicker コントロールに対するユーザーの操作はイベントで処理します。次の例では、change イベントと open イベントのイベントリスナーを前の例の ColorPicker コントロールに追加しています。

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

    <mx:Script>
        <![CDATA[
            //Import the event classes.
            import mx.events.DropdownEvent;
            import mx.events.ColorPickerEvent;

            [Bindable]
            public var simpleDP:Array = ['0x000000', '0xFF0000', '0xFF8800',
               '0xFFFF00', '0x88FF00', '0x00FF00', '0x00FF88', '0x00FFFF',
               '0x0088FF', '0x0000FF', '0x8800FF', '0xFF00FF', '0xFFFFFF'];
        
            public function openEvt(event:DropdownEvent):void {
                forChange.text="Opened";
            }       

            public function changeEvt(event:ColorPickerEvent):void {
                forChange.text="Selected Item: "
                   + event.currentTarget.selectedItem + " Selected Index: "
                   + event.currentTarget.selectedIndex;
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:TextArea id="forChange" 
            width="150"/>
        <mx:ColorPicker id="cp" 
            dataProvider="{simpleDP}"
            open="openEvt(event);" 
            change="changeEvt(event);"/> 
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ColorPicker コントロールは、色見本パネルが開かれたときに open イベントを送出し、ユーザーの操作によってコントロールの値が変化したときに change イベントを送出します。イベントリスナーに渡されるオブジェクトの currentTarget プロパティには、ColorPicker コントロールへの参照が設定されています。この例では、ColorPicker コントロールの selectedItem プロパティおよび selectedIndex プロパティをイベントリスナーで使用しています。change イベントが発生すると、選択されたアイテムとアイテムのインデックスでコントロール内の TextArea コントロールが更新され、open イベントでは Opened という語が表示されます。

カラー値の配列から ColorPicker コントロールを作成した場合、target.selectedItem フィールドには 16 進数のカラー値が設定されます。オブジェクトの配列から作成した場合、target.selectedItem フィールドには選択されたアイテムに対応するオブジェクトへの参照が設定されます。

ColorPicker コントロールのアイテムのインデックスは 0 から始まります。つまり、値は 0、1、2、...、n - 1 となります。n はアイテムの総数です。したがって、target.selectedIndex の値は 0 から始まり、前の例の値 2 は、カラー 0xFF8800 のデータプロバイダエントリを指します。

オブジェクトを使用した ColorPicker コントロールの作成

ColorPicker コントロールのデータは、オブジェクトの配列を使用して設定することもできます。デフォルトでは、ColorPicker は、オブジェクトの次の 2 つのフィールドを使用します。1 つは color で、もう 1 つは label です。label フィールドの値は、色見本パネルのテキストフィールドのテキストを決定します。オブジェクトに label フィールドがない場合、テキストフィールドの color フィールドの値が使用されます。ColorPicker コントロールの colorField プロパティと labelField プロパティを使用すると、color フィールドと label フィールドに別の名前を指定できます。オブジェクトには、色の説明や内部カラー ID など、ActionScript で使用できる追加フィールドを設定できます。

例：オブジェクトを使用する ColorPicker コントロール

次の例は、color、label および descript の 3 つのフィールドを持つオブジェクトの配列を使用する ColorPicker を示しています。

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

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.DropdownEvent;

            [Bindable]
            public var complexDPArray:Array = [
                {label:"Yellow", color:"0xFFFF00", 
                    descript:"A bright, light color."}, 
                {label:"Hot Pink", color:"0xFF66CC", 
                    descript:"It's HOT!"}, 
                {label:"Brick Red", color:"0x990000", 
                    descript:"Goes well with warm colors."}, 
                {label:"Navy Blue", color:"0x000066", 
                    descript:"The conservative favorite."}, 
                {label:"Forest Green", color:"0x006600", 
                    descript:"Great outdoorsy look."}, 
                {label:"Grey", color:"0x666666", 
                    descript:"An old reliable."}]

            public function openEvt(event:DropdownEvent):void {
                descriptBox.text="";
            }
            
            public function changeEvt(event:ColorPickerEvent):void {
                descriptBox.text=event.currentTarget.selectedItem.label
                    + ": " + event.currentTarget.selectedItem.descript; 
            }
        ]]>    
    </mx:Script>
    
    <!-- Convert the Array to an ArrayCollection. Do this if 
    you might change the colors in the panel dynamically. -->
    <mx:ArrayCollection id="complexDP" source="{complexDPArray}"/>
    
    <mx:VBox>
        <mx:TextArea id="descriptBox" 
            width="150" height="50"/>
        <mx:ColorPicker id="cp" 
            height="50" width="150"
            dataProvider="{complexDP}" 
            change="changeEvt(event);" 
            open="openEvt(event);" 
            swatchWidth="25" 
            swatchHeight="25"
            textFieldWidth="95" 
            editable="false"/>      
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、selectedItem プロパティには、選択されたアイテムを定義するオブジェクトへの参照が設定されています。selectedItem.label を使用してオブジェクトの label プロパティ（カラー名）にアクセスし、selectedItem.descript を使用してオブジェクトの descript プロパティ（カラーの説明）にアクセスしています。change イベントが発生すると、選択されたアイテムの label プロパティとアイテムの説明で TextArea コントロールが更新されます。open イベントでは、ユーザーが ColorPicker を開いて色見本パネルを表示するたびに、TextArea コントロールの現在のテキストがクリアされます。

この例ではまた、ColorPicker の複数のプロパティとスタイルを使用して、コントロールのビヘイビアと外観を指定しています。editable プロパティは、ユーザーがカラーラベルボックスに値を入力できないようにしています。このため、ユーザーはデータプロバイダからしか色を選択できなくなります。swatchWidth スタイルと swatchHeight スタイルは、色見本パネル内のカラーサンプルのサイズを制御し、textFieldWidth スタイルは、テキストフィールドで最も長いカラー名全体を収められるようにしています。

カスタムフィールド名の使用

color フィールドと label フィールドにカスタム名を使用する場合もあります。例えば、データがカスタムの列名が設定されている外部データソースの場合が挙げられます。次のコードは、前の例を変更して、cName および cVal というカスタムのカラーフィールドとラベルフィールドを使用するようにしています。<mx:dataProvider> タグを使用してデータプロバイダを作成する方法も示しています。

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

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.DropdownEvent;

            public function openEvt(event:DropdownEvent):void {
                descriptBox.text="";
            }
            
            public function changeEvt(event:ColorPickerEvent):void {
                descriptBox.text=event.currentTarget.selectedItem.cName
                    + ": " + event.currentTarget.selectedItem.cDescript; 
            }
        ]]>    
    </mx:Script>
    
    <mx:VBox>
        <mx:TextArea id="descriptBox" 
            width="150" height="50"/>
        <mx:ColorPicker id="cp" 
            height="50" width="150"
            labelField="cName" 
            colorField="cVal" 
            change="changeEvt(event)" 
            open="openEvt(event)" 
            swatchWidth="25"
            swatchHeight="25" 
            textFieldWidth="95" 
            editable="false">
            <mx:dataProvider>
                <mx:ArrayCollection>
                    <mx:source>
                        <mx:Object cName="Yellow" cVal="0xFFFF00" 
                            cDescript="A bright, light color."/> 
                        <mx:Object cName="Hot Pink" cVal="0xFF66CC" 
                            cDescript="It's HOT!"/>
                        <mx:Object cName="Brick Red" cVal="0x990000" 
                            cDescript="Goes well with warm colors."/> 
                        <mx:Object cName="Navy Blue" cVal="0x000066" 
                            cDescript="The conservative favorite."/> 
                        <mx:Object cName="Forest Green" cVal="0x006600" 
                            cDescript="Great outdoorsy look."/> 
                        <mx:Object cName="Grey" cVal="0x666666" 
                            cDescript="An old reliable."/>
                    </mx:source>
                </mx:ArrayCollection>
            </mx:dataProvider>
        </mx:ColorPicker>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーの操作

ColorPicker コントロールは編集できる場合とできない場合があります。編集不可能な ColorPicker コントロールでは、ユーザーは色見本パネルオプションの中から色を選択する必要があります。編集可能な ColorPicker コントロールでは、ユーザーは色見本パネルアイテムを選択するか、色見本パネル上部にあるラベルテキストフィールドに 16 進数のカラー値を直接入力できます。テキストボックスには、数字および範囲が a ～ f や A ～ F の大文字または小文字を入力できます。他の数値以外の文字はすべて無視されます。

マウスの操作

マウスを使用すると、移動してコントロールから選択できます。

• 畳まれた状態のコントロールをクリックすると、色見本パネルを表示または非表示にできます。
• 色見本パネルの見本をクリックすると、色見本を選択してパネルを閉じることができます。
• パネル領域の外をクリックすると、選択せずにパネルを閉じることができます。
• テキストフィールド内をクリックすると、テキスト入力カーソルを移動できます。

キーボードショートカット

ColorPicker が編集可能で、色見本パネルにフォーカスがある場合、範囲が A ～ F と a ～ f の英字キー、数字キー、BackSpace キーおよび Delete キーで、カラーテキストボックスにテキストを入力または削除できます。また、次のキーストロークを使用してドロップダウンリストを制御できます。