Flex: changing Flex component styles in AS3

Question

Hi, in MXML, there is a Button class which you can instantiate like so:

<mx:Button id="something />

but what if you wanted to dynamically build this in AS3 and add it to the Flex app dynamically, without the use of components (just AS3) and then modify Flex's styles, for example, here you access the Button's properties and set them:

var btn:Button = new Button();
btn.height = 50;
btn.width = 75;
btn.x = 100;
btn.y = 40;

but how would you go about changing the Style, for example:

btn.downSkin = "something";
btn.color = "0xfffff";

I'm sort of starting to lean towards making a flex component in MXMLand than just making it visible true/false, but i like the fact that i create an object in AS3 and then destroy it when I don't need it anymore, than create it again once needed.

Answer 1

This page has a solution to the problem:

Setting and getting Style attributes in ActionScript:

// setting a components styleName to reference a CSS class
component.styleName = "highlight";

// set a Button's background color and font size
submitButton.setStyle( "backgroundColor", 0x000000 );
submitButton.setStyle( "fontSize", 14 );

// get a TextArea's font family and color
textArea.getStyle( "fontFamily" );
textArea.getStyle( "color" );

Answer 2

You could use CSS, either inline or as an external CSS file. That way you don't have to set the properties manually every time you create a button.

/* CSS file */
Button {
    borderColor: red;
}

Check out Styling Button control, by Peter deHaan (also read the comments in that post).