Applying Themes to your Flex Application

Themes for the UI attract the user very much. You will find may of the UI libraries being made skinnable. One such example is the new YUI 2.3.0 where Yahoo have added skinning capability to YUI library. I am going to talk about themes in Flex here. This blog entry is basicaly a reply to one of the comment I reveiced after writing about styles in Flex applications.

Themes in Flex can be in many forms. Flex themes are in three forms: simple CSS file, SWF or SWC file.Lets take each of these one after the other.

CSS file Themes:
This is one of the easy way arround to apply themes. If you have the CSS file you can set the style or skin using the <mx:Style> tag. I have written about the CSS styles and you can have a look here!

SWC file Themes:
Themes also take the form of SWC files. These file contain style sheets and the images as assets. This is the major benifit of SWC files over CSS. In case of CSS files you need to carry the assets seperatly. SWC file make it easier to distribute and is precompiled.

To apply the theme to your Flex application you need to user the theme compiler option. When you compile a application using the mxmlc you can use the theme option to specify the theme that you require to apply on the application. For example

mxmlc -theme C:/flex_sdk/themeTest/sample.swc -file-specs themedFlex.mxml

Another way to provide the theme during compilation is to make use of the <theme> tag in flex-config.xml file.

For more information on this check the online flex reference!

SWF file Themes:
You can use SWF files to hold sikn assets and refer them from the Flex application. A SWF file can hold one of more assets and you can embed the required element using the Embed statement as follows:

<mx:Style>
Button {
upSkin: Embed(source="../assets/SubmitButtonUpSkin.swf");
}
</mx:Style>

To embed a perticular symbol from the SWF file you can use the symbol property to specify the symbol. An example is shown below:

<mx:Style>
Button {
upSkin: Embed(source='../assets/SubmitButtonSkins.swf', symbol='MyUpSkin');
}
</mx:Style>

So regarding themes.. that's all for now.. Ah hold on.. you can download some Flex themes from here. Have a look, They are great!