Flex4.5中组件样式应用(Spark皮肤)

通过CSS或直接在MXML中设置skinClass属性，可以将Spark皮肤应用到Flex的组件。例如下面的代码：
CSS中设置的方法

s|Button {    skinClass: ClassReference("com.mycompany.skins.MyButtonSkin");}

MXML中设置的方法

<s:Button skinClass="com.mycompany.skins.MyButtonSkin" />

另外在AS中还可以通过setStyle方法来动态设置皮肤，代码如下：

myButton.setStyle("skinClass", Class(MyButtonSkin));

在Flex4.5中自定义Spark皮肤是通过Skin类来实现的，容器为

<s:Skin ></s:Skin>

容器包括的元素有HostComponent（指定的应用组件）、States（皮肤的状态）、Graphic（皮肤中的图形）、Label（文字部分）、Script（皮肤中包含的脚本，可选）。
在定义皮肤中的各个元素时，可以根据各种不同的状态设置不同的属性值。如设置按钮处于按下时的颜色可以通过如下设置：

color.down="0x00ccff"

下面为一个自定义按钮皮肤组件的代码

 

<?xml version="1.0" encoding="utf-8"?>
<!-- SparkSkinning\mySkins\MyAlphaButtonSkin.mxml -->
<s:Skin    xmlns:fx="http://ns.adobe.com/mxml/2009"    
           xmlns:mx="library://ns.adobe.com/flex/mx"    
           xmlns:s="library://ns.adobe.com/flex/spark"    
           minWidth="21" minHeight="21">     

          <fx:Metadata>        
                     [HostComponent("spark.components.Button")]    
         </fx:Metadata>      
         <!-- Specify one state for each SkinState metadata in the host component's class -->    
         <s:states>        
                    <s:State name="up"/>        
                    <s:State name="over"/>
                    <s:State name="down"/>        
                    <s:State name="disabled"/>    
         </s:states>     
         <s:Rect left="0" right="0" top="0" bottom="0" radiusX="2" radiusY="2">        
                 <s:fill>            
                       <s:SolidColor color.up="0xcccccc" color.down="0x222222" color.over="0x666666" alpha.over="0.5"/>
                 </s:fill>        
                 <s:stroke>            
                       <s:SolidColorStroke color.up="0x333333" color.down="0x00ccff" color.over="0x00ccff" weight="1"/>        
                </s:stroke>
         </s:Rect>     
         <s:Label id="labelDisplay"  text.up="UP"    text.down="DOWN"   text.over="OVER" color.up="0xffffff"  color.down="0xffff00" color.over="0x0000ff"
             horizontalCenter="0" verticalCenter="1">    
         </s:Label>
</s:Skin>