How to store Flex 3 ColorPicker Value in a variable and bind the variable to a textInput

Question

Hello Stackoverflowers,

Can anybody help me out? I would like to store a hex colorPicker value in a variable and then cast the value of the var backout to a textInput. The textInput is just to see witch hexcolor i have choosen.

thus meaning seeing 0x000000 in the textInput.

what i've done now is pretty simple i have bound the flex colorPicker directly to my textInput. but i want to store the value from the colorPicker in a var first and than spit it backout to the textInput to see the value that i have picked.

When i pick a color value that begins with the number 0 it drops the 0's at the beginning of the number and only spits out the numbers greater than 0. (000033 becomes 33, FF0000 stays FF0000). I want to catch the whole value or write some kind a function to figure out how many 0's got dropped and concatenate it together with 0x. Store that all into a var and bind it to the flex TextInput. But i don't know how to do that. Does anybody know what i must do?

This is what i've got.

<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" 
           layout="vertical" 
           width="100%" 
           height="100%">


<mx:ColorPicker id="bgColor"/>
<mx:TextInput text="{bgColor.selectedColor.toString(16)}"/>

<mx:Canvas width="100" height="100" backgroundColor="{bgColor.selectedColor}"/>

</mx:Module>

Thank

DJ

Answer 1

The colorchosers selected color is a uint and what you need to do is covert this to hex. I did a quick google for you and found a solution here

Here is my own take on it

<mx:ColorPicker id="bgColor" change="colourChange()"/>
<mx:TextInput id="txtColour" />

<mx:Canvas width="100" height="100" backgroundColor="{bgColor.selectedColor}"/>

<mx:Script>
 <![CDATA[

  private function colourChange():void
  {
           var hexString:* = bgColor.selectedColor.toString(16).toUpperCase();
           var cnt:int = 6 - hexString.length;
           var zeros:String = "";

           for (var i:int = 0; i < cnt; i++) 
           {
             zeros += "0";
           }

           txtColour.text =  "#" + zeros + hexString;
  }

 ]]>
</mx:Script>

Excuse the bad code formatting above!!!