The following example shows you how you can change the ColorPicker control’s background color in Flex 3 by setting the backgroundColor style using CSS and ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Style>
.myColorPicker {
swatchPanelStyleName: myCustomSwatchPanelStyleName;
}
.myCustomSwatchPanelStyleName {
backgroundColor: haloBlue;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
private function backgroundColor_change(evt:ColorPickerEvent):void {
var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
cssObj.setStyle("backgroundColor", evt.color);
colorPicker.open();
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="backgroundColor:">
<mx:ColorPicker change="backgroundColor_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ColorPicker id="colorPicker"
styleName="myColorPicker"
editable="false" />
</mx:Application>
View source is enabled in the following example.
As you can see, the background color uses a gradient from the specified color to a medium gray color (0xC4CCCC). If you want to have a solid colored swatch panel background that doesn’t use a gradient, you can set the highlightColor style to the same value as the backgroundColor style, as shown in the following example (new code in red):
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/27/changing-the-flex-colorpicker-controls-swatch-panel-background-color/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Style>
.myColorPicker {
swatchPanelStyleName: myCustomSwatchPanelStyleName;
}
.myCustomSwatchPanelStyleName {
backgroundColor: haloBlue;
highlightColor: haloBlue;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
private function backgroundColor_change(evt:ColorPickerEvent):void {
var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myCustomSwatchPanelStyleName");
cssObj.setStyle("backgroundColor", evt.color);
cssObj.setStyle("highlightColor", evt.color);
colorPicker.open();
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="backgroundColor:">
<mx:ColorPicker change="backgroundColor_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:ColorPicker id="colorPicker"
styleName="myColorPicker"
editable="false" />
</mx:Application>
View source is enabled in the following example.
{ 3 comments… read them below or add one }
HiPeter
Please i need this example:
contextMenu on the RichTextEditor that adds selected text to the List.
thank you in advance
flexLover
flexLover,
How about this, “Creating a custom context menu on a RichTextEditor control in Flex“?
It adds three custom context menu commands, “Show selection”, “Convert to upper case”, and “Convert to lower case”. Selecting the first command displays whatever text is currently selected in an Alert control. The last two commands convert the currently selected text to upper case or lower case.
Hope that helps,
Peter
I’ve was stuck for some time trying to style the ColorPicker when it’s been created in AS3 (without MXML). I thought I’d record the issue here in case anyone else has encountered it.
I kept trying this:
var colorPicker:ColorPicker = new ColorPicker();
var pickerStyle:CSSStyleDeclaration = new CSSStyleDeclaration(“pickerStyle”);
pickerStyle.setStyle(“backgroundColor”, 0xFF0000);
colorPicker.setStyle(“swatchPanelStyleName”, “pickerStyle”);
- which fails, without providing any error.
The problem is with the last line. Even though “swatchPanelStyleName” suggests a string, you actually have to set the style to the object, not it’s name. So, in the above example:
colorPicker.setStyle(“swatchPanelStyleName”, pickerStyle);
- works fine.