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