将Flex 3 应用程序移植到Flex 4.5中 第1部分：将Flex 3 Dashboard应用程序导入Flash Builder 4.5

要求：

必要知识

对Flex 3或Flex 4.5 有充分的了解。但是如果读者想将Flex Dashboard应用程序的各方面融入项目中，则需要很好地了解Flex 3，至少要了解Flex 4.5的最新知识。

用户级别

初级

要求的软件产品

Flash Builder 4.5 Premium （下载试用版）

样本文件

Dashboard-flex45-Part1-Start.zip

Dashboard-flex45-Part1-End.zip

本文是系列文章（共4部分）的第1部分，在该部分，用户可以将Flex开发者中心的Flex 3 Dashboard验证应用程序导入Flash Builder 4.5中（Adobe开发Flash平台应用程序的IDE的最新版本），然后将应用程序移植到Flex 4.5中，以便使用Flex 4.5 Spark 架构与组件。

虽然Flex 4.5的一个主要特征是支持在Flex中创建移动应用程序，但是本系列文章没有将Dashboard应用程序转换为移动应用程序。之后的系列文章中将介绍移动Dashboard应用程序的创建。

笔者真的非常喜欢Flex 3Dashboard应用程序。该应用程序很好地展示了Flex的使用，令人心悦诚服，包括显示在用户界面周围拖曳的图表、表单及pod中显示数据。将引人注目的Flex功能融入到用户应用程序中也是一个很好的开始。

Flash Builder 4.5装有Flex 3.x SDK和Flex 4.x SDK。当用户继续在Flash Builder中开发Flex 3应用程序时，使用Flex 4.x具有明显的优点。首先，编译器的编译速度比较快。其次，新的Spark组件架构、蒙皮及状态模型有了很大的改进。当用户考虑使用其他可用的新特征时，Flex 4.x SDK是明智的选择。

本系列文章的第1部分（本文）描述如何将Flex 3 Dashboard导入Flash Builder 4.5中，且尽量做到改动最小。Flex 4.x SDK装有新的编译器，这样，Dashboard的导入就需要执行另外几个步骤。

本系列文章未尝试提高Dashboard应用程序架构的整体质量，旨在提供修改Flex 3中的应用程序实例，进而使用Flex 4.5，同时提供足够的信息，帮助用户将Flex 3应用程序移植到Flex 4.5中。

下列是本系列讨论的Flex4.5和一般Flex 主题：

l Flex 3和Flex 4.5命名空间的差异；

l Flex 4.5 Spark 布局方案的差异；

l Flex 4.5 Spark 蒙皮模型的重要差异；

l 创建、编辑自定义组件皮肤（包括皮肤状态）；

l 将CSS样式加入自定义皮肤中；

l 修改Flex 3应用程序以便使用Flex 4.5容器及控件

如果用户想尝试Dashboard应用程序，请登陆Flex 3 Dashboardpage，点击Experience the Application链接。

介绍

为完成本系列文章，用户需要安装Flash Builder 4.5。用户可购买Flash Builder 4.5，或下载该软件的试用版。

下载Dashboard源文件

下载Dashboard源文件压缩文件：

1. 访问Dashboard source page。

2. 点击该网页左下角的Download Source链接。用户无需下载Flex 3 SDK。

下载Dashboard项目

用户在导入Dashboard项目时，还必须选择项目的Flex SDK版本。本节介绍了两个步骤：

导入压缩文件或项目文件夹

在Flash Builder中，有两种导入Dashboard应用程序项目的方法。在压缩文件内容解压到文件夹后，用户可以导入项目或直接从Dashboard.zip档案文件直接导入（参见图1）。用户可以选择使用其中一种方法。



图1. 从项目档案文件导入

按照下列步骤从压缩文件中导入：

1. 在Flash Builder 4.5中选择File>Import。

2. 选择Flash Builder>导入源的Flash Builder Project，然后点击Next。

3. 在Import Flash Builder Project对话框中，选择File，点击Browse按钮。

4. 定位至包含Dashboard.zip文件的文件夹。

5. 选择该文件，点击Open。

6. 返回Import Flex Project 对话框，点击Finish。

7. 如果用户从压缩项目中导入，可以看到项目升级信息（参见图2），点击OK。



图2. 项目升级警告

选择Flex SDK版本

