[Flex]Flex SDK 4(Gumbo)淺析SDK 4默認的Spark樣式與Halo樣式

詳細請看：http://www.k-zone.cn/zblog/post/flash-builder-gumbo-customer-sparkskin-4.html
通過《Flex SDK 4(Gumbo)更方便的自定義樣式、自定義SparkSkin》這三篇文章，我們可以得到一個結論：Spark組件和Halo組件是可以共享、公用一套皮膚的。
本篇文章，讓我們分析一下Flex SDK 4(Gumbo)裏面的默認皮膚式樣（主要是Spark組件和Halo組件）。

通過分析Flex SDK 4(Gumbo)默認的皮膚，有助於我們理解、學習如何使用SparkSkin、Skin等方式製作皮膚。

下圖所示了全部的Flex SDK 4(Gumbo)CSS樣式：


sdks\4.0.0\frameworks\themes目錄下面的內容就是Flash Builder 4 新增的主題（theme）樣式所在的位置。
包括：AeonGraphical、Halo、HaloClassic、Ice、Institutional、Smoke、Spark、Wireframe、Wooden等主題。
我們比較常用的是：Halo、HaloClassic、Spark這三種主題樣式。

在\sdks\4.0.0\frameworks\projects如下的三個文件夾：
halo、haloclassic、sparkskins、wireframe這四個文件夾裏面的內容是對應theme文件中四種樣式的源代碼。

在\sdks\4.0.0\frameworks\projects下面有一個叫做sparkskins的文件夾，它裏面的內容做什麼的呢？仔細看一下其中的路徑：

sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark
通過這個路徑（mx\skins）就可以看出這個文件夾中的內容是關於Halo組件的皮膚文件。

sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark包括如下的文件：
AccordionHeaderSkin.mxml、BorderSkin.mxml、ButtonBarFirstButtonSkin.mxml、ButtonBarLastButtonSkin.mxml、ButtonBarMiddleButtonSkin.mxml
.........

我們隨便打開一個，例如ButtonSkin.mxml。
<?xml version="1.0" encoding="utf-8"?>
 <!--
 ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
-->
<!--- The Spark skin class for the Halo Button component. -->
<local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:local="mx.skins.spark.*" minWidth="21" minHeight="19"  alpha.disabled="0.5">
...............................................................................................................................................................

看着是不是很眼熟？“The Spark skin class for the Halo Button component”說明這是Spark Skin應用於Halo組件的皮膚文件。
不過有一個有意思的地方，我在sdks\4.0.0\裏面沒有找到關於這套組件相應的CSS文件，也就是當我們使用Flex SDK 4(Gumbo)裏面的Halo組件時，並沒用使用
sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark裏面的內容作爲默認皮膚。

Flex SDK 4(Gumbo)裏面的Halo組件默認使用了sdks\4.0.0\frameworks\projects\halo\src\mx\skins\halo下面的皮膚，也就是用傳統方式製作的皮膚。

總結一下，比較重要的三套皮膚所在的位置：
Spark組件默認皮膚的位置：
sdks\4.0.0\frameworks\projects\flex4\src\spark\skins\default

Halo組件默認皮膚的位置：
sdks\4.0.0\frameworks\projects\halo\src\mx\skins\halo

Spark skin for Halo皮膚的位置：
sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark

那麼我們如何使用Spark skin for Halo皮膚呢？請看以下代碼：
<fx:Style>
Button {
     skin: ClassReference("mx.skins.spark.ButtonSkin");
}
</fx:Style>
<mx:Button label="我是halo組件" />

其中引入的位置：mx.skins.spark.ButtonSkin，而mx.skins.spark.*包裏面的內容對應了sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark。 

以上就是關於Flex SDK 4(Gumbo)裏面默認的一些皮膚，希望對大家有所幫助。