Flex - Contrôle ColorPicker

Le contrôle ColorPicker permet à l'utilisateur de choisir une couleur dans une liste d'échantillons. Le mode par défaut est d'afficher une seule nuance dans un bouton carré.

Lorsque l'utilisateur clique sur le bouton Nuancier, le panneau Nuancier apparaît et affiche la liste complète des nuanciers.

Déclaration de classe

Voici la déclaration pour mx.controls.ColorPicker classe -

public class ColorPicker 
   extends ComboBase

Propriétés publiques

Sr.Non	Propriété et description
1	colorField : String Nom du champ dans les objets du tableau dataProvider qui spécifie les valeurs hexadécimales des couleurs affichées dans le panneau Nuancier.
2	labelField : String Nom du champ dans les objets du tableau dataProvider contenant du texte à afficher comme étiquette dans la zone de texte de l'objet SwatchPanel.
3	selectedColor : uint La valeur de la couleur actuellement sélectionnée dans l'objet SwatchPanel.
4	selectedIndex : int [override] Index dans le dataProvider de l'élément sélectionné dans l'objet SwatchPanel.
5	showTextField : Boolean Spécifie s'il faut afficher la zone de texte qui affiche l'étiquette de couleur ou la valeur de couleur hexadécimale.

Propriétés protégées

Sr.Non	Propriété et description
1	swatchStyleFilters : Object [lecture seule] Ensemble de styles à passer du ColorPicker à l'échantillon d'aperçu.

Méthodes publiques

Sr.Non	Méthode et description
1	ColorPicker() Constructeur.
2	close(trigger:Event = null):void Masque l'objet SwatchPanel déroulant.
3	open():void Affiche l'objet SwatchPanel déroulant qui affiche les couleurs que les utilisateurs peuvent sélectionner.

Événements

Sr.Non	Description de l'évenement
1	change Distribué lorsque la couleur sélectionnée change suite à une interaction de l'utilisateur.
2	close Envoyé à la fermeture du panneau Nuancier.
3	enter Distribué si la propriété modifiable ColorPicker est définie sur true et que l'utilisateur appuie sur Entrée après avoir saisi une valeur de couleur hexadécimale.
4	itemRollOut Distribué lorsque l'utilisateur sort la souris d'une nuance dans l'objet SwatchPanel.
5	itemRollOver Distribué lorsque l'utilisateur passe la souris sur un échantillon de l'objet SwatchPanel.
6	open Distribué à l'ouverture du panneau Nuancier de couleurs.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

mx.controls.comboBase
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de contrôle Flex ColorPicker

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle ColorPicker dans une application Flex en créant une application de test & minuss;

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <s:BorderContainer width = "550" height = "400" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "colorPickerPanel"
            backgroundColor = "{colorPicker.selectedColor}"	 
            title = "Using ColorPicker" width = "420" height = "200">
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:Label width = "150" color = "black" 
               text = "Select background color: " fontWeight = "bold" />
            <mx:ColorPicker id = "colorPicker" 
               showTextField = "true" selectedColor = "0xFFFFFF" />
         </s:Panel>	
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ ]

↰ Previous page