用户需要选择用于编译项目的FlexSDK版本（参见图3）。用户可以选择装有Flash Builder 4.5的Flex SDK 4.5，或选择新版的FlexSDK（如果存在）。

注：本文中的步骤是采用FlexSDK 4.5及Flex SDK 4.5.1测试的。在使用新版的SDK时，如果Flex SDK 4.5.1及用户使用的SDK之间存在应用程序接口差异，用户按照本系列文章，可能会遇到各种问题。

1. 如果用户安装本教程新版的Flex SDK版本，需要点击ConfigureFlex SDK，将其添加为选项。

2. 如果用户默认的SDK不是Flex4.5，选择Use ASpecific SDK及Flex 4.5 SDK。

3. 由于用户要将Dashboard应用程序移植到Flex4.5中，所以确保Use Flex 3 Compatibility Mode 选项未勾选。

4. 点击OK。



图3. 选择Flex 4.5 SDK

5. 导入过程完成后，在PackageExplorer 视图（参见图4）中扩展Dashboard项目及src文件夹，查看导入的文件夹和文件。



图4. 导入后的项目源文件树

注：用户在将Flex 3Dashboard应用程序导入FlashBuilder之后，可能需要将已导入但尚未更改的项目文件保存到其他位置作为参考。

修改警告及错误

成功导入项目后，用户需要对某些代码做出改动，从而调整Flex 3 SDK和Flex 4.5 SDK之间的差异。

注：本文后来提到的某些错误在前面的错误改正后方可显示，所以用户无法看到。

添加空的libs文件夹

如果用户视图创建项目（选择Project>Build All），则发现的第一个错误就是libs文件夹丢失（参见图5）。



图5. Problems视图中的错误显示libs文件夹丢失

Flash Builder自动创建新项目的libs文件夹，但是对于不包含libs文件夹的导入项目来说，必须手动创建文件夹。

1. 在Package Explorer View视图中右键点击项目顶级文件夹，选择New>Folder。

2. 键入libs作为文件夹名称。

3. 点击Finish。

文件夹仍然是空的（参见图6），但该文件夹必须存在，以消除错误。



图6. Package Explorer视图中的新文件夹

解决新错误和警告

添加libs文件夹后，再次创建项目。这时，文件夹丢失错误消失，但会出现新的错误和警告（参见图7）。下列步骤用于消除新错误。用户在解决所有错误之后，要修改多个警告。



图7. Problems 视图中出现一处新的错误和几处警告

从应用程序容器中去除backgroundSize样式属性

修改错误的步骤如下：

1. 双击错误，打开main.mxml，将鼠标定位在发生错误的行上；

2. 从<mx:Application>标签中去掉backgroundSize样式属性；

3. 重新创建项目。

现在，用户可以发现两处新的错误（参见图8），要在解决警告前修改。



图8. Problems 视图中的两处新错误

解决Istroke和Ifill接口变化

两处新的参数错误是由于Flex3.5 SDK中的API变化（在Flex 3.5 SDK发布之前，Dashboard应用程序最初是使用早期的Flex 3SDK进行创建）而造成。变化涉及到Istroke和Ifill接口。问题在于传递给上述接口中定义的两种方法已发生变化。

修改错误的步骤如下：

1. 双击第一个错误，打开RollOverBoxItemRenderer.as，将光标定位在产生错误的行上：

stroke.apply(g);
由于Istroke接口方法apply()在Flex 3.5之前只使用一个参数，目前采用三个参数，所以会出现第一个错误。

Flex3.4 及更早版本：
apply(g:Graphics):void

Flex 3.5 及Flex 4.5：
apply(graphics:Graphics,targetBounds:Rectangle, targetOrigin:Point):void
2. 使用stroke.apply(g,rc, new Point(rc.left,rc.top))替换stroke.apply(g)；
3. 如果下一行不存在，则将下一行添加到带有其他导入语句的文件顶部：
import flash.geom.Point;
4. 保存修改，重新创建项目。仅有第二个错误存在。
5. 双击Problems视图中的其他错误，打开RollOverWedgeItemRenderer.as，将光标定位在产生错误的行上：
f.begin(g,rc);
由于Istroke接口方法begin()在Flex 3.5之前只使用两个参数，目前采用三个参数，所以会出现该错误。

Flex 3.4及更早版本：

begin(target:Graphics,rc:Rectangle):void
Flex 3.5及Flex 4.5：

