论坛首页 编程语言技术论坛

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

浏览 4056 次
精华帖 (3) :: 良好帖 (0) :: 新手帖 (7) :: 隐藏帖 (0)
作者 正文
   发表时间:2009-07-19  

详细请看: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)默认的皮肤,有助于我们理解、学习如何使用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。
<?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)里面默认的一些皮肤,希望对大家有所帮助。

论坛首页 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics