详细请看: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)里面默认的一些皮肤,希望对大家有所帮助。