July 16, 2008

Flex CSS Explorer

Posted by Jeremy Mitchell
Skinning and styling a Flex application may be necessary for a number of reasons. The most common reason being the need to satisfy branding requirements. In many instances, styling will be sufficient to establish a unique look and feel for your Flex application, however, we will take a look at both techniques.

Visual components that extend the UIComponent class have skins. These visual components include buttons, layout containers, form controls, navigation elements, etc. Refer to the Flex 3 language reference for additional visual components that subclass the UIComponent class.

A skin represents the visual appearance of a component's state. Many components have only one state while others have many states. Each state has a unique skin. For example, a button component has 8 states (up, over, down, disabled, selected up, selected over, selected down, selected disabled). Each button state has a skin referenced by skin name: upSkin, overSkin, downSkin, disabledSkin, selectedUpSkin, selectedOverSkin, selectedDownSkin, selectedDisabledSkin.

Each component's state has a default skin. The look and feel of your Flex application's default skins is dictated by the application theme. The default theme, Halo, is a combination of skins and style properties. Additional themes included in the Flex 3 SDK include Aeon Graphical, HaloClassic, Ice, Institutional, Smoke and Wooden.

More about included application themes can be found at the Adobe Help Resource Center. To modify the theme color of the default theme (Halo) utilize the themeColor attribute of the Application tag. Valid values include haloOrange, haloBlue, haloSilver, haloGreen as well as valid hexadecimal values (i.e. #FF000). The default theme color is haloBlue.

Custom skins can be applied to components in one of 2 ways:

- graphically
- programatically

Graphical skinning is the most common technique and involves associating an image or SWF with a component's skin. This association can be achieved inline via an MXML attribute or through the use of a style declaration (either embedded in an MXML Script tag or referenced externally in a CSS stylesheet).

Programmatic skinning
requires the use of ActionScript and typically requires a developer to create a new class or extend an existing class. If you are comfortable with ActionScript and writing ActionScript classes, you may find programmatic skinning a better approach. The benefits include increased control over component styles and reduced memory usage.

In addition to skins, components have a wide range of style properties that contribute to their look and feel. Unlike a skin, these style properties are not correlated with a component's state but rather persist across all states of a component. Style properties are defined at the component level in one of 4 ways:

1. Inline MXML
2. Embedded Script tag
3. External CSS Stylesheet
4. SetStyle() method

Flex Builder 3's CSS Explorer provides the tools necessary to skin and style components. With both a Design mode and a Source mode, the CSS Explorer facilitates rapid skinning and styling.

As implied by the name, the CSS Explorer allows a developer to create or modify CSS files. Those familiar with the Flex Style Explorer have experience with CSS editing for Flex using a WYSIWYG editor. The CSS Explorer is very similar with the added benefit of the ability to create or edit component skins.

Creating a CSS stylesheet requires nothing more than selecting a component in CSS Explorer, applying the necessary styles, saving the generated CSS and recompiling your Flex application. The process of applying styles is as follows:

1. Create a CSS file
2. Open the CSS file in Flex Builder 3 (this will launch CSS Explorer)
3. Click on the 'New Style' button
4. Select the component type
5. Modify the component style properties in Design mode (Flex Properties view)
6. View the generated CSS in Source mode
7. Save the CSS file

In addition to styles, Flex developers can apply skins to a component. The process of creating a skin is as follows:

1. Create a CSS file
2. Open the CSS file in Flex Builder 3 (this will launch CSS Explorer)
3. Click on the 'New Style' button
4. Select the component type
5. Press the 'Skin' button in Design mode (Flex Properties view)
6. Enter the type of skin (image or SWF)
7. Choose the location of the image or SWF for each applicable component state
8. Refresh Flex Builder to display the changes to your skin(s)
9. Edit the scale grid to prevent distortion of you skin, if necessary
10. View the generated CSS in Source mode
11. Save the CSS file

Once your skins and / or styles have been defined in your CSS file, simply add a tag similar to the following into your Flex application.

<mx:Script source="styles.css"/>
Now your new look and feel will be applied to your Flex application at compile time.

To dynamically alter your Flex application's look and feel at runtime, review Ted Patrick's entry on runtime CSS.

1 comment:

Anonymous said...

Hey, I've been trying to put a skin on my flex buttons for 6 months. Hours and hours, weeks, months. My boss is at the end of his wits. Yours is THE FIRST clear explanation that worked for me.
Thanks so much.