Flex - Control de selección de color

El control ColorPicker proporciona al usuario una forma de elegir un color de una lista de muestras. El modo predeterminado es mostrar una sola muestra en un botón cuadrado.

Cuando el usuario hace clic en el botón de muestra, aparece el panel de muestra y muestra la lista de muestra completa.

Declaración de clase

A continuación se muestra la declaración de mx.controls.ColorPicker clase -

public class ColorPicker 
   extends ComboBase

Propiedades publicas

No Señor	Descripción de propiedad
1	colorField : String Nombre del campo en los objetos de la matriz dataProvider que especifica los valores hexadecimales de los colores que muestra el panel de muestras.
2	labelField : String Nombre del campo en los objetos de la matriz dataProvider que contienen texto para mostrar como etiqueta en el cuadro de texto del objeto SwatchPanel.
3	selectedColor : uint El valor del color seleccionado actualmente en el objeto SwatchPanel.
4	selectedIndex : int [anular] Índice en el proveedor de datos del elemento seleccionado en el objeto SwatchPanel.
5	showTextField : Boolean Especifica si se muestra el cuadro de texto que muestra la etiqueta de color o el valor de color hexadecimal.

Propiedades protegidas

No Señor	Descripción de propiedad
1	swatchStyleFilters : Object [solo lectura] Conjunto de estilos para pasar del ColorPicker a la muestra de vista previa.

Métodos públicos

No Señor	Método y descripción
1	ColorPicker() Constructor.
2	close(trigger:Event = null):void Oculta el objeto SwatchPanel desplegable.
3	open():void Muestra el objeto SwatchPanel desplegable que muestra los colores que los usuarios pueden seleccionar.

Eventos

No Señor	Descripción del evento
1	change Se envía cuando el color seleccionado cambia como resultado de la interacción del usuario.
2	close Se envía cuando se cierra el panel de muestras.
3	enter Se distribuye si la propiedad editable ColorPicker se establece en true y el usuario presiona Intro después de escribir un valor de color hexadecimal.
4	itemRollOut Se distribuye cuando el usuario saca el mouse de una muestra del objeto SwatchPanel.
5	itemRollOver Se distribuye cuando el usuario pasa el mouse sobre una muestra en el objeto SwatchPanel.
6	open Se envía cuando se abre el panel de muestra de color.

Métodos heredados

Esta clase hereda métodos de las siguientes clases:

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

Ejemplo de control Flex ColorPicker

Sigamos los siguientes pasos para verificar el uso del control ColorPicker en una aplicación Flex creando una aplicación de prueba & minuss;

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint.client como se explica en el capítulo Flex - Crear aplicación .
2	Modifique HelloWorld.mxml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.

A continuación se muestra el contenido del archivo mxml modificado 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 vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo normal como hicimos en el capítulo Flex - Crear aplicación . Si todo está bien con su aplicación, producirá el siguiente resultado: [ Pruébelo en línea ]

↰ Previous page