I wanted to explore some of the cool skinning features in the upcoming release of Flex 4 as well as trying out some of the new effects classes such as FxAnimateColor. In this sample I will show what is involved with skinning the application background.
New components in Flex 4 that are skinable with this new model are designated with the prefix “Fx”, for example FxApplication,FxButton, etc.
These components can have their default skins overriden by implementing your own skin class. Some skins such as FxScrollbar can have all it’s parts skinned and display or just pieces depending on the result you want. The pieces that make up a Skin are called SkinParts.
You can tell the Skin class via Metadata which type component it is used for. By using the HostComponent Metadata tag in your Skin class.
<Skin xmlns="http://ns.adobe.com/mxml/2009">
<Metadata>
[HostComponent("mx.components.FxApplication")]
</Metadata>
.
.
.
</Skin>
Flex 4 component skins contain SkinParts that are defined by the host component. Some of these skin parts need to be implemented by the Skin in order for Component to work properly.
For example the FxApplication skin requires the SkinPart “contentGroup”, this is a required SkinPart for the FxApplication to function properly. If this is not specified any content added to the application will not show up and if you run in debug mode you will get an exception. Some SkinParts are required while others are not.
<Group id="contentGroup" left="0" right="0"
top="0" bottom="0"/>
The example and source below show some samples of different types of backgrounds, standard, gradiented, animated, and ellipse with a radial gradient.
You can also switch the skin at runtime by simply setting the “skin” style.
this.setStyle("skinClass", GradientBackgroundSkin );
Sample (Requires Flash Player 10)
Source Code