Themes

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

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.

Creating a Theme

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:

  1. 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>

  2. Navigate to the themes directory, and copy Smoke.css and smoke_bg.jpg.

  3. Paste the copies of the Smoke theme files in the new Flex project.

  4. 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>

  5. 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

  6. 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.

  7. 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.

The Smoke theme

Figure 8-6. The Smoke theme

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset