Color Picker mouseover preview

[kris_s]

I am trying to implement a standard color picker control using custom color
label/value pairs. When I test the application (very basic at this point) For
some, but not all, colors I need to mouseover the color twice in order for the
preview swatch to show that color. This doesn't seem right, but I can't figure
out how to fix it.

Any insight would be appreciated!

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="600" height="400" backgroundGradientAlphas="[0.5, 0.5]"
backgroundGradientColors="[#F8FF45, #F8FF45]">
<mx:Script>
<![CDATA[
[Bindable] public var vinylArray:Array = [
{label:"Clear", color:"0xFFFFFF"},
{label:"White", color:"0xFFFFFF"},
{label:"Pearl Grey", color:"0xDDDDDD"},
{label:"Medium Grey", color:"0xAAAAAA"},
{label:"Traffic Grey", color:"0x777777"},
{label:"Black", color:"0x000000"},
{label:"Saddle Brown", color:"0x996633"},
{label:"Sandstone", color:"0xB7AA9C"},
{label:"Tan", color:"0xA28A56"},
{label:"Beige", color:"0xD5C7B6"},
{label:"Fawn", color:"0xD5D3B6"},
{label:"Primrose Yellow", color:"0xFFDD21"},
{label:"Atomic Red", color:"0xE12126"}];

[Bindable] public var textArray:Array = [
{label:"White", color:"0xFFFFFF"},
{label:"Black", color:"0x000000"},
{label:"Red", color:"0xff0000"}];
]]>
</mx:Script>

<mx:Style>
.myStyle {
previewHeight:25;
previewWidth:100;
swatchWidth:25;
swatchHeight:25;
textFieldWidth:95;
}
</mx:Style>

<mx:ColorPicker x="157.8"
y="48.4"
dataProvider="{vinylArray}"
swatchPanelStyleName="myStyle"
editable="false"/>
<mx:ColorPicker x="157.8"
y="74.4"
dataProvider="{textArray}"
swatchPanelStyleName="myStyle"
editable="false"
/>
<mx:Label x="179.8" y="50.4" text="Vinyl Color"/>
<mx:Label x="179.8" y="76.4" text="Text Color"/>
<mx:Label x="10" y="10" text="Aviation Placard Designer" fontSize="20"
fontWeight="bold" width="320.8"/>
<mx:NumericStepper x="83" y="47"/>
<mx:Label x="16" y="49" text="Width (in.)"/>
<mx:NumericStepper x="83" y="75"/>
<mx:Label x="10" y="77" text="Length (in.)"/>
<mx:Label x="300.8" y="50.4" text="Text"/>
<mx:TextArea x="330.95" y="50.35" height="45.2" width="259"/>
<mx:HRule x="10" y="102.4" width="580" height="2.6"/>
<mx:VRule x="148.4" y="49.65" height="45"/>
<mx:VRule x="290.8" y="50" height="45"/>

</mx:Application>

[Greg Lafrance]

Though I can't imagine why this is necessary, if you use a complex data
provider (not just colors), you need to have an event handler for the
itemRollOver event, and set the selectedColor, as in the attached code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.events.ColorPickerEvent;
[Bindable]
public var vinylArray:Array = [
{label:"Clear", color:"0xFFFFFF"},
{label:"White", color:"0xFFFFFF"},
{label:"Pearl Grey", color:"0xDDDDDD"},
{label:"Medium Grey", color:"0xAAAAAA"},
{label:"Traffic Grey", color:"0x777777"},
{label:"Black", color:"0x000000"},
{label:"Saddle Brown", color:"0x996633"},
{label:"Sandstone", color:"0xB7AA9C"},
{label:"Tan", color:"0xA28A56"},
{label:"Atomic Red", color:"0xE12126"},
{label:"Fawn", color:"0xD5D3B6"},
{label:"Primrose Yellow", color:"0xFFDD21"},
{label:"Beige", color:"0xD5C7B6"}];
public function itemOverHandler(e:ColorPickerEvent):void{
cp.selectedColor = e.color;
}
]]>
</mx:Script>
<mx:Style>
.myStyle {
previewHeight:25;
previewWidth:100;
swatchWidth:25;
swatchHeight:25;
textFieldWidth:95;
}
</mx:Style>
<mx:Label text="Vinyl Color:"/>
<mx:ColorPicker id="cp" dataProvider="{vinylArray}" colorField="color"
swatchPanelStyleName="myStyle" editable="false" selectedColor="0xFFFFFF"
itemRollOver="itemOverHandler(event)"/>
</mx:Application>