Adding Styles To Custom Flex Components

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.

Review Flex CSS basics.

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.

Creating Custom Styles.

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.