Flash® Builder™ 4 and Flex® 4 Bible

Chapter 15. Skinning Spark Components

IN THIS CHAPTER

• Declaring skins as MXML components

• Using skin states and skin parts

• Binding custom skins to Spark components

• Making copies of existing custom skins

• Customizing component appearance with graphic elements

As I described in Chapter 14, one of the Flex 4 SDK's most important new features is the capability to redefine the appearance of visual controls with programmatic skins.

In past versions of the Flex SDK, you could create your own skin as an ActionScript class. By overriding certain methods that are called at runtime from the Flex framework and using the Flash drawing application programming interface (API) to declare vector graphics, you could define an entire visual presentation without ever using graphical applications like Adobe Photoshop and Illustrator.

This strategy, however, was slow and cumbersome. And, because the graphical applications I've mentioned couldn't interpret the ActionScript code and show you a preview of its results, you had to use your imagination (and a lot of graph paper) to figure out how to code the image you wanted to create.

In Flex 4, skins are now defined as MXML components that are extended from new classes named Skin and SparkSkin. You can bind the skincomponent to an application or custom component at compile time or runtime with its skinClass style. The skin class can be constructed with a combination of vector graphics, bitmap graphics, and Flex components to achieve whatever design ideas your application ...