将Flex 3应用程序移植到Flex 4.5中 第3部分：Spark组件及皮肤制作简介 (一)

本系列主要讲述将Flex 开发者中心提供的Flex3仪表盘显示应用程序导入Flash Builder4.5，然后再将该应用程序移植到Flex 4.5中以充分利用Flex 4.5Spark结构和组件的优势。本系列分成四部分，本文为其中的第三部分。

虽然Flex 4.5的主要特征之一是支持在Flex创立移动应用程序，但本系列文章内容不涵盖将仪表盘应用程序转换为移动应用程序。关于创立移动仪表盘应用程序的内容将在另一系列的文章中阐述。

本系列第一部分讲述如何将Flex 3仪表盘导入Flash Builder 4.5中，作出相应的改变使之转化并正常运行。第二部分阐述如何通过改变应用程序背景及TabBar控件将仪表盘密码移植到Flex 4.5中，从而使用新的Flex 4.5 Spark组件的功能。第三部分（本文）继续讲述移植的过程及改变程序使得ViewStack容器能正常使用新的Flex 4.5 Spark NavigatorContent容器。

如果您完成第一二部分的步骤有一会儿了，您或许会迫不及待地一览关于仪表盘应用程序介绍、转换以及接下来的步骤的一些要点等相关的文章的开头部分了。

本文的样本文件仪表盘-第三部分-开篇，fxp可供读者作为学习后续步骤的起点。Flex工程文件包括了该系列文章第二部分所有的步骤。

使ViewStack容器使用NavigatorContent

Flex 4.5本身不具备Spark导航容器，所以仍需要使用MX ViewStack。并且不能直接用Spark容器打开ViewStack的视图，而要在使用ViewStack视图之前用Spark NavigatorContent容器或者在MX容器里打包Spark容器。

Flex 3仪表盘应用程序使用的是MX Canvas容器来打开ViewStack视图，需在main mxml下的onResultHttpService()功能菜单下进行初始化，这样就能把NavigatorContent容器代替Canvas容器。

在main mxml文件中修改onResultHttpService()功能

1.        打开main mxml

2.        在onResultHttpService()功能菜单中输入以下命令

var canvas:Canvas = new Canvas();

3.        用以下命令代替上述命令：

var canvas:NavigatorContent = new NavigatorContent();

虽然当前使用的是NavigatorContent容器，但成员名称仍保持canvas不变，以免导致成员名称使用上的细微变化。

4.        在main mxml顶上导入以下命令：

import spark.components.NavigatorContent;

5.        删除以下命令，由于密码不再属于Canvas类

import mx.containers.Canvas;

6. 返回onResultHttpService()，删除以下两行命令。因为如果不刻意添加的话，Flex 4.5 Spark容器是不具备滚动条组件的，所以不需要以下两行：

canvas.horizontalScrollPolicy = "off";

canvas.verticalScrollPolicy = "off";

7.        保存编程数据

修改Pod布局类管理器使用NavigatorContent

因为当前用于视图的是NavigatorContent容器，所以当您创建项目时main mxml会出现报错，这是因为Pod布局管理器仍预期Canvas容器打开。为解决这个问题，我们需要做些修改，将NavigatorContent容器取代Canvas容器。

1.        打开文件src\com.esria.samples.dashboard\managers\PodLayoutManager.as.

2.        输入以下命令：

private var _container:Canvas;

3. 用以下命令代替：

private var _container:NavigatorContent;

4.        在Pod布局管理器顶端导入以下命令：

import spark.components.NavigatorContent;

5. 删除以下命令，由于密码不再属于Canvas类

import mx.containers.Canvas;

6. 修改赋值和取值功能以使用NavigatorContent容器

应做些修改避免运行错误，因为NavigatorContent容器和Canvas容器API(应用程序编程接口)方式和变量上存在着差异（详见表一）。

表一：NavigatorContent容器和Canvas容器应用程序编程接口相关差异

Canvas	NavigatorContent	描述
addChild()	addElement()	在容器中添加项目
setChildIndex()	setElementIndex()	在容器中设置项目索引
numChildren	numElements	容器中项目数量

7.在PodLayoutManager.as中将container.addChild(pod)改为container.addElement(pod)

7.        将container.addChild(dragHighlight)改成container.addElement(dragHighlight)

8.        将container.setChildIndex(pod,container.numChildren - 1)改成container.setElementIndex(pod,container.numElements - 1) .

9.        将container.setChildIndex(dragHighlight,i)改成container.setElementIndex(dragHighlight, i) .

10.    保存修改

将Pod类修改成使用NavigatorContent

应做些适当的修改，因为NavigatorContent和Canvas两类容器在应用程序编程接口上存在着差异。

1.        打开src\com.esria.samples.dashboard\view\Pod.as输入onMouseDown()功能。

2.        将parent.setChildIndex(this,parent.numChildren - 1)改成Group(parent).setElementIndex(this,Group(parent).numElements - 1)

需要提醒的是，应该铸件Group父类而不是NavigatorContent，因为Pod实际父类是NavigatorContentGroup皮肤部分，同属于Group。

3.        在Pod顶端导入以下命令：

 importspark.components.Group;      

4.        保存修改，建立程序

这个时候应该不存在任何错误了，可以安装仪表盘应用程序，不会出现程序编译错误和运行错误。

注意，如果点击Pod中的ComboBox，其可能会打开又迅速关闭，此类问题可以通过使用Flex 4.5 Spark ComboBox控件来解决，其产生的原因是因为MouseDown() 事件处理器中的ChartContent和FormContent组件正在处理mouseDown事件，从而阻止了ComboBox接收该事件。

使用Pod类管理器以延展Spark组件面板

当前使用Spark NavigatorContent 打开的ViewStack页面包含了仪表盘应用程序中真正的pod管理器。本小节介绍如何修改Pod类管理器以延展Spark组件面板，从而取代MX面板容器，使之延伸使用在Flex3仪表盘应用程序中。

1.        打开Pod.as.

2.        导入Spark面板取代MX面板，用Spark组件面板取代mx容器面板

由于MX和Spark面板运行时的差异，以上操作将导致一系列错误（见图一），这些错误将在后续的步骤中得以解决。

图一：使用Pod类管理器以延展Spark组件面板出现的错误

大多数问题的产生是因为Spark面板无法执行titleBar属性，因此需要使用自定义皮肤来运行标题栏区域。Spark面板同时也无法执行titleTextField属性，同样需要自定义皮肤来是实现。

与rawChildren属性相关的错误是由Spark组件架构变化而引起的。MX面板所承接的MX类容器具备rawChildren属性，使其能链接诸如停靠容器等容器浏览器，此功能可通过Pod类管理器使用自定义皮肤来实现。

3. 在Pod构造器功能中删除以下命令，因为如果不刻意添加的话，Flex 4.5Spark容器是不具备滚动条组件的，所以不需要以下命令：

horizontalScrollPolicy = "off";