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
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.
You can apply skins in the same ways as you apply styles: using inline skin
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
downSkin and text input components have skin styles such as
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). ...
Get Programming Flex 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.