Flex 4 Cookbook

Chapter 6. Skinning and Styles

The previous chapter discussed Flex Framework components that encourage standard and efficient development. However, when using a framework of components you often lose a certain degree of visual customization, and the resulting applications have a “cookie-cutter” appearance. To offset this side effect, the Flex 4 Spark components are equipped with a new and improved skinning architecture.

In Flex 4, a skin is a class, usually defined in MXML, that extends s:Skin and determines the visual appearance of a Spark component. The Spark component that is being skinned, also referred to as the host component, can declare and access parts in the Skin class. This new skinning architecture creates a greater separation between functionality (in the host component) and design (in the skin component). This separation allows skins and Spark components to be easily reused and updated with a minimal amount of code refactoring.

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

For the sake of simplicity, the examples in the following recipes use a basic wire-frame design in ...