Thursday, April 17, 2008

Dynamically changing the background color in Adobe Flex Builder

Recently I have been messing around a bit with Flex 3.0. In one particular occasion I was wondering what would be the easiest way to let a user change the background of a Flex based website. The project consisted of just a standard color picker component (just to illustrate the point). Basically what you want to do is capture the selected color when a particular event is being fired, and use this information to dynamically change the background color of the Flex application.

So, in your main MXML document you can add a standard ColorPicker component, give it an x, y coordinate to put it someplace near the center, and on the "close" event of this component you would use the setStyle() method of the UIComponent class. The code to do this is listed here below:

<mx:ColorPicker id="color" x="380" y="338" 
close="{this.setStyle('backgroundGradientColors', 
[color.selectedColor,color.selectedColor])}" />

Can it be done more easily? I guess not.

No comments: