Flex 3 Cookbook

Chapter 9. Skinning and Styling

The robust layout management of the Flex Framework combined with the default Halo Aeon theme provides you with a good-looking application right out of the box. The ease with which you can build an application’s user interface by using containers and controls is matched by the ease with which you can customize the appearance of those components by using skins and styles.

The title of this chapter may be slightly misleading: Styles and skins are not separate concepts in Flex; they actually work in tandem to bring that visual uniqueness to your application. In fact, skins are assigned as style properties and have the ability to use other declared style values to their benefit. The practices of styling and of skinning components are different in their approach, and this chapter addresses how to use them to your advantage.

Styles are property settings, color, sizing, or font instructions, which modify the appearance of components and can be customized programmatically at both compile time and runtime. Style properties are defined in multiple ways: by setting them inline within a component declaration, by using the setStyle to apply a style, or by using Cascading Style Sheets (CSS). You can use CSS to define styles locally in an MXML file or in an external file.

Skins are applied as style properties and are used to modify the visual elements of a component. Those elements can be graphical, such as an image file or a SWF, or programmatic classes utilizing the ...