Flex - Controllo ColorPicker

Il controllo ColorPicker fornisce all'utente un modo per scegliere un colore da un elenco di campioni. La modalità predefinita è mostrare un singolo campione in un pulsante quadrato.

Quando l'utente fa clic sul pulsante del campione, viene visualizzato il pannello dei campioni che mostra l'intero elenco dei campioni.

Dichiarazione di classe

Di seguito è riportata la dichiarazione per mx.controls.ColorPicker classe -

public class ColorPicker 
   extends ComboBase

Proprietà pubbliche

Suor n	Proprietà e descrizione
1	colorField : String Nome del campo negli oggetti di dataProvider Array che specifica i valori esadecimali dei colori visualizzati nel pannello dei campioni.
2	labelField : String Nome del campo negli oggetti dell'array dataProvider che contengono il testo da visualizzare come etichetta nella casella di testo dell'oggetto SwatchPanel.
3	selectedColor : uint Il valore del colore attualmente selezionato nell'oggetto SwatchPanel.
4	selectedIndex : int [override] Indice nel dataProvider dell'elemento selezionato nell'oggetto SwatchPanel.
5	showTextField : Boolean Specifica se mostrare la casella di testo che visualizza l'etichetta del colore o il valore del colore esadecimale.

Proprietà protette

Suor n	Proprietà e descrizione
1	swatchStyleFilters : Object [sola lettura] Set di stili da passare dal ColorPicker al campione di anteprima.

Metodi pubblici

Suor n	Metodo e descrizione
1	ColorPicker() Costruttore.
2	close(trigger:Event = null):void Nasconde l'oggetto SwatchPanel a discesa.
3	open():void Visualizza l'oggetto SwatchPanel a discesa che mostra i colori che gli utenti possono selezionare.

Eventi

Suor n	Descrizione dell'evento
1	change Inviato quando il colore selezionato cambia a seguito dell'interazione dell'utente.
2	close Inviato quando il pannello dei campioni si chiude.
3	enter Inviato se la proprietà modificabile ColorPicker è impostata su true e l'utente preme Invio dopo aver digitato un valore di colore esadecimale.
4	itemRollOut Inviato quando l'utente sposta il mouse fuori da un campione nell'oggetto SwatchPanel.
5	itemRollOver Inviato quando l'utente sposta il mouse su un campione nell'oggetto SwatchPanel.
6	open Inviato quando si apre il pannello dei campioni di colore.

Metodi ereditati

Questa classe eredita i metodi dalle seguenti classi:

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

Esempio di controllo Flex ColorPicker

Seguiamo i seguenti passaggi per verificare l'uso del controllo ColorPicker in un'applicazione Flex creando un'applicazione di prova & minuss;

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione .
2	Modifica HelloWorld.mxml come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.

Di seguito è riportato il contenuto del file mxml modificato 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>

Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]

↰ Previous page