Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

ColorPicker : personnaliser les couleurs de la palette

Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 18 février 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Le contrôle ColorPicker permet de sélectionner une couleur à partir d'une palette déroulante de couleurs. La vue initiale correspond à un carré affichant la couleur sélectionnée.

Quand un utilisateur clique sur le ColorPicker, une palette de couleurs apparaît. Cette palette contient un exemple de la couleur sélectionnée, un champ de texte et un nuancier de couleurs. Le nuancier affiche par défaut les 216 couleurs web sécurisées.

A propos du contrôle ColorPicker

Quand vous ouvrez le contrôle ColorPicker, le panneau apparaît au premier plan par rapport aux autres contrôles de l'application, et s'ouvre normalement vers le bas. Si la palette touche le bord bas de l'application et qu'elle a la place de s'afficher au dessus du bouton du picker, elle s'ouvre alors vers le haut.

Si vous définissez la propriété showTextField sur true (valeur par défaut), la palette inclut une zone de texte affichant le code hexadécimal de la couleur. Si vous définissez la propriété editable sur true (valeur par défaut), l'utilisateur peut définir une couleur en saisissant son code hexadécimal.

L'image d'exemple suivante affiche deux ColorPicker, l'un ouvert, l'autre fermé. Ils utilisent les valeurs par défaut de la balise mx:ColorPicker :

Flex remplit la palette et la zone de texte à partir d'un fournisseur de données (dataprovider). Par défaut, le contrôle utilise un fournisseur de données contenant les couleurs web sécurisées. Si vous utilisez votre propre fournisseur de données, vous pouvez spécifier les informations suivantes :

  • Les couleurs à afficher Vous pouvez spécifier les couleurs si vous utilisez votre propre fournisseur de données
  • Les légendes des couleurs à afficher dans la zone de texte Si vous ne spécifiez pas de légendes, Flex utilise les valeurs héxadécimales
  • Des informations additionnelles pour chaque couleur Ces informations peuvent inclure n'importe quelles informations qui sont utilisées dans l'application, tel que des Ids ou des descriptions.

L'image suivante affiche un ColorPicker ouvert, utilisant un fournisseur de données personnalisé incluant des légendes de couleurs. Il utilise aussi des styles définissant la taille des couleurs de la palette.

Créer un contrôle ColorPicker

Vous utilisez la balise <mx:ColorPicker> pour définir un contrôle ColorPicker en MXML. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript. Par exemple, le contrôle ColorPicker de la première image a été créé avec le code minimal suivant :

<mx:ColorPicker id="cp"/>

Le contrôle ColorPicker utilise un fournisseur de données sous forme de liste pour les couleurs. Si vous ne spécifiez pas de fournisseur de données, le contrôle utilise un fournisseur de données contenant les 216 couleurs web sécurisées.

Le fournisseur de données peut-être un tableau de couleurs ou un tableau d'objets. L'exemple suivant remplit un ColorPicker avec un simple tableau de couleurs.

<?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>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Note : Vous pouvez aussi spécifier les données du ColorPicker en utilisant la balise enfant <mx:dataProvider>.

Vous utilisez généralement les événements pour gérer l'interaction utilisateur avec le contrôle ColorPicker. L'exemple suivant ajoute un écouteur d'événements pour l'événement change et pour l'événement open à l'exemple précédent du contrôle 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>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

exemple SWF

Le contrôle ColorPicker diffuse un événement open quand la palette s'ouvre et diffuse un événement change quand la valeur du contrôle change du fait d'une interaction utilisateur. La propriété currentTarget de l'objet passé à l'écouteur d'événement contient une référence au contrôle ColorPicker. Dans l'exemple ci-dessus, l'écouteur d'événement utilise deux propriétés du contrôle ColorPicker, selectedItem and selectedIndex. L'événement change met à jour le contrôle TextArea avec la couleur sélectionnée et l'index de la couleur dans le contrôle, et l'événement open affiche le mot Opened.

Si vous remplissez le contrôle ColorPicker avec un tableau de valeurs de couleurs, la propriété target.selectedItem contient la valeur héxadécimale de la couleur. Si vous le remplissez avec un tableau d'objets, la propriété target.selectedItem contient une référence à l'objet correspondant à l'élément sélectionné.

Les index des éléments du contrôle ColorPicker sont sur une base zéro, ce qui signifie que les valeurs vont de 0, 1, 2, …, n-1 où n est le nombre total d'éléments; par conséquent, la valeur target.selectedIndex est sur une base zéro, et une valeur de 2 dans l'exemple précédent renvoie à l'entrée du fournisseur de données correspondant à la couleur 0xFF8800.

Utiliser des objets pour remplir un contrôle ColorPicker

Vous pouvez remplir un contrôle ColorPicker avec un tableau d'objets. Par défaut, le ColorPicker utilise 2 propriétés des objets: une nommée color, et une autre nommée label. La valeur du champ label détermine le texte de la zone de texte de la palette. Si les objets n'ont pas de propriété label, le contrôle utilise la valeur de la propriété color. Vous pouvez utiliser les propriétés colorField et labelField du contrôle ColorPicker pour spécifier différents noms pour les champs color et label. Les objets peuvent avoir des propriétés tels qu'une description de la couleur ou un ID interne de la couleur, que vous pouvez utiliser en ActionScript.

