通过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>