Flex4面板製作詳解
在Flex4新增加了一個包：spark.skins，這個包裡面只有一個類：SparkSkin，而我們（非美工的程式設計師）通過這個class來實現任意自定義控制元件的樣式。
通過上述關係可以得出如下的結論：
1、SparkSkin是一個Group型別的容器。（它繼承與Group）
2、是全部Spark類的基礎類，也就說全部的mx.spark的視覺化控制元件的外觀全部都是SparkSkin的子類）
注意Skin，這個類是SparkSkin的父類，同時Skin繼承與Group。
Skin：
是SparkSkin的父類，例如ButtonBarSkin就是Skin的子類，如果想要自定義這部分元件的樣式，則需要使用Skin。
SparkSkin：
是全部Spark類的基礎類，也就說全部的mx.spark的視覺化控制元件的外觀全部都是SparkSkin的子類。
綜上所述，用SparkSkin和Skin都可達到同樣的效果。
在Flex4中，我們只需要將這個button的樣式繼承與SparkSkin或者Skin，然後在其中加入一些想要的內容即可，請看以下程式碼：
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:SolidColor color="#FFFF00“ color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x00FFFF" />
</s:stroke>
</s:Ellipse>
<s:RichText id="labelElement"
fontFamily="Myriad Pro"
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
</s:RichText>
</s:SparkSkin>
我們可以用以下幾個方式將這個樣式應用：
1、
Button{
skinClass: ClassReference("cn.xuedi.SelfButton");
}
2、myButton.setStyle( "skinClass", Class(cn.xuedi.SelfButton));
3、<Button skinClass="cn.xuedi.SelfButton" />
其中skinClass也是Flex4裡面新增加的一個類，其作用就是設定當前這個元件的Skin。
主程式：
<?xml version='1.0' encoding='UTF-8'?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
height="254" width="576"
backgroundColor="#222222" >
<fx:Script>
<![CDATA[
import com.rianote.flex.skin.Button;
]]>
</fx:Script>
<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>
</s:Application>
-----------------------------------------------------------------------------------------
以上程式碼解釋：
1、
<s:SparkSkin
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009">
</s:SparkSkin>
含義：
如果要自定義控制元件樣式，必須要要繼承SparkSkin或者Skin。
2、
<fx:Metadata>[HostComponent("spark.components.Button")]></fx:Metadata>
含義：
我們要修改的是spark.components.Button的外形，Flex4新增了一個matadata tag：HostComponent
同時，Metadata也由原來的mx:變成了現在的fx，因為名稱空間發生了改變。
3、
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
含義：
定義了Button的四種狀態：up、down、over、disabled。這是Flex4新增的一種功能，用State來描述狀態。
在Flex3的情況下，只能描述UI的不同狀態，而在Flex4中，又賦予了State描述控制元件狀態的功能。
4、
<s:Ellipse width="100%" height="100%"></s:Ellipse>
含義：
畫一個圓形（橢圓形）的圖形，而Ellipse也是Flex4新增一個包：spark.primitives裡面的一個類。
spark.primitives裡面定義了一些圖形，例如：Ellipse、Rect、Path、Line等類。同樣根據這些類名就可以得出是做什麼用的。
5、
<s:fill>
<s:SolidColor color="#FFFF00" color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
含義：
設定填充的方式（SolidColor）填充顏色值FFFF00的顏色，color.over是指滑鼠移動上去後的顏色，color.down是滑鼠按下時候的顏色。
引申一下，還有color.up、color.display，通過這些值就可以描述四種狀態時的顏色。
注意：SolidColor外層必須要有<s:fill>否則會出現錯誤。fill是填充的意思。
6、
<s:stroke>
<s:SolidColorStroke color="0x0c0d0d" />
</s:stroke>
含義：
設定邊線的顏色（SolidColorStroke）當然也可以設定諸如：color.up、color.display、color.down、color.over的顏色。
同樣SolidColorStroke必須在stroke內部，而stroke的含義：設定邊框。
7、我們在重新看一下這些程式碼的意義：
<s:Ellipse width="100%" height="100%">
<s:fill>
<s:SolidColor color="FFFF00" color.over="#00FF00" color.down="#FF0000"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#00FFFF" />
</s:stroke>
</s:Ellipse>
含義：
定義一個圓形（因為寬和高相等）然後填充一個0xFFFF00的顏色，並且設定滑鼠移上、按下時的顏色值（color.over="#00FF00" color.down="#FF0000"）
然後在定義一個邊框，設定顏色為0x0c0d0d。
8、
<s:RichText id="labelElement"
fontFamily="Myriad Pro"
fontSize="11"
color="0xBBBBBB"
textAlign="center"
horizontalCenter="0"
verticalCenter="1"
width="100%">
</s:RichText>
含義：
上面的程式碼定義了Button中可以顯示文字的部分。注意，id必須設定為labelElement，否則出錯。其他的樣式可以自行設定了。
主程式：
<s:Button x="54" y="56" skinClass="com.rianote.flex.skin.Button" height="32" width="77" label="Button"/>
我們要注意的地方：skinClass，這也是Flex4新增加的一個類，專門用來設定當前面板的properties，請注意skinClass只適用於Spark包裡面的視覺化控制元件。
以上就是通過繼承SparkSkin、Skin和skinClass的方式很簡單的實現自定義元件的面板。