Skining Flex Components

A  Flex component is made up of visual elements which are set of images, SWF files, or class files that contain drawing API methods.

Skinning: the process of changing the appearance of a component by modifying or replacing its visual elements.

You can define a skins for a component using the following methods:
1. Using the setStyle() method
2. Cascading Style Sheets (CSS).

• External Styles - You can reference a CSS file in any MXML file using  the tag
• Embedded Style - You can define embedded styles in an MXML file. Embedded styles can used only in the file in which it is defined.
• Inline Styles - they are defined in MXML tag and can be used in that tag. 

Application skins can be defined in separate MXML file.

SparkSkin - class is used for skinning an flex application

 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"   
   xmlns:s="library://ns.adobe.com/flex/spark">  

All skins requires a states property with at least one state called normal state.

   <s:states>  
     <s:State name="normal" />  
     <s:State name="disabled" />  
     ....  
   </s:states>  

Metadata block contians the HostComponent directive, declare to which components the skin will be applied.

    <fx:Metadata>   
     [HostComponent("spark.components.Application")]  
   </fx:Metadata>  

Skin also defines the background shape and colors

Skin defines the container display layout and properties for the Application container's content children.