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.

css_basics.png

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

2008-05-24_0048.png

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

setting_styles_in_as.png

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.

2008-05-24_0058.png

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

constructStyle_final.png

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.)

2008-05-24_0051.png

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.

2008-05-24_0055.png

Here’s what the finished masterpiece looks like (sarcasm intended). Context click to view the source of the MXML and ActionScript class file.

2 Comments

  1. Posted May 27, 2008 at 6:07 am | Permalink

    thanks for the tutorial, usefull stuff :)

  2. Posted June 26, 2008 at 8:52 pm | Permalink

    […] former peeps over at Yahoo just released 10 more components, 3 Flash and 5 Flex components. The also fixed some of the bugs […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*