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 ]