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 ...