Styling Your Flex Apps At Runtime With CSS

This article is intended to demonstrate a method of styling your flex apps using css. I wanted a way to allow the user some control over how the application appears, specifically font size, but also other individual aspects of the style. Using run-time css is a greaat way to do this. Using the following methods, you can create elaborate .css files to style your flex app, including loading images, etc. There is plenty of other sources out there that explain this in detail. Here I want to focus on exploiting one result of this method. That is, if your style sheet only contains one element, other elements loaded from previous style sheets will not be affected. This is good if you want the user to be able control specific things (like font size) without affecting the overall style (which could be a ‘main” css loaded initially). Here’s how this works:

The basic concept: if .css file one contains a fontFamily style but no font size, the css file two has font size, but no font family, the font family from css file one will be retained after we load css file 2.

Assuming you know how to create a basic app in flex builder 2, I’ll focus on the main points:

The main aspects of loading external css styles are as follows:

---

1)creating a .css fileIt is assumed you know hoe to create a .css file, if not, there are plenty of source out there, you can google it. However, one main point to know is that your flexx app isn’t really loading a .css file. It’s loading an .swf which is compiled from a .css file. Many of the blogs tell you to use the mxmlc compiler command line to do this, but if you’re using flex builder 2 simply right-click on your .css file in the project navigator view, and select compile css to .swfThe Flex project:2) importing the style manager class, and creating a fuction to load the styles: in your main mxml file write the following:<mx:script>
<!–[CDATA[
import mx.styles.StyleManager;
private function loadStyles(styleURL:String):void {
StyleManager.loadStyleDeclarations(styleURL);
}
</mx:script>2. Creating a data provider for the loadStyles parameter (in this case it will be a comboBox):<mx:combobox id=”comboBox”>
prompt=”Background Color”
change=”loadStyles(comboBox.selectedItem.data);”;
<mx:dataprovider>
<mx:array>
<mx:object label=”red” data=”styles/red.swf”>
<mx:object label=”green” data=”styles/green.swf”>
<mx:object label=”blue” data=”styles/blue.swf”>
</mx:object>
</mx:object>
</mx:object></mx:array></mx:dataprovider></mx:combobox>That’s all there is to it really. You can view an example here:
http://www.tetraktysdesign.com/experiments/StyleManagerExample/bin/StyleManagerExample.html(right click on the example to view/download source)Further reading: