Share on Google+Share on Google+

Flex ColorPicker Control

Advertisement
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:-

      

Advertisements

Posted on: April 6, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.