Themes provide a way to compile all .css files, graphical skin asset files, and programmatic skin classes in an .swc file that you can then tell the Flex compiler to use for your Flex application. This has two primary advantages:
It allows you to precompile style and skin assets so that application compilation is faster.
It allows you to more easily distribute and drop in preconfigured styles and skins for Flex applications.
Themes are fantastic when, say, you have a corporate style guide that you need to implement across many applications. Rather than having to distribute all the .css files, graphical elements, and programmatic skin classes, you can distribute just one .swc file.
Setting a theme for a Flex application is very simple. All that is necessary is to add a -theme
compiler option to mxmlc
. If you are compiling from the command line (or using Ant
or another automatic build program), you will want to simply add
-theme
themeFile
.swc
to the compiler options, as in this
example:
mxmlc -theme corporate.swc Main.mxml
If you are using Flex Builder to build your application, you
should open the project properties, select the Flex Compiler option, and
add -theme
themeFile
.swc
to the additional compiler arguments
field.
To use a theme, you clearly must have a theme first. A theme must contain
at least one .css file, and likely
contains additional assets such as image assets and/or a programmatic skin class. A theme file must
be precompiled as an .swc file. You
can compile an .swc file using
compc
, the command-line components compiler. When you compile a
theme file, you should specify -include-file
options for each .css and/or graphical skin asset file you
want to add to the .swc. The
-include-file
option requires two parameters: the name by which you refer to
the file in the .css and the path
to the file. Here’s an example:
compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-file background.jpg ../assets/themes/background.jpg -o corporate.swc
If you want to add programmatic skin classes to the theme .swc file, you can use the -include-classes
option. The -include-classes
option allows you to specify
one or more fully qualified class names in a space-delimited
list:
compc -include-file corporate_styles.css ../assets/themes/corporate.css -include-classes com.company.styles.ButtonSkin com.company.styles.ToolTipSkin
As you can see, even with just two included files or classes, the command-line statement starts to get unwieldy, and adding more files just exacerbates the problem. A more elegant solution is to use the configuration file. The following is a sample configuration file called example_theme.xml:
<?xml version="1.0"?> <flex-config xmlns="http://www.adobe.com/2006/flex-config"> <output>corporate.swc</output> <include-file> <name>corporate.css</name> <path>../assets/themes/corporate.css</path> </include-file> <include-file> <name>background.jpg</name> <path>../assets/themes/background.jpg</path> </include-file> <include-classes> <class>com.company.styles.ButtonSkin</class> <class>com.company.styles.ToolTipSkin</class> </include-classes> </flex-config>
You can then compile using the -load-config
option of compc
as follows:
compc -load-config example_theme.xml
Flex ships with sample themes in an uncompiled format. You can find the theme files in the frameworks/themes directory of the Flex SDK. (If you’re using Flex Builder, the SDK is located in the FlexSDK directory of the Flex Builder installation.) To compile and use a theme, do the following:
Create a new Flex project with the main .mxml file code in Example 8-31.
Example 8-31. Main MXML document
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:ComboBox> <mx:dataProvider> <mx:ArrayCollection> <mx:String>a</mx:String> <mx:String>b</mx:String> <mx:String>c</mx:String> <mx:String>d</mx:String> </mx:ArrayCollection> </mx:dataProvider> </mx:ComboBox> <mx:Button label="Example" /> </mx:Application>
Navigate to the themes directory, and copy Smoke.css and smoke_bg.jpg.
Paste the copies of the Smoke theme files in the new Flex project.
In the new Flex project, create a new file called smoke_config.xml, and add the code in Example 8-32 to the file.
Example 8-32. smoke_config.xml
<?xml version="1.0"?> <flex-config xmlns="http://www.adobe.com/2006/flex-config"> <output>smoke_theme.swc</output> <include-file> <name>Smoke.css</name> <path>Smoke.css</path> </include-file> <include-file> <name>smoke_bg.jpg</name> <path>smoke_bg.jpg</path> </include-file> </flex-config>
From a command prompt, change to the directory with the .xml file, and run the following command which will compile the assets into an .swc file:
compc -load-config smoke_config.xml
You can delete the copies of Smoke.css and smoke_bg.jpg as well as smoke_config.xml just to verify that they are no longer necessary in order to use the theme now that the .swc file has been created.
Compile your Flex application with the -theme
option set to smoke_theme.swc.
When you run the Flex application you’ll see the Smoke theme applied, as shown in Figure 8-6.