Programming Flex 3

Skinning Components

Although styles are an excellent way to customize components, they can do only so much. If you want to change the color, font, or spacing settings for components, styles are perfect solutions. However, if you want to completely change the appearance of a component so that it uses a different shape, you’ll need to use skins instead of (or in addition to) styles.

Component skins are graphics or classes that you can specify for states and/or parts of a component that will completely replace the standard appearance of the component. Every component type will have different skins that you can set. For example, buttons have skins such as upSkin, overSkin, and downSkin that determine the appearance of the button in the up, over, and down states. You can use embedded graphics such as .jpg files or .png files, or you can use programmatic skins. We’ll discuss both options in the following sections.

Applying Skins

You can apply skins in the same ways as you apply styles: using inline skin settings, setStyle(), CSS, or StyleManager. Each component type has skin settings that are treated like styles. The skin styles for each component type vary. For example, buttons have skin styles such as upSkin, overSkin, and downSkin and text input components have skin styles such as borderSkin.

The values for skin styles must always reference a class. For graphical skins, the value should be a class created by an embedded image (see Chapter 11 for more information about embedding images). ...