将 Flex 3 的应用程序迁移到 Flex 4 — 第 1 部分：将 Flex 3 Dashboard 应用程序导入 Flash Builder 4

本系列一共4个部分，内容涉及将Flex开发人员中心上可用的Flex 3 Dashboard演示应用程序导入Flash Builder 4（用于Flash平台的Adobe的IDE最新版本），然后将应用程序迁移至Flex 4以充分利用Flex 4 Spark的架构和组件，本文是第1部分。我确实着迷于Flex 3 Dashboard应用程序。它是Flex的一些强效应用的极佳展示，包括显示图表、栅格、表单中的数据，以及可围绕UI拖放的pod中的数据。而且它同时也是将某些迷人的Flex功能集成至你自己的应用程序中的绝佳起点。Flash Builder 4推出时包含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的同时尽量减少变动的方法。Flex4.x SDK推出了新的编译器，因此导入Dashboard需要几个附加步骤。本系列文章并无改进Dashboard应用程序架构总体质量的意图。其目的是提供一个例子，即修改Flex 3中创建的应用程序以使用Flex 4 —并提供足够的信息帮助你将自己的Flex 3应用程序迁移至Flex 4。下面是本系列文章涵盖的一些Flex 4和一般Flex主题：·Flex 3和Flex 4的命名空间的差异·Flex 4 Spark布局方案的显著区别·Flex 4 Spark植皮模型的显著区别·创建和编辑自定义组件的皮肤，包括皮肤状态·将 CSS 样式移入自定义皮肤·改编Flex3应用程序以使用Flex 4的容器和控件如需试用Dashboard应用程序，请访问Flex 3 Dashboard页面并单击体验应用程序(Experience TheApplication)链接。

开始

要完成本系列文章，你需要安装Flash Builder 4或Flash Builder 4.0.1。鉴于你需要Flex 4.1 SDK（如果有，可使用较新版本），使用Flash Builder 4.0.1更好。FlexSDK的4.1版本是必须的，因为它含有所需的重要增强功能，可避免启动Dashboard应用程序时出现运行时错误。

获取Flex4.1 SDK

如果你有Flash Builder 4但还没有Flex 4.1 SDK，则需要进行下载（如果有，亦可下载最新版本）并将其加入你的Flash Builder 4安装。如果你已经有Flash Builder 4.0.1，则不需要更新SDK。请按照以下步骤安装Flex 4.1 SDK：1.访问Flex 4 Downloads页面。2.在Latest MilestoneRelease Builds部分中下载最新的Adobe Flex SDK和Adobe Add-ons文件，请勿下载Open Source Flex SDK文件。3.ZIP文件下载完成后，在你的Flash Builder 4 sdks文件夹中创建一个新文件夹，命名为4.1。在Windows中，该文件夹的路径通常为C:/Program Files/Adobe/Adobe FlashBuilder 4/sdks。4.将这两个ZIP文件的内容提取至4.1文件夹。

下载Dashboard源文件

要获取Dashboard源文件，请直接下载本文的样本文件Dashboard-Part1-Start.zip。你也可以在Flex 3 Dashboard主页面上下载Dashboard源文件ZIP存档。1.访问Dashboard源页面。2.单击页面左下角的Download Source链接。你不需要下载Flex 3 SDK。本文的另一个样本文件Dashboard-Part1-End.zip含有一个第1部分所有步骤已完成的项目。如果需要，你可以使用此项目作为参考。

导入Dashboard项目

当你导入Dashboard项目时，你还必须选择该项目的Flex SDK版本。本节对这两个步骤进行描述。

从ZIP文件或项目文件夹中导入

有两个方法可以将Dashboard应用程序项目导入Flash Builder。你可以直接从Dashboard.zip存档文件中导入，或者在提取ZIP文件内容后将项目导入一个目录中（参见图1）。你可以使用其中一种方法。图1.从项目文件夹中导入。请按照以下步骤从ZIP文件中导入：1.选择File > ImportFlex Project in Flash Builder 4。2.在Import FlexProject对话框中，选择File并单击右边的Browse按钮。3.导航至含有Dashboard.zip文件的文件夹。4.选择该文件并单击Open。5.返回ImportFlex Project对话框，单击Finish。

选择Flex SDK版本

