Dynamically load CSS in Actionscript/Flex

Question

Problem Definition: To be able to dynamically load a CSS at runtime to skin a Flex Application.

More Information: I've found that loading and applying a CSS is as simple as using "mx:style source="../assets/default.css"". But what I would like to do is something more like (pseudocode):

If (condition == 1)<br />
  mx:style source="../assets/style1.css"<br />
ElseIf (condition == 2)<br />
  mx:style source="../assets/style2.css"<br />
Else<br />
  mx:style source="../assets/default.css"<br />

I've started to look into the StyleManager class but want to know if there's a simpler implementation.

Requirements: I'd like to have something as simple as dropping a .css file into the /assets folder without requiring CSS->SWF compilation or anything complex like that.

Answer 1

Using the style tag, you're basically just inlining the style sheet. To my knowledge, there's no way to accomplish exactly what you're hoping to do. At the same time, you're probably best off doing this the way it's intended, using CSS to SWF compilation. That really isn't adding much complexity at all; you're just adding a single step in-between dropping your .css into /assets and adding it into your conditional.

See this article for more info: http://onflash.org/ted/2007/01/flex-201-understand-runtime-css.php

Answer 2

It's not recommended, but look at the hack in : http://www.rubenswieringa.com/blog/cssloader