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>