Flex 4 beta应用实例：Spark Intranet Sample App

最新推荐文章于 2024-11-14 11:18:27 发布

lihe111

最新推荐文章于 2024-11-14 11:18:27 发布

阅读量2.1k

点赞数

文章标签： flex coldfusion flash datagrid network 服务器

本文通过为一个虚构的公司设计的局域网应用实例——Spark Intranet Sample App（如图1），介绍了Flex 4 beata和Flash Builder 4 beta中新的一些特性。

本文内容适合于有Flex 2或Flex 3知识，最好还对Flex 4 beta框架有一些基本接触的开发者。通过具体应用理解Flex 4与其更早版本之间差异，是一个好办法。本文主要介绍Flash Builder 4中Spark框架相关的一些新的特性。

Spark Intranet Sample App home page

图1 ，Spark Intranet Sample App主页

体验此应用

Flash Builder 4特性包括：

Data/Services连接
Network Monitor视图
Test Operation视图
Getter/Setter方法自动生成

Flex 4 SDK和Spark框架的特性包括：

Layouts
Skins and components
Effects
States
Transitions
CSS styles syntax
Text Layout Framework

要求

为了更好理解本文内容，你需要准备如下软件和文件：

Flash Builder 4 beta 2

ColdFusion 9 (可选)

实例文件：

SparkInc_src.zip (ZIP, 147 KB)

实例工程设置

在具体接触此应用的代码前，你需安装Flash Builder 4 beta 2（如果还没有安装的话），并下载上述实例文件。

在本文所讲的例子中，并不一定要使用ColdFusion 9。但是若没有ColdFusion，你将无法完全体验到Flash Builder 4中新的Data/Service特性。缺省情况下，例子中的代码通过RemoteObject连接服务器。在这种情况下，不需要依靠 ColdFusion 9服务器上的CFCs（ColdFusion Components）就可以运行应用程序。此时，代码通过HTTPService组件获取应用的XML数据，也可以用测试数据方法运行程序。如果用这类方法的话，就无需安装ColdFusion 9，可以跳过下节（安装ColdFusion 9），阅读后面的内容。

安装ColdFusion 9

如果你想了解本文提到的全部服务端功能，就需在本地安装ColdFusion 9服务器。下载并安装Developer版本，可访问http://www.adobe.com/products/coldfusion/ 。

在安装ColdFusion时，请注意记录下你的RDS（Remote Development Services）用户名和密码，我们会在后面的步骤中用到。

装好ColdFusion服务器后，请将实例文件中的Users.cfc复制到ColdFusion 9安装目录下的wwwroot文件夹下。缺省安装时，这个文件夹在Windows上是C:/ColdFusion9/wwwroot，在Mac OS X上是/Applications/ColdFusion9/wwwroot。此CFC包含三种为这个Flex局域网应用提供服务的方法。

在Flash Builder 4中设置实例工程

请按照如下步骤设置工程：

下载实例文件，并将这些文件解压到你计算机的某个目录下。
启动Flash Builder 4。
选择菜单File > Import Flex Project (FXP) ，从刚才解压出的文件中选择SparkInc.fxp。

Explore the application in the new Flash Builder 4 Package Explorer.

图2 ，在最新的Flash Builder 4包浏览器（Package Explorer）中浏览应用

此时，这个工程应该设置完毕并能运行了，你可以在Flash Builder 4中新的包浏览器中观察其目录结构（如图2）。

Spark Intranet Sample App应用

Spark Intranet Sample App应用由一系列自定义组件和皮肤组成，可在缺省包和组件包中找到它们。条目渲染器（item renderer）和皮肤放在了同一个包中（译者注： 即组件包），这样使用起来更简单。

Main.mxml

在Main.mxml文件中，你会发现HomeView、LoginView、TimesheetView，以及一些用于转换、特效和导航的组件。我们首先要注意的是HomeView。它的visible属性值由前面定义的一个Boolean变量决定。这是为了保证在normal、 timesheet状态间切换时外观的正确性。