Exemple : ColorPicker utilisant des objets

L'exemple suivant affiche un ColorPicker qui utilise un tableau d'objets contenant trois champs : color, label et descript :

<?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>
 
    <mx:Style>
        .myStyle {
            swatchWidth:25;
            swatchHeight:25;
            textFieldWidth:95;
        }    
    </mx:Style>
 
    <!-- 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);" 
            editable="false"/>      
    </mx:VBox>
 
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans cet exemple, la propriété selectedItem contient une référence à l'objet définissant l'élément sélectionné. L'exemple utilise selectedItem.label pour accèder à la propriété label de l'objet (le nom de la couleur), et selectedItem.descript pour accèder à la propriété descript de l'objet (la description de la couleur). Chaque événement change met à jour le control TextArea avec la propriété label de l'élément sélectionné et la description de la couleur.

L'événement open efface le texte à chaque fois qu'il est diffusé.

Cet exemple utilise aussi certaines propriétés et styles du contrôle ColorPicker pour définir l'apparence et le comportement du contrôle. La propriété editable empêche l'utilisateur de saisir une valeur de couleur. Les styles swatchWidth et swatchHeight contrôlent la taille des exemples de couleurs dans la palette, et le style textFieldWidth veille à ce que le champ de texte soit assez long pour accueillir le nom de couleur le plus long.

Utilisation de noms de champs personnalisés

Dans certains cas, vous souhaiterez utiliser des noms personnalisés pour les champs color et label; par exemple, si les données proviennent d'une source de données externe avec des noms de colonnes personnalisés. Le code suivant change l'exemple précédant pour utiliser des champs color et label personnalisés nommés cName and cVal. Il montre également comment utiliser une balise <mx:dataProvider> pour peupler le fournisseur de données :

<?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:Style>
        .myStyle {
            swatchWidth:25;
            swatchHeight:25;
            textFieldWidth:95;
        }    
    </mx:Style>
 
    <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)" 
            swatchPanelStyleName="myStyle"
            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>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Interaction utilisateur

Un contrôle ColorPicker peut être éditable ou non. Dans un contrôle non éditable, l'utilisateur ne peut sélectionner une couleur qu'à travers la palette. Dans un contrôle éditable, l'utilisateur peu sélectionner une couleur au travers de la palette ou saisir une valeur héxadécimale dans la zone de texte. L'utilisateur peut saisir des nombres, des lettres en majuscules ou en minuscules; tous autres caractères seront ignorés.

Interaction souris

Vous pouvez utiliser la souris pour naviguer et réaliser une sélection dans le contrôle :

  • Cliquer sur le bouton du picker pour ouvrir ou fermer la palette
  • Cliquer sur n'importe quel exemple de couleur pour la sélectionner et fermer la palette
  • Cliquer en dehors de la palette pour la refermer sans réaliser de sélection
  • Cliquer dans la zone de texte pour déplacer le point d'insertion

Interaction clavier

Si le ColorPicker est éditable, et que la palette possède le focus, les touches alphabétiques de A à F ou de a à f, les touches numériques, la barre d'espace et la touche de suppression sont utilisables. Vous pouvez aussi utiliser les raccourcis claviers suivants :

Touche Description
CTRL + flèche haute Ouvre la palette et donne le focus à la couleur sélectionnée
CTRL + flèche basse Ferme la palette si elle est ouverte
Début Déplace la sélection sur la première couleur d'une ligne de la palette. Cette touche n'a aucun effet s'il y a qu'une seule colonne
Fin Déplace la sélection sur la dernière couleur d'une ligne de la palette. Cette touche n'a aucun effet s'il y a qu'une seule colonne
Page haute Déplace la sélection sur la première couleur d'une colonne de la palette. Cette touche n'a aucun effet s'il y a qu'une seule ligne
Page basse Déplace la sélection sur la dernière couleur d'une colonne de la palette. Cette touche n'a aucun effet s'il y a qu'une seule ligne
Echap Ferme la palette sans sélectionner de couleur. Beaucoup de navigateurs ne supporte pas l'utilisation de cette touche
Entrée Sélectionne la couleur de la palette et referme celle-ci; équivalent au clic de souris sur une couleur. Si le focus est sur la zone de texte de la palette, la touche sélectionne la couleur indiquée dans la zone de texte.
Flèches Quand la palette est ouverte, déplace le focus sur la couleur suivante à gauche ou à droite ou en haut ou en bas. Dans le cas d'une palette à une seule ligne, les flèches haute et droite sont équivalentes; les touches basse et gauche sont équivalentes.Dans une palette contenant plusieurs lignes, la sélection se déplace sur la première couleur de la ligne suivante quand nous sommes à la fin d'une ligne. Quand la palette est fermée mais qu'elle a le focus, les flèches haute et basse n'ont aucun effet. Les flèches gauche et droite changent la couleur sélectionnée en se déplaçant dans les couleurs comme si la palette était ouverte.

Note : Quand la palette est ouverte, vous ne pouvez pas utiliser les touches Tab et Shift + Tab pour déplacer le focus sur un autre objet

En savoir plus