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 >

容器包括的元素有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>

 

【转载】：http://www.iyoya.com/2011/06/04/using-styles-in-flex-2.html