在 Main.mxml的顶部，定义了三种状态：normal、disabled和timesheet。HomeView包括了应用程序首次启动时，你在屏幕上看到的主要内容。打开HomeView，在VGroup容器中间，你可以看到两个其他组件：NewsView、ExpandedNewsView。

其他组件和代码用于应用程序整个模板，不专为任何特定视图服务。例如，顶部导航按钮用SparkSkin类指定了两个图像，分别对应按钮弹起和鼠标悬停状态。这个例子指定TimesheetButton的SparkSkin使用CSS样式。可以用styleName属性引用 TimesheetButtonSkin。

在Styles.css文件中，你可以看到对TimeSheetBtn类的类引用（classReference）定义：

s|Button.TimeSheetBtn { skinClass:ClassReference("components.TimesheetButtonSkin"); }

为了使用Spark和Halo这两种样式，还需分别定义名字空间。在CSS文件的顶部，声明了两个名字空间：

@namespace s "library://ns.adobe.com/flex/spark";

@namespace mx "library://ns.adobe.com/flex/halo";

此文件其他部分的样式都将落入这两个名字空间（mx|Button、s|Button），具体由它们引用的按钮决定。这种方法可用于定义Spark 组件的皮肤；另一种方法是使用skinClass属性。你会注意到Application标签用 skinClass="components.AppBackgroundSkin"定义它的皮肤。

NewsView.mxml

在NewsView.mxml中，你会发现这个组件由一个dataProvider和一个SparkList组成，并用这个List的 skinClass属性指定皮肤。打开components.NewsList皮肤类（译者注，即文件 components/NewsList.mxml），可详细阅读代码，这些代码定义了List的外观和行为。在这个皮肤类的顶部，是元数据标签 HostComponent：

[HostComponent("spark.components.List")]

这个元数据标签将NewsList显式声明为SparkList。

NewsList包含Image和Label组件，它们是界面风格的组成部分。进一步观察，你还可发现实际实现列表功能的

DataGroup和HScrollBar组件。Flex 3中实例化一个DataGrid，因为它用的是Halo皮肤，是很难自定义界面风格的。而现在有了Spark框架后，你可以完全控制每个组件的界面风格。

观察NewsList下的DataGroup的条目渲染器，你可以更好理解这一点。打开 components.NewsListItemRenderer组件（译者注：即文件 components/NewsListItemRenderer.mxml），你将发现一个熟悉的模式。这个组件从Spark ItemRenderer继承，因此其功能和List有显著不同。除了功能外，这个MXML类只定义了组件的外观和对用户输入的响应方式。这个类中有四种状态：normal、hovered、selected和disabled。每种状态对组件有什么影响呢？这些都定义在组件内部。比如，如下代码将一个 Rect对象定义为条目渲染器的背景：

注意y属性，除hovered状态设为20外，其余都被设置为80。

当用户滚动列表中的每个条目时，hovered状态就起作用了，Rect对象的y值被设为相对于顶部20像素。相应地，图片由于3D旋转也会略有倾斜。在Flex 3中，组件响应状态变化复杂得多，而现在在Spark框架中就容易多了。你只需在状态变化时检查组件哪些属性受到影响，而且可以分开定义这些状态。

条目渲染器实际数据的处理方式和Flex 3相同。Label通过为条目渲染器设置的Data属性取得自己的text：

多看看NewsList，我们就会知道Spark框架的功能有多么强大，在创建完全自定义组件和效果时有多么方便。比如，若要处理垂直而非横向 List的变化请求，只需用VerticalLayout标签代替HorizontalLayout就可以了；除此之外，组件的行为和横向时是完全相同的。

ExpandedNewsView.mxml

ExpandedNewsView组件包括交叉过渡（cross-fading）图片和这个应用的第一个视图中的短文。这里有几处比较有意思。在中，你可以看到两个字符串，其内容是格式化的HTML代码。虽然可将这些字符串放在外部并加载，但为了简单，我们直接将它们写在了MXML中。

