Applying themes

Themes allow you to implement a more personalized appearance to your applications. Flash Builder provides several themes from which you can choose. You can import additional themes or create your own themes.

Themes provided by Flash Builder include a set of Spark themes and a set of Halo themes. The default theme for Flex 4 components is Spark. Halo is the default theme for Flex 3.

For more information on theme support in Flex see About themes.

Specifying a theme

Specify themes on a project basis. After specifying a theme for a project, all applications in the project share the same theme.

  1. Open the Select Project Theme dialog from either Design View or Source View of the MXML Editor:

    • (Design View) Select the Appearance Panel. Then select the Current Theme.

    • (Source view) From the Flash Builder menu, select Project > Properties > Flex Theme

  2. Select a theme and then click OK.

Importing themes

You can use Flash Builder to import themes. The files for a theme must be enclosed in a folder. All required files for a Flex theme must be present.

The name of the theme is determined by the name element in the metadata.xml file contained within the theme folder. If the name element is not specified, or if metadata.xml is not present, then the name of the theme folder becomes the name of the theme.

For more information on the required format for Flex themes, see Creating themes.

Flash Builder themes can be in the following formats:

  • Theme ZIP file

    Extract the contents of the ZIP file before importing the theme. The extracted contents should contain all required files.

  • CSS or SWC file for a theme

    The CSS or SWC file must be in a folder containing all required files for a Flex theme. When you import a theme using Flash Builder, you select either the CSS or SWC file for the theme.

  • MXP file

    You can use Adobe Extension Manager CS4 to package files for a Flex themes in an MXP file. The theme can then imported into Flash Builder using the Extension Manager.

    For more information on packaging themes in an MXP file, see Creating an extension file (MXP file) for a Flex theme.

Importing Flex themes using Flash Builder

  1. Open the Select Project Theme dialog from either Design View or Source View of the MXML Editor:

    • (Design View) Select the Appearance Panel. Then select the Current Theme.

    • (Source view) From the Flash Builder menu, select Project > Properties > Flex Theme

  2. Select Import Theme, navigate to the folder containing the theme to import, select the CSS or SWC file, and click OK.

Importing Flex themes packaged in an MXP file

  1. If you have not already done so, import Adobe Flash® Builder™ 4 into Adobe Extension Manager CS4:

    From Adobe Extension Manager, select File > Import Product.

  2. Open Adobe Extension Manager and select Flash Builder 4.

  3. Select File > Install Extension, navigate to the MXP file for the theme, and click Open.

    After you accept the license, Adobe Extension Manager installs the theme into Flash Builder. The theme is now available in Flash Builder from the Select Project Theme dialog.

    Note: You can also double-click the MXP file to invoke Adobe Extension Manager, which then automatically installs the theme.

Downloading themes

You can download themes that can then be imported into Flash Builder.

Downloading Flex themes

  1. Open the Select Project Theme dialog from either Design View or Source View of the MXML Editor:

    • (Design View) Select the Appearance Panel. Then select the Current Theme.

    • (Source view) From the Flash Builder menu, select Project > Properties > Flex Theme

  2. Select Find More Themes.

    Flash Builder opens your default web browser to a page containing themes to download. You can also navigate to any other site containing themes for Flex that you can download.

  3. Select a Flex theme to download.

    After you download the theme, you can import the theme, as described in Importing themes.

Creating themes

You can create your own themes and import them into Flash Builder. A Flex theme typically contains the following files:

  • SWC, SWF, CSS, PNG, JPEG, and other files that make up your theme.

    The files that make up the theme can vary, but must include a SWC or CSS file.

  • preview.jpg file

    The preview image file for the theme. If your theme folder does not contain preview.jpg, then Flash Builder uses a default preview image for the theme.

  • metadata.xml file

    Contains information about the theme, including which versions of the SDK the theme is compatible with. If your theme folder does not contain this file, then Flash Builder creates one when importing the theme.

Typically you package a theme in ZIP file, but the ZIP file must be extracted before you can import the theme into Flash Builder. You can also package the theme files in an Adobe Extension Manager file (MXP file), and use Adobe Extension Manager to import the theme into Flash Builder.

For more information, see About themes.

Metadata.xml file

The following table lists the elements that can be included in metadata.xml.

Element Name

Description

Name

The name of the theme that appears in Flash Builder.

When importing a theme using Flash Builder, you can override the name specified in the metadata.xml file.

Category

Author of the theme. The category under which the theme is displayed in Flash Builder.

sdks

Specifies the Flex SDK versions for which the theme is compatible. This is a parent element for minVersionInclusive and maxVersionExclusive.

If the sdks element is absent, then the theme is valid for all SDKs.

minVersionInclusive

Earliest Flex SDK version for which this theme is compatible. If absent, then this theme is compatible with all earlier versions of the Flex SDK.

maxVersionExclusive

Latest SDK version for which this theme is compatible. If absent, then this theme is compatible with all later versions of the Flex SDK.

mainFile

Top-level file for implementing the theme. This file can reference other files in the theme. For example, a CSS file could reference a SWC or SWF file.

The -theme compiler argument references the specified file.

The following example shows a typical metadata.xml file for a theme created by Company ABC.

<theme> 
    <name>WindowsLookAlike</name> 
    <category>ABC</category> 
        <sdks> 
            <minVersionInclusive>2.0.1</minVersionInclusive> 
            <maxVersionExclusive>4.0.0</maxVersionExclusive> 
        </sdks> 
    <mainFile>WindowsLookAlike.css</mainFile> 
</theme>

According to the metadata.xml file, the theme is compatible with the Flex 2.0.1 SDK. It is also compatible with SDKs up to, but not including, Flex 4.0.0. When this theme is selected, WindowsLookAlike.css is the file that will be added to the -themes compiler argument.

Creating an extension file (MXP file) for a Flex theme

You can use Adobe Extension Manager CS4 to create an extension file (MXP file) for a Flex theme. The MXP file can be imported into Flash Builder using Adobe Extension Manager CS4.

Place all your theme files in a staging folder, and then create an extension installation file (MXI file), which is used by Extension Manager to create the MXP file. For information on the format of an MXI file, refer to the Extension File Format document.

When creating the MXI file, you specify destination paths for each of the theme’s files. The destination paths are in this format:

$flexbuilder/<Theme Name>
  • $flexbuilder is defined in the Flash Builder configuration file, XManConfig.xml. Extension Manager expands $flexbuilder according to this definition. XManConfig.xml is at the following location on your file system:

    /<Install Dir>/Flash Builder 4/configuration/XManConfig.xml
  • <Theme Name> is the name of the folder that will contain the Flex theme.

Creating an MXP Extension file for a Flex theme

  1. Place all the files for the theme, including the MXI file, in a staging folder.

  2. From the Extension Manager, select File > Package Extension.

  3. Navigate to the extension installation file and select it.

  4. Navigate to a location for the package file, and name it using the extension .mxp.

    You can then test the extension file by installing it using the Extension Manager.

Adding additional themes

You can specify more than one theme file to be applied to an application. If there are no overlapping styles, both themes are applied completely. There are other considerations when adding additional themes, such as the ordering of the theme files.

To add additional themes, use the command line compiler, mxmlc with the theme compiler option to specify the path to the theme files.

Using themes provides details on specifying compiler arguments and the ordering of theme files.