ColorPicker コントロール -- Flex 2.01

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

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

サブトピック

ColorPicker コントロールについて

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

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

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

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

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

テキストボックスに表示する色用のラベル テキストラベルを指定しない場合、16 進数のカラー値が使用されます。

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

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

ColorPicker コントロールには、次のデフォルトのサイズ設定特性があります。

プロパティ	デフォルト値
デフォルトサイズ	ColorPicker : 22 x 22 ピクセル色見本パネル : ColorPicker コントロールの幅に合わせて設定される
最小サイズ	0 x 0
最大サイズ	未定義

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>

通常、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>

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>

この例では、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>

ユーザーの操作

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

マウスの操作

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

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

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

キー	説明
Ctrl + ↓ (下矢印)	色見本パネルを開き、選択した色見本のフォーカスを配置します。
Ctrl + ↑ (上矢印)	色見本パネルが開いている場合、閉じます。
Home	選択した色を色見本パネルの行の最初の色の位置に移動します。列が 1 つしかない場合は無効です。
End	選択した色を色見本パネルの行の最後の色の位置に移動します。列が 1 つしかない場合は無効です。
PageUp	選択した色を色見本パネルの列の一番上の色の位置に移動します。列が 1 つしかない場合は無効です。
PageDown	選択した色を色見本パネルの列の一番下の色の位置に移動します。列が 1 つしかない場合は無効です。
Esc	ColorPicker の色を変更せずに、色見本パネルを閉じます。このキーはほとんどの Web ブラウザでサポートされていません。
Enter	色見本パネルから現在の色を選択して、色見本パネルを閉じます。色見本をクリックするのと同じ効果です。フォーカスが編集可能な ColorPicker のテキストフィールドにある場合、フィールドテキストに指定された色を選択します。
矢印	色見本パネルが開いている場合、フォーカスを色見本グリッドの上下左右にある次の色に移動します。単一行の色見本パネルでは、上矢印キーと右矢印キーが同等で、下矢印キーと左矢印キーが同等となります。複数行の色見本パネルでは、選択した色が前後の行の先頭または末尾に折り返されます。単一行の色見本パネルでは、行の先頭または末尾を超えてキーを押すと、行が折り返されます。色見本パネルを閉じたもののまだフォーカスがある場合、上矢印キーと下矢印キーが無効になります。左矢印キーと右矢印キーでは、ColorPicker の選択を変更し、パネルが開いている場合と同様に色の間を移動できます。