1 <?xml version="1.0" encoding="utf-8"?>
2  <s:SparkSkin
3 xmlns:s="library://ns.adobe.com/flex/spark"
4 xmlns:fx="http://ns.adobe.com/mxml/2009">
5 <s:states>
6 <s:State name="up"/>
7 <s:State name="over"/>
8 <s:State name="down"/>
9 <s:State name="disabled"/>
10 </s:states>
11 <fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
12 <s:Ellipse width="100%" height="100%">
13 <s:fill>
14 <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
15 </s:fill>
16 <s:stroke>
17 <s:SolidColorStroke color="0x0c0d0d" />
18 </s:stroke>
19 </s:Ellipse>
20 <s:RichText id="labelElement"
21 fontFamily="Myriad Pro"
22 fontSize="11"
23 color="0xBBBBBB"
24 textAlign="center"
25 horizontalCenter="0"
26 verticalCenter="1"
27 width="100%">
28 </s:RichText>
29  </s:SparkSkin>

我们可以用以下几个方式：
(1) Button { 
skinClass: ClassReference("com.rianote.flex.skin.KButton");
}
(2)<Button skinClass="com.rianote.flex.skin.KButton" />
(3)myButton.setStyle( "skinClass", Class( KButton ));

其中skinClass也是Flex SDK 4(Gumbo)里面新增加的一个class，其作用就是设定当前这个组件的Skin。
主程序：

代码

1 <?xml version='1.0' encoding='UTF-8'?>
2  <s:Application xmlns:s="library://ns.adobe.com/flex/spark"
3 xmlns:fx="http://ns.adobe.com/mxml/2009"
4 height="254" width="576">
5 <fx:Script>
6 <!--[CDATA[
7 import com.rianote.flex.skin.Button;
8 ]]-->
9 </fx:Script>
10 <s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32"
11 width="77" label="Button"/>
12  </s:Application>
13  

3.SparkSkin示例解释
自定义Button的mxml的代码解释：
(1)

含义：
如果要自定义控件样式，必须要要继承SparkSkin或者Skin，关于二者的区别我在上一篇文章中已经叙述了。

(2)

含义：
我们要修改的是spark.components.Button的外形，Flex SDK 4(Gumbo)新增了一个matadata tag：HostComponent.同时，Metadata也由原来的mx:变成了现在的fx，因为namespace发生了改变。

(3)

含义：
定义了Button的四种状态：up、down、over、disabled。这是Flex SDK 4(Gumbo)新增的一种功能，用State来描述状态。
在Flex SDK 3的情况下，只能描述UI的不同状态，而在Flex SDK 4(Gumbo)中，又赋予了State描述控件状态的功能。

(4)

含义：
画一个圆形（椭圆形）的图形，而Ellipse也是Flex SDK 4(Gumbo)新增一个包：spark.primitives里面的一个class。
spark.primitives里面定义了一些图形，例如：Ellipse、Rect、Path、Line等class。同样根据这些class name就可以得出是做什么用的。

(5)

含义：
设定填充的方式（SolidColor）填充颜色值0x131313的颜色，color.over是指鼠标移动上去后的颜色，color.down是鼠标按下时候的颜色。
引申一下，还有color.up、color.display，通过这些值就可以描述四种状态时的颜色。
另外，请注意一下，SolidColor外层必须要有<s:fill>否则会出现错误。而fill的含义是：填充。

(6)

含义：
设定边线的颜色（SolidColorStroke）当然也可以设定诸如：color.up、color.display、color.down、color.over的颜色。
同样SolidColorStroke必须在stroke内部，而stroke的含义：设定边框。

(7)我们在重新看一下这些代码的意义：

代码

1 <s:Ellipse width="100%" height="100%">
2 <s:fill>
3 <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
4 </s:fill>
5 <s:stroke>
6 <s:SolidColorStroke color="0x0c0d0d" />
7 </s:stroke>
8  </s:Ellipse>

含义：
定义一个圆形（因为宽和高相等）然后填充一个0x131313的颜色，并且设定鼠标移上、按下时的颜色值（color.over="#191919" color.down="#ffffff"）然后在定义一个边框，设定颜色为0x0c0d0d。

(8)

代码

1 <s:RichText id="labelElement"
2 fontFamily="Myriad Pro"
3 fontSize="11"
4 color="0xBBBBBB"
5 textAlign="center"
6 horizontalCenter="0"
7 verticalCenter="1"
8 width="100%">
9  </s:RichText>

含义：
上面的代码定义了Button中可以显示文字的部分。注意，id必须设定为labelElement，否则出错。其他的样式可以自行设定了。

主程序：

我们要注意的地方：skinClass，这也是Flex SDK 4(Gumbo)新增加的一个class，专门用来设定当前皮肤的properties，请注意skinClass只适用于Spark包里面的可视化控件。
以上就是这个简单的自定义Button的代码详解了，通过以上的例子，我们在Flex SDK 4(Gumbo)可以通过继承SparkSkin、Skin和skinClass的方式很简单的实现自定义组件的皮肤。

4.halo包使用定义的皮肤
看以下的代码

再让我们对比一下spark组件的写法：

参考文献：
1.Flex SDK 4(Gumbo)更方便的自定义样式、自定义SparkSkin .

http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin.html

2.Skinning and Components in Flex 4's Spark Architecture

http://www.artima.com/articles/flex_spark.html