上一篇我們将一個應用程式的皮膚風格改造成了spark風格，界面變得非常漂亮。但是如果我們想開發自定義的皮膚風格應該怎麼做呢？這篇文章我們來探讨一下這個問題。
我們先來看看spark是怎樣定義皮膚風格的。打開我們上篇用過的PhotoGallery例程的PhotoGallery.mxml檔案，我們可以看到WindowedApplication的skinClass屬性值為“spark.skins.spark.SparkChromeWindowedApplicationSkin”，那麼這個SparkChromeWindowedApplicationSkin源檔案在哪呢？找到你安裝Flash Builder 4的檔案夾，然後按.\sdks\4.0.0\frameworks\projects\airspark\src\spark\skins\spark路徑就可以找到“SparkChromeWindowedApplicationSkin.mxml”這個源檔案了。（注：我安裝的版本是“Adobe Flash Builder 4 Premium (Build 272416)”，如果版本不同路徑可能會有所變化！）Flex工程是将.\sdks\4.0.0\frameworks\projects\airspark\src\這個路徑預設作為src路徑的，同樣的還有projects下的其他檔案夾路徑。
Flex4的spark skin架構是一套完整的模型，将可視化元件的行為邏輯和外觀完全分開，使開發者可以非常友善地自定義各種元件的皮膚風格和布局。一般情況下，元件的行為邏輯将被定義在ActionScript檔案中，而外觀皮膚将被定義在MXML檔案中，spark皮膚架構将他們結合起來組成一個完整的可視化元件。關于這部分的完整介紹請參考官方文檔：Spark Skinning，關于元件類和外觀類之間的結合規則請搜尋關鍵詞“skinning contract”。另外可以參考這篇中文文章：介紹 Flex 4 beta 中的外觀設計。
我們打開SparkChromeWindowedApplicationSkin.mxml檔案，可以看到SparkChromeWindowedApplicationSkin繼承自SparkSkin類。SparkSkin類繼承自Group，是所有spark外觀的基類，也就是說該類是一個spark外觀元件容器類（非常貼合WindowedApplication的概念）。代碼中值得注意的還有這一段：
“HostComponent”标簽指定了該skin是用于哪個類型的元件的，即指定了宿主的類型；同時通過這個标簽就可以直接通路宿主的style屬性等設定值了。再下面可以看到如下代碼：
“states”标簽定義了這個元件的幾種外觀狀态，通過命名狀态，并指定子元件在各狀态中的外觀形式，可以使元件外觀切換更加友善靈活。關于states的文章很多，在此不多啰嗦，可以參考這篇：Working with States in Flex 4。
在下面的代碼就是對視窗外觀的具體定義了，我們分析一下，如下圖。
通過上面的分析，我們已經了解了SparkChromeWindowedApplicationSkin.mxml檔案的代碼結構，自定義WindowedApplication的皮膚就變得簡單了，步驟如下：
1、将SparkChromeWindowedApplicationSkin.mxml檔案複制到工程src\skins路徑下，并重命名為“MyAppSkin.mxml”；
2、在Flash Builder中打開此檔案，對其中的代碼做如下改變：
我們将标題欄的高度增大到36像素，給視窗邊框添加了圓角，并将邊框顔色改為黑色，寬度改為2個像素；
3、打開PhotoGallery.mxml代碼，将皮膚風格改為“skinClass="skins.MyAppSkin"”；
4、到Flash Builder安裝目錄的相對路徑“\sdks\4.0.0\frameworks\projects\airspark\src\spark\skins\spark\windowChrome”下，将“TitleBarSkin.mxml”檔案複制到工程src\skins路徑；
5、在Flash Builder中打開此檔案，做如下修改：
我們将标題欄的最小高度進行了修改，并改變了背景漸變色；
6、再次打開MyAppSkin.mxml代碼，做如下修改：
我們指定标題欄的皮膚風格為我們修改過的TitileBarSkin類；
7、儲存運作，看看我們的成果吧。
總之，通過元件類和外觀類的分離模型，我們可以重寫外觀，并利用元件的“skinClass”屬性指定自定義的外觀類，來完成任意元件的外觀自定義。當然，我們也可以完全自定義元件邏輯和外觀，那就是元件開發的内容了。這篇就到這，下一篇我們整理一下Flex4中spark架構的相關知識。
PS. 我将本篇執行個體的源碼導出了一個PhotoGallery.fxp檔案，有需要的可以到 我的網絡硬碟空間下載下傳。