begin(target:Graphics,targetBounds:Rectangle, targetOrigin:Point):void

6. 使用f.begin(g,rc,new Point(rc.left,rc.top))替换f.begin(g,rc);一行，解决错误问题。

7. 保存修改，重新创建项目。现在，用户可以发现一处新的错误（参见图9）。



图9. Problems视图中的themeColor错误

消除themeColor样式错误
Spark皮肤中去除了themeColor样式，所以，用户在移植到Spark及Flex 4.5中时，需要去除该样式。

1. 双击错误，打开src/com/esria/samples/dashboard/view/ListContent.mxml，将光标定位在发生错误的行上。

2. 从<mx:List>标签中去除themeColor样式属性；

3. 保存修改，重新创建项目。现在，用户可以发现与项目HTML包装器相关的错误（参见图10）。



图10. Problems视图中的HTML包装器错误

修改HTML包装器错误

下面要修改的错误显示Flash Builder无法创建HTML包装器。由于在Flex 4.5中更新了HTML模板，使用SWFObject，为FlashPlayer监测提供了一种更为可靠的方式，所以错误才会发生。

修改错误的方法很简单，步骤如下：

1. 右键单击错误信息，选择Recreate HTML Templates。

2. 重新创建项目。

3. 验证Problems视图未报告错误。

通过去除Style标签来消除警告

消除大多数警告的步骤如下：

1. 打开主应用程序文件main.mxml。

2. 去掉<mx.Style>标签（第14行附近）：

<mx:Style source="/assets/styles.css"/>
3. 保存变动，重新创建项目。

在本系列文章的后续部分，使用各种自定义皮肤来执行上述标签处理的样式。请勿删除Style.css文件，因为在后面创建自定义皮肤时，要以它作为参照。

消除与顶级应用程序对象获取相关的警告

由于用户在Flex 4.x SDK中参照的顶级应用程序对象和方法与Flex 3 SDK中的不同，所以会出现其他两处警告。与Flex 3不同，用户在Flex 4.5中使用的不是mx.core.Application类（例如，Application.application.MY_TOP_VAR_OR_METHOD），而是使用mx.core.FlexGlobals.class（例如，FlexGlobals.topLevelApplication.MY_TOP_VAR_OR_METHOD）。
消除这两处警告的步骤如下：

1. 双击第一处警告，打开相应的源代码文件，将光标定位在发生警告的代码行。

2. 使用FlexGlobals.topLevelApplication来替换Application.application。

3. 对于第二处警告，重复步骤1和步骤2。

4. 保存修改。

5. 如果用户发现FlexGlobals属性不明的两处新错误，替换其他导入语句附近PodLayoutManager.as顶部的下一行。

6. 使用importmx.core.FlexGlobals来替换import mx.core.Application;语句。

在做出变动并重建之后，用户应该不会发现错误或警告。

注：用户在解决Flash Builder中因导入Flex 3 Dashboard应用程序而产生的所有错误之后，需要将项目文件保存到其他位置，作为参考。

启动Dashboard应用程序

用户在解决所有build错误之后，便可以通过在Flash Builder中选择Run>Run或按键盘上的Ctrl+F11组合键来启动Dashboard应用程序。
注：如果应用程序未启动，则可能需要安装Flash Player 10.2。用户可以在这里下载Flash Player 10.2。如果用户遇到Flash Player 10.2安装问题，被告知存在新版本的Flash Player，请使用此处已有的uninstall_flash_player.exe。



图11. 使用Flex4.5 SDK创建的Dashboard应用程序

总结

本文描述如何将Flex Developer Center Dashboard验证应用程序（用Flex 3 SDK书写）导入

到Flash Builder 4.5中，作为将应用程序移植到Flex 4.5中的第一步。

用户在导入Dashboard项目并解决切换至Flex 4.5 SDK中出现的所有初始错误之后，便可以阅读本系列的第2部分，并将应用程序移植到Flex 4.5中。

如果用户想获得关于Flex 4.5，尤其是与Dashboard应用程序相关的特征，请参见下列资源：

l
Flex4.5帮助——图表入门

l
Flex4.5帮助——数据挖掘

l
Flex4.5帮助——拖放

l
Flex开发者中心——AdobeFlex 4.5 SDK简介

l Week视频培训（免费培训）中的Flex