Change or Update Color With Programatic Graphics

[ajwei810192]

Hi, Guys:

I have an application here that I would like to allow users be able to select the color and change the color of the rectangle that was drawn programatically.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
width="800" height="250" initialize="init()"
>
<mx:Script>
<![CDATA[
import mx.core.*;
import flash.display.DisplayObject;
import flash.display.Sprite;
import mx.controls.Label;
import flash.geom.Point;
import flash.events.MouseEvent;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.controls.Alert;
import flash.events.MouseEvent;
import mx.controls.HSlider;
public var myShapes:ShapesFactory;
public var rectangle:UIComponent;
private function init():void{
myShapes= new ShapesFactory();
}
private function drawRectangle():void{

rectangle=myShapes.Rectangle(72,42,138,72,0x00FFFF );
hbo1.addChild(rectangle);
}
private function update_color():void{
var myUint:uint = uint(cp.selectedColor);
if (myUint != 0xFFFFFF) {

rectangle= myShapes.Rectangle(72,42,138,72,myUint)
Alert.show("This is the new Color: " + myUint.toString());

}
else {

rectangle=myShapes.Rectangle(72,42,138,72,0x00FFFF );

}



}
]]>
</mx:Script>

<mx:HBox
id="hbo1"
borderSkin="CustomBorder"
backgroundColor="{cp.selectedColor}"
backgroundAlpha="0.8"
cornerRadius="14"
paddingLeft="20" paddingTop="20"
paddingRight="20" paddingBottom="20"
>
<mx:ColorPicker id="cp" showTextField="true" selectedColor="0xFFFFFF"/>
<mx:Text text="The HBox has a {'\r'}programmatic skin."
creationComplete="update_color();drawRectangle()"
/>
</mx:HBox>
</mx:Application>

Currently, the code has two possible problems that I am trying to solve but am not sure how.

1. How can I change the values from the hex mode to the actionscript mode that I could apply in the update_color() in my code?
2. Since I am trying to update the color, where should I put the change attribute in the code? Or, should I use something else?

I welcome any suggestions, and I mean anything.

[wvxvw]

myUint.toString(16)
And myShapes.Rectangle looks weird... what's that? Meaning that if myShapes is a package, why don't you rename Rectangle class to something that is different from flash.geom.Rectangle or, if myShapes is a class why do you capitalize the first letter of the method making it look like flash.geom.Rectangle... you just create a lot of problems to yourself by doing that...
Besides, don't put underscores in the method names unless they are externally visible event handlers of the properties of your class that are objects capable of dispatching evens. I.e. if you have in your MXML class a <mx:Button id="myButton"/> then it's event handler created in the MXML class that contains it should be: myButton_clickHandler - but that's the only case when you should use underscores. If you don't follow that rule you are risking to have name collision with autogenerated handlers. More yet, compiler isn't that smart when generating those handlers, so you may get your handlers generated wrongfully...

[ajwei810192]

Since the myShapes is so long and that it is working, I didn't bother to post them here. Um, what myShapes.Rectangle means is the Rectangle function in myShapes class.

Yeah, I don't have the geom.Point actually in the function, I think I will take that out.

I am assuming the biggest problem comes from what you quoted here in my code, but I am not sure how to fix it since I am not sure how to convert it back and forth between the two.

So, is what I have in the change attribute accurate at all? I could never get that to work, and I am still wondering if that is the source of my problems.

Thanks for your help.

[wvxvw]

I'd go to the sources of myShapes.Rectangle, whatever it is and make names look normal... Search and rename in files should help... And, you'd think you're not using flash.geom.Point, flash.geom.Rectangle etc... But you don't really know which classes mx.Application imports and uses... right? And it does uses those a lot. So that when you give it another class also called Rectangle or Point that won't make it happy :)

This may answer your second question:

<?xml version="1.0" encoding="utf-8"?>
<!-- ComboBoxExample -->
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ComboBox id="myCombo" labelField="name">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:source>
<mx:Array>
<mx:Object>
<mx:color>0xFFFFFF</mx:color>
<mx:name>White</mx:name>
</mx:Object>
<mx:Object>
<mx:color>0xFF0000</mx:color>
<mx:name>Red</mx:name>
</mx:Object>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
</mx:dataProvider>
</mx:ComboBox>

<mx:TextInput text="{myCombo.selectedItem.color}"/>
<mx:TextInput text="#{myCombo.selectedItem.color.toString(16)}"/>
<mx:HBox width="200" height="50" backgroundColor="{myCombo.selectedItem.color}"/>

</mx:Application>

[ajwei810192]

Hi,

Thanks for the heads up, I found from another of your post how to change the colors. Now I can change colors as users select them! Cool!