单击Finish之后将弹出一个提示，让你选择用哪一个Flex SDK编译该项目（参见图2）。Dashboard项目至少需要Flex SDK 4.1，或者你可以选择较新的Flex 4 SDK版本（如果有）。1.如果你只安装此教程使用的Flex 4.1 SDK教程，需要单击Configure FlexSDKs链接以将其添加为一个选项。2.如果你的默认SDK不是Flex 4.1，请选择Use A SpecificSDK并选择Flex 4.1 SDK。3.确保Use Flex 3Compatibility Mode选项未选中，因为你要将Dashboard应用程序迁移至Flex 4。4.单击OK。图2.选中Flex 4.1 SDK。5.如果你从ZIP项目存档文件中导入，并且看到信息说该项目将进行升级（参见图3），直接单击OK即可。图3.项目升级提示。6.导入过程完成后，展开Dashboard项目和其在Package Explorer视图（参见图4）中的src文件夹以查看导入的文件夹和文件。图4.导入之后的项目源文件树。注：将Flex 3 Dashboard应用程序导入Flash Builder之后，你可能希望将此已导入但未更改的项目文件保存至另一个位置作为参考。

修复警告和错误

项目成功导入之后，你将需要进行几处代码更改，以对Flex 3 SDK和Flex 4.x SDK的不同点进行修正。注：本文随后将提到的一些错误只有在前几个错误被修复之后才会显示，因此你可能还看不见它们。

添加一个空libs文件夹

如果你尝试建立项目（通过选择Project > Build All），你将看到的第一个错误是缺失

libs

文件夹

（

参见图

 5

）

。图5. Problems视图中的错误提示缺失libs文件夹。对于新项目，ibs文件夹会通过Flash Builder自动创建，但对于不含libs文件夹的导入项目，必须手动创建libs文件夹：1.在Package Explorer视图中，右键单击该项目的顶层文件夹Dashboard，然后选择New > Folder。2.输入libs作为文件夹名称。3.单击Finish。该文件夹可为空文件夹（参见图6），但其必须存在才能消除错误。图6. Package Explorer视图中的新文件夹。

解决顶层Flex全局警告

添加libs文件夹之后，再次建立该项目。缺失文件夹错误将不再显示，但你将收到两个错误和两个警告（参见图7）。图7. Problems视图中显示的两个新错误和两个警告。出现这两个警告是因为在Flex 4.x SDK中你引用了不同于Flex 3 SDK的顶层应用程序的对象和方法。不使用在Flex 3中使用的mx.core.Application类（例如，Application.application.MY_TOP_VAR_OR_METHOD），在Flex 4中你使用mx.core.FlexGlobals类（例如，FlexGlobals.topLevelApplication.MY_TOP_VAR_OR_METHOD）。

要消除这两个警告，请按照以下步骤：

1.双击第一个警告，打开相关的源代码文件，然后将光标定位在导致警告的代码行。2.将

Application.application

替换为

FlexGlobals.topLevelApplication

。3.对第二个警告重复步骤1和步骤2。4.保存你的更改。5.如果你看见两个访问未定义属性

FlexGlobals

的错误，请将下面一行内容添加至位于另一个导入语句旁边的PodLayoutManager.as的顶端：

importmx.core.FlexGlobals;

进行这两处更改之后再重新建立时，将不再显示这两个警告。

解决IStroke和IFill接口更改问题

这两个不正确参数编号的错误是由Flex 3.5 SDK中的API更改造成（在Flex 3.5 SDK发布之前，Dashboard应用程序最初使用较早的Flex 3 SDK版本而创建）。这些更改涉及到了IStroke和IFill接口。出现的问题是，传送至在接口中定义的两个方法的参数编号已经更改。要修复以上错误，请按照以下步骤：1.双击第一个错误打开RollOverBoxItemRenderer.as，然后将光标定位在导致该错误的行：

stroke.apply(g);

出现第一个错误是因为IStroke接口法

apply()

在Flex 3.5之前是一个参数，而现在有三个参数。Flex3.4和较早版本：

apply(g:Graphics):void

Flex 3.5和Flex 4：

apply(graphics:Graphics,targetBounds:Rectangle, targetOrigin:Point):void

2.将

stroke.apply(g);

替换为

stroke.apply(g,rc, new Point(rc.left,rc.top));

。3.将下面的行（如果预先不存在）添加至不含另一个

import

