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

通過《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、CheckBoxSkin.mxml、ColorPickerSkin.mxml、ComboBoxSkin.mxml、DataGridHeaderBackgroundSkin.mxml
DataGridHeaderSeparatorSkin.mxml、DateChooserNextMonthSkin.mxml、DateChooserNextYearSkin.mxml、DateChooserPrevMonthSkin.mxml
DateChooserPrevYearSkin.mxml、DateChooserRollOverIndicatorSkin.mxml、DateChooserSelectionIndicatorSkin.mxml
DateChooserTodayIndicatorSkin.mxml、DefaultButtonSkin.mxml、EditableComboBoxSkin.mxml、LinkButtonSkin.mxml、MenuItemSkin.mxml
MenuSeparatorSkin.mxml、PanelBorderSkin.mxml、PopUpButtonSkin.mxml、ProgressBarSkin.mxml、ProgressBarTrackSkin.mxml
ProgressIndeterminateSkin.as、ProgressMaskSkin.as、RadioButtonSkin.mxml、ScrollBarDownButtonSkin.mxml、ScrollBarThumbSkin.mxml
ScrollBarTrackSkin.mxml、ScrollBarUpButtonSkin.mxml、SliderThumbSkin.mxml、SliderTrackHighlightSkin.mxml、SliderTrackSkin.mxml
SparkSkinForHalo.as、StepperDecrButtonSkin.mxml、StepperIncrButtonSkin.mxml、TabSkin.mxml、TextInputBorderSkin.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: Cla***eference("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)裏面默認的一些皮膚，希望對大家有所幫助。