Programming Flex 3

Runtime CSS

In Flex 3 you can use runtime CSS. Thus far in the chapter, when we’ve talked about CSS we’ve talked exclusively about CSS that gets compiled into the Flex application. Now we’ll look at how you can load and apply CSS at runtime, effectively restyling an application at runtime.

Because Flex styles often required embedded resources such as skin assets, classes, and fonts, Flex runtime CSS must be precompiled into .swf files. When using Flex 3, you can use the mxmlc compiler to compile a .css file into an .swf that includes all assets embedded by the .css file. To compile the .css file, simply pass the path to the file as the one compiler argument, as in the following example:

mxmlc styles.css

The preceding example will compile styles.css into a file called styles.swf. You can then load styles.swf into your Flex applications at runtime without having to include the .css or any of the embedded assets in the main Flex application. That means you can update the styles for an application without having to recompile and redeploy the application itself. All you have to do is update the styles file. Furthermore, you can have many styles files that the user can choose from at runtime.

To load CSS at runtime, you use the StyleManager.loadStyleDeclarations() method. The loadStyleDeclarations() method requires at least one parameter—the path to the .swf file containing the CSS:

StyleManager.loadStyleDeclarations("styles.swf");

If you’re loading only one stylesheet, as soon as you’ve loaded ...