Flex SDK 4(Gumbo)更方便的自定義樣式、自定義SparkSkin（二）

 
上一篇文章介紹了在Flex SDK 4(Gumbo)如何通過代碼來設定樣式，本篇文章詳細說明一下這些代碼的含義。

由於上一篇文章已經給出代碼，因此在本篇文章中就不再重複了。

自定義Button的mxml的代碼解釋：

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的外形，Flex SDK 4(Gumbo)新增了一個matadata tag：HostComponent
同時，Metadata也由原來的mx:變成了現在的fx，因爲namespace發生了改變。

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。這是Flex SDK 4(Gumbo)新增的一種功能，用State來描述狀態。
在Flex SDK 3的情況下，只能描述UI的不同狀態，而在Flex SDK 4(Gumbo)中，又賦予了State描述控件狀態的功能。

4、
<s:Ellipse width="100%" height="100%">
</s:Ellipse>
含義：
畫一個圓形（橢圓形）的圖形，而Ellipse也是Flex SDK 4(Gumbo)新增一個包：spark.primitives裏面的一個class。
spark.primitives裏面定義了一些圖形，例如：Ellipse、Rect、Path、Line等class。同樣根據這些class name就可以得出是做什麼用的。

5、
<s:fill>
      <s:SolidColor color="0x131313" color.over="#191919" color.down="#ffffff"/>
</s:fill>
含義：
設定填充的方式（SolidColor）填充顏色值0x131313的顏色，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="0x131313" color.over="#191919" color.down="#ffffff"/>
      </s:fill>
      <s:stroke>
            <s:SolidColorStroke color="0x0c0d0d" />
      </s:stroke>
</s:Ellipse>
含義：
定義一個圓形（因爲寬和高相等）然後填充一個0x131313的顏色，並且設定鼠標移上、按下時的顏色值（color.over="#191919" color.down="#ffffff"）
然後在定義一個邊框，設定顏色爲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，這也是Flex SDK 4(Gumbo)新增加的一個class，專門用來設定當前皮膚的properties，請注意skinClass只適用於Spark包裏面的可視化控件。

以上就是這個簡單的自定義Button的代碼詳解了，通過以上的例子，我們在Flex SDK 4(Gumbo)可以通過繼承SparkSkin、Skin和skinClass的方式很簡單的實現自定義組件的皮膚。希望對大家有所幫助：）