[Flex]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)默认的皮肤,有助于我们理解、学习如何使用SparkSkinSkin等方式制作皮肤。

下图所示了全部的Flex SDK 4(Gumbo)CSS样式:


sdks\4.0.0\frameworks\themes目录下面的内容就是Flash Builder 4 新增的主题(theme)样式所在的位置。
包括:AeonGraphical、HaloHaloClassic、Ice、Institutional、Smoke、SparkWireframe、Wooden等主题。
我们比较常用的是:HaloHaloClassicSpark这三种主题样式。

在\sdks\4.0.0\frameworks\projects如下的三个文件夹:
halohaloclassicsparkskinswireframe这四个文件夹里面的内容是对应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)里面默认的一些皮肤,希望对大家有所帮助。