Flex ColorPicker Control
If user want to work with colors in your flex application, then user use color picker control. The Color Picker control is a flex control which is provide the functionality of the drop-down type swatch panel that contain a list of colors.
If user want to work with colors in your flex application, then user use color picker control. The Color Picker control is a flex control which is provide the functionality of the drop-down type swatch panel that contain a list of colors.Flex ColorPicker Control:-
If user want to work with colors in your flex application, then user use color picker control. The ColorPicker control is a flex control which is provide the functionality of the drop-down type swatch panel that contain a list of colors. If user want to select color then select color and panel are appear and user select the color for use. In this tutorial we have create a color picker with the help of <mx:ColorPicker>tag and set the data provider with array collection that hold the colors objects in this data provider. And after that we have set the properties for that color picker like height, width, labelField, colorField, swatchPanelStyleName. SwatchPanelStyleName property set the style for swatch panel.
Example:-
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
import mx.events.DropdownEvent;
[Bindable]
public var bcColor:uint;
public function changeEvt(event:ColorPickerEvent):void {
bcColor=event.currentTarget.selectedItem.Val;
}
]]>
</mx:Script>
<mx:Style>
.style {
swatchWidth:10;
swatchHeight:10;
textFieldWidth:25;
}
</mx:Style>
<mx:Panel width="30%" height="30%" backgroundColor="{bcColor}" title="Color Picker Example">
<mx:VBox>
<mx:ColorPicker id="cp"
height="25" width="50"
labelField="Name"
colorField="Val"
change="changeEvt(event)"
swatchPanelStyleName="style"
editable="false">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Object Name="Yellow" Val="0xFFFF00"/>
<mx:Object Name="Pink" Val="0xFF00FF"/>
<mx:Object Name="Red" Val="0xFF0000"/>
<mx:Object Name="Blue" Val="0x0000A0"/>
<mx:Object Name="Grey" Val="0xC0C0C0"/>
<mx:Object Name="Green" Val="0x408080"/>
<mx:Object Name="Orange" Val="0xFF8040"/>
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ColorPicker>
</mx:VBox>
</mx:Panel>
</mx:Application>
In this example you can see the process of set style for the color picker control.
Output:-