TextLayout Framework (TLF)现在直接包含在Flex 4的SDK中。这个例子对TLF的使用非常简单，但TLF本身还有很多复杂的特性，我建议你深入学习。

在ExpandedNewsView中，利用TLF的静态方法TextConverter.importToFlow 将格式化的HMTL代码转换为TLF类，以便在RichText组件中使用。比如，HTML中的

标签被转换为可在RichText组件中使用的文本对象模型（Text Object Model）的ParagraphElement对象。

ExpandedNewsView 中列出的两种状态，根据一个Timer（触发时间设置为10秒）实现切换。在切换时，利用最新支持的CrossFade Spark效果，文本的伴随图片和另一个图片（用于第二篇文章）交叉过渡。在效果生成过程中，CrossFade会在两个图片间实现像素级的位图转换。在这个视图中，当状态变化时，文本内容也会随着逐渐增强的图片一起呈现。

利用TLF，你可以选择、编辑或排列跨列、连接的容器（linked containers）和内嵌图片周围的文本；可以在不适用嵌入字体的前提下实现文本动画效果；创建自定义文本组件等。依靠Spark的特效类，你可以实现三个维度的控制，能为任何组件实现完全自定义的运动路径（Motion Path）、关键帧（Keyframe）和像素着色器（Pixel Shader）效果。我建议你能花一些时间学习Flex SDK中的这些新特性，以便对它们的功能有直接认识。

TimeSheetView.mxml

为了说明方便，Spark Intranet Sample App应用没有使用任何特殊的架构（如Cairngorm），数据内联在例子中，以便容易理解。

你还会看到另一个有自己的皮肤和条目渲染器的List组件被用作为timesheet，这个MXML的剩下部分非常清楚，包括用于UI的 Button和Label。 timesheet是一个类似DataGrid的组件，但此处例子所需要的功能远比DataGrid提供的少。在这种情况下，使用一个自定义的Spark List是更好的选择，这样既满足了应用程序的全部要求，又免除了那些不必要皮肤和特性的累赘。

Data/Service视图、Test Operation视图和Getter/Setter方法自动生成

在TimeSheetView的部分，是一个HTTPService组件，它负责加载一个本地XML文件。如果你已经安装了ColdFusion服务器，也可以用TimeSheetView_CF连接例子代码里已提供的CFC。若使用ColdFusion组件，你可以更深入了解Flash Builder 4中新的Data/Service特性，体验CFC提供的方法。如果要使用TimeSheetView_CF，请打开文件Main.mxml，然后取消对这个组件的注释。记得在运行程序前确保注释掉在它之前的TimeSheetView。

如果要使用CFC，请按如下步骤在Data/Services视图中进行：

如果Data/Services视图还没有打开，请选择菜单 Window > Data/Services。
点击右上方的“Connect To Data/Service”按钮（如图3）。

图3 ，在Flash Builder 4 Data/Services视图中找到Users.cfc。
选择ColdFusion项（如图4），并点击“Next”。

图4 ，在Data/Services视图中选择ColdFusion项。
出现对话框，询问你是否确定将项目的服务器类型设置为ColdFusion，选择Yes。
在Spark Inc对话框的Properties部分里的Flex Server设置中，选择ColdFusion作为应用服务器，并取消“Use Default Location For Local ColdFusion Server”的选择。
确保你的ColdFusion Root Folder有效，点击“Validate Configuration”。
若配置验证有效，点击OK。
检查你在前面已部署到你的wwwroot目录的Users.cfc（如图5）。

图5 ，检查先前已经部署的CFC。
点击“Finish”。
如要求，请输入你的RDS用户名和密码并点击OK。
当一个名为Users的条目在窗口上出现时，展开它。这就是你先前已经部署的CFC。

现在，你可以在这个CFC中检查所有可用于Flex的ColdFusion方法。

Test Operation视图

