[Flex]Flex SDK 4(Gumbo)浅析SDK 4默认的Spark样式与Halo样式

参考文章：

Kenshin's Flex Blog-[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、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: 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)里面默认的一些皮肤，希望对大家有所帮助。