Flex 迷你教程 — Flex SDK 4新特性：主题

这次的教程主要针对Flex SDK 4的新特性，一共有12篇。会全部收录在airia.cn出品的《Flash Builder 4 入门教学》中，这本电子教程现正在编辑阶段，里面包含了所有Flash Builder 4新增加内容的介绍，使用教程等，希望在它发布之后大家能够喜欢。现在我将部分的内容提前放出，也算是预告片

简介

学习Flex SDK 4的新特性 — 主题

学习目标

1. 切换Flash Builder 4自带的多款主题。
2. 知道主题的存放位置。
3. 知道主题应用的原理。

准备工作

下载并安装Flash Builder 4

实现步骤

在Flash Builder 4以前，Adobe默认的主题是Halo, 而从Flash Builder 4开始，默认的主题变成了Spark, Spark主题中使用了很多图片作为控件的皮肤，因此Spark只支持部分的色彩样式, 它们是baseColor, color, contentBackgroundColor, focusColor, symbolColor, selectionColor, and rollOverColor,如果同学们想改变一些控件的背景，比如Button的背景样式，我们需要重新定义背景的skin图片才可以做到。当然我们也 可以使用原来的Halo主题。现在我们就来看看如何使用主题。

Flash Builder 4中包含了9款默认主题，其中两款Spark主题，七款Halo主题。这里有必要提一提它们的区别，在Flash Builder 4中，由于出现了新的library://ns.adobe.com/flex/spark (xmlns:s)名称空间,代表新的spark.*包中的控件，所以Flash Builder 4 中同时存在了原来的mx.*以及spark.*中的两组控件。因此在Flash Builder 4中css style也加入了名称空间的支持，比如

@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/halo";
 
s|Button {
color: #FF0000;
}
 
mx|DateChooser {
color: #FF0000;
}

其中S|Button 代表了Spark包中Button的样式，mx|DateChooser则代表mx包中DateChooser的样式。

回到我们的主题选择，首先创建一个名为HelloWorld的Flex项目。接下来

1. 右键点击项目，选择属性

2. 选择Flex主题。

同学们可以看到右边显示了8款主题，其中第九款，也就是Halo.swc是没有显示在这里的，我们需要用导入主题的方式将其加入，我们在这里双击WireFrame主题。

在HelloWorld.mxml中插入下面代码并编译运行 (代码中的布局方式也改变了，详情请查看布局章节)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo" 
	minWidth="1024" minHeight="768" preloader="mx.preloaders.DownloadProgressBar">
	<s:HGroup  gap="50" horizontalCenter="0" top="10"> 
	<s:Panel width="200" height="200" title="Spark Panel" >
	<s:layout>
		<s:HorizontalLayout paddingLeft="10" paddingTop="10" />
	</s:layout>	
		<s:Button label="Spark 按钮" /> 
	</s:Panel> 		
	</s:HGroup>  
</s:Application>

左图是默认的spark样式，右图是切换wireframe样式后运行的结果

注: 如果同学们选择的是Halo系列的主题，那么这里运行后仍然看到的会是Spark主题，这是因为Halo主题只对mx.controls里的控件有效，稍后会为同学们演示。

3. 我们已经知道了如何切换主题，现在来看看主题的存放位置以及主题是如何被应用的

主题的默认存放位置在
Flash Builder 4安装目录/sdks/4.0.0/frameworks/themes/

打开后会看见9个文件夹，分别对应一个主题。我们在HelloWorld项目文件夹中打开配置文件.actionScriptProperties。
下图中红色框部分表示了主题的配置。

我们继续来看看主题包里都用什么，将wireframe.swc改名为wireframe.zip，解压。解压后可见下面这些文件。

很明显default.css是主题的样式设置，我们可以对其修改以改变主题的配置。注意default.css中的名称空间 @namespace “library://ns.adobe.com/flex/spark”; 表示了他对spark系列的控件有效。

好了，以上就是Flash Builder 4中对主题的选择。现在我们来继续扩展一些内容。刚才我提到spark以及wireframe主题只对spark包中的控件有效，也就是对Flex Builder 3中的控件是没有效果的，我们来做个实验。将下面的代码放入HelloWorld.mxml，我在其中加入了mx:Panel以及mx: Button。现在同样选择wireframe主题，运行。我们可以看到下图的效果。

右边的mx Panel以及Button显示了默认的Spark样式，说明了wireframe的设置对其无效。那么是否可以继续使用flex builder 3中的样式呢？当然可以，在themes文件夹中的Halo就代表了Flex 3中的默认样式，我们再次打开样式选择面板，点击“导入样式”，选择Halo文件夹中的halo.swc导入。之后我们在Other 一栏里会看见它，见下图

双击导入，再次运行刚才的代码

同学们可以看到右侧已经显示了我们熟悉的Flex 3中的默认样式，而左侧的Spark控件仍然显示了Spark的默认样式。

本节源码

总结

本节中介绍了Flash Builder 4中主题的使用方法，现在的方式让主题的开发与使用更加的规范化，相信以后会出现越来越多更加实用，漂亮的主题

思考

如何让Spark与mx控件同时应用一款主题?