语句的文件顶端：

import flash.geom.Point;

4.保存你的更改并重新建立项目。将只显示第二个错误。5.双击Problems视图中的第二个错误，打开RollOverWedgeItemRenderer.as，然后将光标定位在导致该错误的行：

f.begin(g,rc);

出现该错误是因为IFill接口法

begin

()

在Flex 3.5之前是两个参数，而现在有三个参数。Flex3.4和较早版本：

begin(target:Graphics,rc:Rectangle):void

Flex3.5和Flex 4：

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

6.将

f.begin(g,rc);

行替换为

f.begin(g,rc, new Point(rc.left,rc.top));

即可解决该错误。7.保存你的更改并重新建立项目。现在你应该看见两个新的错误和多个警告（参见图8）。接下来将修复这些问题。图8. Problems视图中新出现的错误。

移除Style标签

要消除以上警告，请按照以下步骤：1.打开主应用程序文件main.mxml。2.移除

<mx:Style>

标签（在第15行旁边）：

<mx:Stylesource="/assets/styles.css" />

3.保存你的更改并重新建立项目。此标签控制的样式将在本系列文章后续部分的各种自定义皮肤中实施。请勿删除styles.css文件，因为你在创建自定义皮肤时需要引用它。

移除Application容器中和别处的样式属性设置

要修复剩下的两个错误，请按照以下步骤：1.双击第一个错误，然后在main.mxml中，移除

<mx:Application>

标签的

backgroundSize

样式属性。2.双击第二个错误，然后在src/com/esria/samples/dashboard/view/ListContent.mxml中，移除

<mx:List>

标签中的

themeColor

样式属性。3.保存你的更改并重新建立项目。至此，最新的警告和错误都得到解决，但你还将看见一个HTML包相关的新错误。接下来你将修复此错误。

修复HTML包错误

你需要修复的最后一个错误是，Flash Builder无法创建HTML包（参见图9）。出现该错误是因为HTML模板在Flex 4中已经更新以充分利用SWFObject，这可以提供Flash Player检测的更可靠的方式。图9. Problems视图中出现的HTML包错误。该错误的修复很简单：1.右键单击错误消息然后选择Recreate HTML Templates。2.重新建立项目。3.验证Problems视图中无错误报告。注：将Flex 3 Dashboard应用程序导入Flash Builder时出现的所有错误都被解决之后，你可能希望将此项目文件保存至另一个位置作为参考。

启动Dashboard应用程序

现在你已经解决了所有出现的错误，可以启动Flash Builder 4中的Dashboard应用程序，方式是选中Run > Run Main或按下Ctrl+F11（参见图10）。图10.用Flex 4.1 SDK建立的Dashboard应用程序。启动该应用程序时，你将注意到显示内容和该应用程序的Flex 3版本大不相同。原因之一是因为你删除了

<mx:Style>

标签，因此该应用程序不再使用应用程序CSS样式引用的图像。另一个原因是，该应用程序正在使用Flex 4.1 SDK。Flex3 MX控件的默认外观和感觉已经发生变化，更类似于新的Flex 4 Spark控件的外观和感觉，而且MX控件和容器的某些属性在Flex 4中已发生变化。本系列文章的第2部分将引导你迁移该应用程序以使用Flex 4 Spark控件和容器，以及新的Spark架构。在本系列文章的最后，Dashboard应用程序将和Flex 3版本完全一致。

下一步阅读方向

本文阐述了将Flex Developer CenterDashboard演示应用程序（使用Flex 3 SDK进行编写）导入Flash Builder 4的方法，作为迁移该应用程序至Flex 4的第一个步骤。现在你已经导入了Dashboard项目并解决了转换至Flex 4.1 SDK时突发的最初的错误，你可以进入本系列的第2部分（即将推出），开始将该应用程序迁移至Flex 4。关于Flex 4的更多信息—尤其是Dashboard应用程序相关的特性—请参见以下资源：·Flex 4帮助–图表介绍·Flex 4帮助–深入探讨数据·Flex 4帮助–拖放·Flex研发人员中心- Flex 4的新增功能·Flex一周视频培训（免费）+根据Creative CommonsAttribution-Noncommercial-Share Alike 3.0 Unported License授予本作品许可。超出本许可证范围且与本文中包含的示例代码相关的权限可在Adobe上找到。