Using DropDownColorPicker in Flex 3

At first glance, the DropDownColorPicker looks no different than a standard Flex ColorPicker control. However, it adds a very important bit of functionality. You can completely replace both the drop down and the main button-like viewer with custom controls.

• Adding a Custom Drop Down
• Adding a Custom Viewer

Adding a Custom Drop Down

To add a custom drop down, you need to set the pickerRenderer property of the DropDownColorPicker. Similar to the itemRenderer property of a List, this accepts a ClassFactory object to allow you to set default properties on the renderer. In MXML you can simply pass in the full-qualified classpath for your custom renderer.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml" layout="vertical" horizontalAlign="left"> <yahoo:DropDownColorPicker pickerRenderer="com.yahoo.astra.mx.controls.colorPickerClasses.AdvancedColorPickerDropDown"/> <mx:Label id="status" text="Click the Color Picker to see a custom drop down."/> </mx:Application>

In the example code above, you see that we're passing in an AdvancedColorPickerDropDown for the custom picker renderer. This control automatically works with the DropDownColorPicker because it implements the required IColorPicker interface.

Download the MXML example file.

Adding a Custom Viewer

The DropDownColorPicker's viewer, the button-like object that you click to activate the drop down, can be customized as well. Just like pickerRenderer, the viewerRenderer property accepts a ClassFactory for the custom viewer.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml" layout="vertical" horizontalAlign="left"> <yahoo:DropDownColorPicker styleName="hexViewer" selectedColor="0xff9900" viewerRenderer="com.yahoo.astra.mx.controls.colorPickerClasses.HexColorViewer" viewerStyleName="dropDownColorViewer"/> <mx:Style> .hexViewer { focusRoundedCorners: "tl tr bl br"; cornerRadius: 5; } .dropDownColorViewer { skin: ClassReference("com.yahoo.astra.mx.skins.halo.DropDownViewerSkin"); } </mx:Style> </mx:Application>

In the example above, we pass in a HexColorViewer and give it some custom styles to make it look more like a ComboBox. Just like the drop down requires an interface, a custom viewer must implement IColorViewer or IColorPreviewViewer.

Download the MXML example file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the DropDownColorPicker component. Be sure to look in the com.yahoo.astra.mx.controls.colorPickerClasses.* package for several custom drop downs and other useful classes.