I’ve been slowly learning custom AS3 Flex component development and finally had the desire to add CSS styling into the mix. Here’s a terse, but graphical tutorial on the simplest implementation I could come up with.
Styles cascade just as they do in the browser. There are 3 different ways you can set styles via MXML.

Styles show up in Flex code hinting, but in ActionScript you can’t set the style directly as if it were a property.

Instead you have to use the setStyle( [property name], [property value] ) method.

Add a style metadata tag outside the class definition. This tells the compiler the name and attributes of your particular style and lets it do its magic.

Initialize a CSSStyleDeclaration if one doesn’t exist already and set default values on its properties if they haven’t been set.

Override the styleChanged method and determine if the style has been modified. If so, set a dirty flag and tell the display list to redraw itself. (Note: creating “dirty flags” on a per style basis is pretty unwieldy if you have more than a couple of styles. It’s really a tradeoff between readability, tediousness and rendering performance.)

In the updateDisplayList method check the styles dirty flag and draw / update if needed. Make sure to set the dirty flag back to false after updating.

Here’s what the finished masterpiece looks like (sarcasm intended). Context click to view the source of the MXML and ActionScript class file.
thanks for the tutorial, usefull stuff :)
[…] former peeps over at Yahoo just released 10 more components, 3 Flash and 5 Flex components. The also fixed some of the bugs […]
Hi all,
I facing a problem in applying CSS in the custom component.
1. I am having the css file.
2. Created the component in action script.
3. Now I need to apply the css for the created custom components with the external css file.
How to apply the css to the components.
Please let me know
Thanks and Regards
Balaji
Have you tried to put a breakpoint into styleChanged() method? A very funny thing is in fact that it doesn’t get called in your example. And it didn’t in mine. And that got me a whole day to think… The key thing to solve was setting shapecolorDirty to true (it was false in my case). So styleChanged() does not get called first time you change the style from default to some custom from css? Very strange… Any thoughts?
@Stephen – there’s a typo in one of the screenshots (it should show the classConstructucted variable being static). View the source for the correct code. If you try using that code and throw a debug statement into the constructStyle function you’ll see that your default values are indeed being initialized.
thanks for article ;)
Why would we use updateDisplayList() rather than commitProperties()?
Hello, I do not understand the meaning of the variable “classConstructed” and function “constructStyle” be static. Unless all instances inherit the styles, but in “inherit” you put “no”.
Excuse my English, I’m from Brazil and used the Google translator.
I await a response, it can be in English.
Thank you.
hi Marcelo
Good for your understanding..
will respond after my busy hours
-vijay