Test Operation特性可帮助开发人员检测CFC服务的可用性，它实际上是用测试数据对服务器执行调用。我们按下面步骤具体操作一下：

右键点击checkLogin()方法，然后选择菜单项Test Operation。
为userName 和password 这两个参数输入数据。
点击Test按钮（如图6）。

你会看到返回一个Boolean值true。如果你向服务器发送的信息不正确，则会返回false。

注意：本例CFC中使用了硬编码；没有数据库连接。

Use the Test Operation feature to perform live tests on the CFC methods.

图6 ，用Test Operation特性现场测试CFC方法

同样，利用Flash Builder 4的Data/Service特性，这种方法能用于ColdFusion、HTTPService、Web Service和PHP。这个例子非常简单，实际上通过Data/Service功能你可以用到很多非常节省时间的特性。比如，Flash Builder 4可在ColdFusion组件或PHP类中为我们自动生成数据库表的CRUD（Create、Read、Update和Delete）方法；又如在浏览服务或绑定到Design视图的组件时支持拖放。

Getter/Setter方法自动生成

如果打开 valueObjects.CustomerData类，你会发现它看上去就是一个很典型的值对象。在创建标准的值对象方面，Flash Builder 4支持一项非常有用的功能：Getter/Setter方法自动生成。在你的类的顶部设置好变量后，点选任何一个变量，然后选择菜单Source > Generate Getter/Setter。然后会出现Generate Getter/Setter对话框，然后设置格式即可。

最好的做法，是在类的顶部定义带下划线的私有变量（例如private var _customers:ArrayCollection），而getter/setter这两个方法则应该可公开访问。Getter/Setter自动生成特性会帮你处理这些细节事情，将你从那些重复而乏味的工作中解脱出来。

使用Network Monitor

无论你在代码中使用的是HTTPService，还是ColdFusion组件，都可以使用Flash Builder 4的另一个高级功能——Network Monitor。

按照如下步骤操作，我们可以检查一个工程的网络数据流量：

选择菜单Window > Network Monitor。
在Network Monitor视图的右上角处点击“Enable Monitor”图标，确保激活监视器。

图7 ，成功登录 Spark Intranet Sample App 的后台后，Network Monitor显示了全部网络请求和响应
运行应用程序，点击Timesheet按钮登录。
返回Flash Builder 4中的Network Monitor视图。

此时你会看到，HTTPService调用（或用ColdFusion组件远程调用）和响应已经记录在窗口中。我们花点时间展开并观察这些结果（如图7）。要检测客户端-服务端间网络流量，有很多优秀的第三方工具，但对于开发者而言，Flash Builder 4能自带这样的工具当然更好。无论是使用本地还是远程服务器，你都可以清楚看到你的应用和服务器之间的实时网络流量。

总结

通过对本文示例逐步深入的学习，希望你对新的Spark组件和Flash Builder 4 特性帮助你进行Flex开发有了很好的掌握。这将简化设计者和开发者之间的工作流程，提高生产力。新的Spark框架包含了很多高级RIA（Rich Internet Application）开发方面的新技术。如果你想进一步学习这方面的知识，请参考如下Flex 4和Flash Builder 4相关资源：

作者简介

Dave Flatley：具有10余年的Flash平台架构师经验。在纽约市担任多年自由咨询师后，他于2006年夏天创立了PXL Designs有限责任公司。在他的职业生涯中，已经为Adobe、Intel、Capital One、Fleer、Redmond Software、DRS Technologies、Merrill Lynch和Selective Insurance等公司提供了咨询服务。他还积极为Flex社区贡献力量，如参与Attest（Flex Certification认证考试模拟引擎）等项目、提供开源代码和组件、维护RIA技术相关的博客、撰写Linking Flex和相关Web服务器技术方面的文章等等。工作之余，他喜欢玩吉他或参与一些户外运动，如驱赶来喂鸟器偷食的松鼠。

本文转自：Infoq

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750