Adding Styles To Custom Flex Components

Posted by Brooks in AIR, Flex on May 26th, 2008 | 9 comments

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.



9 Responses to “ “Adding Styles To Custom Flex Components”

  1. julien says:
    May 27, 2008 at 6:07 am

    thanks for the tutorial, usefull stuff :)

  2. tom says:
    June 26, 2008 at 8:52 pm

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

  3. Balaji says:
    August 28, 2008 at 1:26 am

    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

  4. Stephen Stulov says:
    October 13, 2008 at 4:40 am

    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?

  5. Brooks says:
    October 14, 2008 at 3:16 pm

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

  6. AÅŸk yakar says:
    October 17, 2008 at 1:58 pm

    thanks for article ;)

  7. Richard C Haven says:
    April 8, 2009 at 12:44 am

    Why would we use updateDisplayList() rather than commitProperties()?

  8. Marcelo L. Filho says:
    April 8, 2009 at 9:40 am

    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.

  9. Vijay says:
    June 11, 2010 at 5:18 am

    hi Marcelo

    Good for your understanding..
    will respond after my busy hours

    -vijay

Leave a Reply