Professional Adobe® Flex® 3

Chapter 23. Skinning and Themes

The Flex framework provides for an enormous amount of customization, especially when it comes to the visual displaying of objects. This extreme amount of customization is made possible though skinning capabilities of the Flex component model. This chapter explores various types of skinning techniques and how multiple skins can be applied to your applications as themes.

What Are Skins?

A skin is the visual representation of an object; it controls how the object appears on screen and any visual behavior of that object. In simple objects, such as a Canvas, this controls the background appearance and any border styles. With interactive objects, such a Button or ComboBox, the skin controls how the object appears in its different states; for example, when the mouse is hovering over the object or when the mouse is clicked on that object. All visual components within the Flex framework are designed so that their appearance can be easily changed through modifications to their applied skins.

Visual skins can either be created from embedded images, created from embedded Flash-based content, or programmatically rendered by ActionScript code and the Drawing API. Each method of skinning has its own advantages.

Embedded Assets

Embedded assets can be used as visual skins for your Flex components. This may be achieved through embedding an image file for the skin, embedding a .swf file for the skin, or through linkages to .swc files that contain Flash assets that can be ...