译者声明
1.请大家在转载和使用时保持本文的完整性。
2.本文所有资料均来自Flex官方文档，其英文版权归Adobe公司所有。
3.文中某些内容根据译者的理解稍作改动，因此与原版英文在文字上不完全一
致。同时，由于译者水平有限，翻译不妥之处请大家多多见谅。
重庆大坪刘刚
第一章Flex是如何工作的
该部分文档的内容是为用户提供关于Adobe?Flex工作机制的一个快速综述。通过本章
节的学习，你可以创建你的第一个Flex应用程序，并将它与你以前所熟悉的Web开发技术
进行比较，以领会Flex的内涵和精髓。
第一节构建并运行Flex应用程序
Flex是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用Adobe?
Flash?Player9作为前台的“富客户端互联网应用程序/richInternetapplications/RIA”，以满
足用户更为直观和极具交互性的在线体验。
开发Flex应用程序的典型步骤如下（通常是这样）：
1.选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）
2.布置组件以设计用户界面。
3.使用样式和主题来增强视觉方面的设计。
4.添加动态行为（例如程序部件之间的相互作用）。
5.定义并连接所需的数据库服务。
6.将源代码编译成SWF文件，然后在FlashPlayer中运行。
一个典型的Flex应用程序包括如下元素：
1.Flexframework
Adobe?Flex2framework包含了创建RIA所需要的所有组件，它们是：用于应用程序
布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支
持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式。Flexframework被包
含在公用组件库（SWC）文件中。
2.MXML
每个Flex应用程序至少包含有一个MXML文件，它被作为该程序的主文件。MXML
是一种标记语言，它是基于XML的一种实现，用来创建Flex应用程序。你可以使用它去声
明程序中所使用的标签结构的定义。
3.ActionScript3.0
你可以使用ActionScript3.0为应用程序添加动态行为，它是基于ECMAScript的一种实
现，类似于JavaScript。你可以将ActionScript作为一个脚本块，在MXML文件中直接进行
添加；或者创建一个单独的ActionScript文件，然后将它们导入到MXML文件中。
4.CSS
你可以通过设置组件的属性（properties）来改变组件（按钮、列表框等）的视觉样式。
例如，按钮组件有一个fontFamily属性，你可以使用它来进行字体的设置。样式的属性通常
有四种方法来进行控制：通过主题(theme)；在CSS文件中进行定义；在MXML文件中的样
式块中进行定义；在组件的实例中进行设置。
5.图形资源
与很多应用程序一样，Flex包含了各种各样的图形资源，如图标和图象。
6.数据
一些组件被使用来进行数据显示（combobox或者datagrid）的工作。同时，你还可以
使用各种方式来将这些组件与数据联系起来，如使用数组、收集对象、数据模型、以及外部
XML数据资源，等等。
Flex应用程序是如何编译和发布的：
所有的元素都被编译或连接到你的Flex应用程序中，就象下图所示：
Flex应用程序被编译成一个SWF文件，然后在FlashPlayer下运行。当一个源代码被
编译时，它就被转换成ActionScript类（译者注：这正是Flex精髓的地方之一，即提供从
MXML到ActionScript的转换），并与图形和其它资源合并到SWF文件里。在运行时，SWF
文件与所需的外部库、服务和数据源进行交互。
一般的Flex应用程序并不需要服务器端所提供的支持。因此，你可以在你的本地计算
机上编译它们，然后在Web服务的HTML页面中发布给你的用户。
当然，你还可以将Flex与Adobe?FlexDataServices2、ColdFusionFlashRemoting
Service、或者其它Java和J2EEService服务器技术结合起来，进行B/S结构的网络应用程
序的开发。
MXML：一切开始的地方
你可以在MXML中使用Flex所提供的组件来定义用户界面。这里有一个主MXML程
序文件的例子：
如果你对XML已经很熟悉了，就能一眼识别出这个例子的格式。MXML代码的头两
行包含了版本号、编码、以及命名空间的信息，文档的主体包含的是程序的具体内容。
Flex应用程序所有的具体内容都被放在标签对中。同时，你还可以在
父标签对中嵌套其它的子标签对（译者注：反正标签是成对出现的，这点一定要记住）。
该例子创建了一个简单的程序，它在屏幕上显示“SayhellotoFlex！”的文字。在该程
序中，声明了TextArea和Button组件，并设置了它们相应的text和label属性。
备注：在MXML文件中的每个标签都有前缀mx，它是Flex的设计命名空间。
程序被编译后运行，如下图所示：
第二节连接数据
请记住，在Flex应用程序中对数据的操作最重要的事情是：Flex应用程序并不直接与
一个数据库进行连接。因此，Adobe?FlexBuilder2没有提供直接连接数据的工具。你可以
通过使用MXML和ActionScript代码来操作和管理数据。
在Flex中，你可以使用几种方法去操纵和管理数据，它们大多数相关的内容已经超出
了在这里进行简要介绍的范围（更多的信息，请查看后面的章节）。不管怎样，请想象一种
可以连接外部数据的方法，随后的例子将演示与XML结构的数据进行连接。
数据的生成
因为Flex应用程序并不直接与一个数据库进行连接，所以你需要使用某种类型的服务
来支持对数据的使用。在随后的例子中，将使用HTTPService组件从PHP所产生的一个XML
文件中获取数据。
连接数据库的第一步是生成将在Flex程序中使用到的数据。在与PHP的应用中，你将
采用如下的步骤：
1.创建一个数据库（如MySQL）。
2.编写一个PHP脚本连接MySQL数据库并生成XML格式的数据。
这些步骤同样适合于在其它工作平台上生成的数据（如ASP.NET、JSP等）。
连接外部数据源
对于PHP所生成的XML格式数据，你可以使用HTTPService组件来请求获取数据，
就象这样：
id="productsRequest"
url="http://www.somesite.com/products.php"/>
...
HTTPService组件定义了一个请求ID，你将使用这个ID来控制提供数据的URL或者
服务器与数据之间的绑定。
外部数据与数据驱动控制的绑定
通过数据与数据驱动控制（data-drivencontrol）的绑定，你就可以处理HTTPService
的结果（XML数据），就象这样：
dataProvider="{productRequest.lastResult.products.items}">
数据绑定的语法显示在数据控制的dataProvider属性中（在波浪形的括号里），它包含
了HTTPService请求ID、lastResult方法、以及XML文件的数据结构。在这个例子中，XML
数据源的数据结构看起来就象这样：
MobilePhone
$199
CarCharger
$34
...
通过设置dataField属性，项目数据（name和price）作为数据栅格中每一列的数据。
在运行时加载数据
你还可以在Flex程序开始运行时加载数据，就象随后所示，在HTTPService中向某个
特定的URL发送一个请求：
creationComplete="productsRequest.send()">
当你将creationComplete方法添加到应用程序标签里后，数据会在运行时进行加载并交
于数据驱动控制（在这个例子中是数据栅格）。
你还可以将HTTPService请求添加到一个控制事件上而不是程序里的标签中，就象如下
所示：
Flex提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调
用、数据服务、或者其它企业级技术来操纵和管理数据。
第三节关于FlashPlayer安全性方面的问题
出于安全方面的考虑，在客户端的FlashPlayer中运行的应用程序，只有在满足如下条
件之一的情况时才能访问远程的数据源，：
1.应用程序所编译的SWF文件与远程数据源位于同一个域中。
2.使用代理（proxy），并且你的SWF文件位于和代理相同的服务器上。AdobeFlexData
Services为Flex应用程序提供了一个完整的代理管理系统。同时，你还可以通过使用一种
web脚本语言，如ColdFusion、JSP、PHP或者ASP来创建一个简单的代理服务。
3.安装crossdomain.xml（跨域策略/cross-domainpolicy）文件在数据源的宿主Web服
务器上。crossdomain.xml文件允许位于其它域中的SWF文件对数据源的访问。
第四节为Flex应用程序设计界面布局
让我们来详细分析一下前面那个“SayHellotoFlex“的简单例子，你可以通过设置组件
的属性值来控制Flex应用程序的界面布局，就象如下所示：
right="30"/>
许多容器组件都允许以绝对坐标的方式创建布局，这就意义着你可以使用精确的x和y
的坐标来放置组件。你还可以对应其父容器的相对位置来放置组件并约束它们，使它们在应
用程序的界面放大或缩小时仍然保持其彼此的位置。
在这个例子中，面板/Panel组件的布局属性被设置为绝对值方式，同时所有容器的大小
都被设置为应用程序的百分之八十。两个组件（TextArea和Button）被放置到距离面板容器
边界的特定象素位置上。
使用风格和主题增强视觉方面的设计
如果样式/style的属性值没有被指定，它们将由整个程序中运行的主题/theme来进行控
制。在默认情况下，Flex应用程序使用Halo主题（就象上面那个例子那样）。当然，你可以
修改默认的主题或者干脆自己创建一个。你还可以简单地指定新的样式定义来改变默认的主
题样式，就象这样：
TextArea{
font-size:36px;
font-weight:bold;
}
通过明确地为TextArea组件定义一个样式，应用程序现在看起来就会象这样了：
在这个例子中，一种新样式在MXML文件中的标签里进行了定义。如同我
们前面所提到过的，你还可以通过修改主题或应用新主题、使用一个外部CSS文件、或者
设置单独的样式属性来达到设置新样式的目的。
将一个样式单导入到MXML文件中，你需要添加如下的代码：
第五节事件和行为的使用
HTML应用程序的原理是由客户端发出请求，并从服务器端得到反应。与之不相同的
是，Flex应用程序是基于事件的/event-based。举个例子，当用户单击一个按钮时，便会触
发一个事件。应用程序本身，不是指服务器，包含了识别事件的逻辑并采取相应的行动。
当事件被触发时修改组件的属性
对某个组件以编程方式进行操作时，为了对某个事件作出反应，必须首先要引用它，这
时你就需要赋予它一个ID值，如下所示：
随后你就可以将行为/behavior添加到应用程序上，当某个事件被触发时改变组件的属
性值，就象这样：
当按钮被单击时，面板的可见属性值被设置为false。
使用ActionScript功能函数
你也可以通过编写ActionScript功能函数，并在事件中调用它来达到相同的目的，在这
种情况下，按钮组件的单击事件如下所示：
publicfunctionclose():void{
myPanel.visible=false;
}
]]>
ActionScript功能函数是在MXML文件里的块中进行定义的，然后引用到按
钮的单击事件上。
单独的ActionScript代码
为了从MXML文件中更好地分离出ActionScript代码，你可以将它们放到单独的
ActionScript文件中而不是作为函数，然后再将它们导入到MXML文件里，如下所示：
运用行为和变换增强丰富的视觉互动性
Flex应用程序是事件驱动的，这就意味着你可以在程序运行时使用事件去添加丰富的视
觉互动性。为了实现它，你使用了一个事件触发器，用其来描述一个行为。
在前面的例子中，面板组件的visible属性值被设置为false因而不可见。你还可以通过
使用行为来制造出更强的视觉效果。
下面的例子创建了一个行为，该行为首先创建好一种效果，然后把它绑定到组件的
hideEffect属性上（触发器）：
hideEffect="{myFade}">
当关闭按钮被单击时，面板组件淡出而不是消失。
触发器和效果还可以组合到更为复杂的行为中，其被称之为变换/transitions。
第六节在应用程序中添加多态页面
有几种方法在一个Flex应用程序中创建多态页面。你可以使用ViewStack组件、创建
单独的MXML文件、或者使用视图状态。视图状态可以被看作是一个组件或组件群构成的
预定义的用户界面布局。你可以使用视图状态为程序表现出不同的视觉效果。每一种视图状
态都是基于一种基础的状态，并进行继承和扩展。
在随后的例子中，当用户在组件上滚动鼠标时，基础状态发生变化。
当一个视图状态被调用时（通过用户的鼠标在组件上滚动时产生的事件），一种效果（或
一种变换）改变了用户界面的外观。
使用视图状态方式、ViewStack方式还是MXML文件方式，取决于你想从一个页面到
另一个页面进行变化的范围、用户界面的复杂性、以及实现Flex程序的构架。
第七节开始使用Flex
现在，想必你对Flex的概念有了一个基础的认识，让我们开始创建Flex应用程序吧。
使用FlexBuilder
通过使用新项目向导/NewFlexProjectWizard创建一个Flex项目（File>New>Flex
Project）。设计，编译，以及调试Flex应用程序所需的所有工具，都被包括在FlexBuilder
中了。
使用FlexSDK
创建一个文件名后缀为MXML的文本文件，在其中添加MXML文件的基本元素（上
述例子中的头两行代码），然后使用文档资料（特别是AdobeFlex2LanguageReference）去
研究各种组件的用法。编译和调试工具是以命令行的方法提供的。
第二章Flex2应用程序开发入门
本章节的内容包含了对Flex系列产品的概述，以及关于Flex基础理论的相关教程。
关于Flex
Flex提供了为专业开发人员所熟知的、基于标准的编程模式，以及一套发布高品质RIAs
的设计产品。RIAs为web应用程序带来了快速响应并且内容丰富的桌面软件，以满足更有
效力的用户体验。Flex使用了卓越超凡的Adobe?Flash?Player9，允许开发人员无缝地扩
展浏览器的能力，发布丰富并且快速响应的客户端应用、与服务器端更为健壮的整合功能、
以及面向服务器端的体系构架。
关于Flex产品系列
Flex产品系列包括了进行设计、开发、发布整套RIA所需的一系列产品。它们是：
1.Adobe?Flex?2SDK
2.Adobe?Flex?Builder?2
3.Adobe?Flex?DataServices2
4.Adobe?Flex?Charting2
关于FlashPlayer9
Flex应用程序在浏览器中运行时，它们采用了先进的FlashPlayer9运行时环境去执行
客户端的逻辑，渲染图形、播放动画、声音以及视频。FlashPlayer9提供了对高性能
ActionScript3.0的支持，一如即往地展示了它极具革新技术的表达力。FlashPlayer为开发
人员提供了一个设计用户界面的平台，无论是客户端还是客户计算机上的表现层
/presentation-tier的逻辑执行。因为FlashPlayer能够在所有主流的操作系统和浏览器上运行，
所以你并不需要去为某个浏览器或平台进行程序定制。
另外，在FlashPlayer9中运行的Flex应用程序可以与浏览器中所显示的JavaScript或
者HTML互动。因此，你可以将Flex融合到一个已经存在的web站点或者应用程序中，包
括与其它基于浏览器的构架，如Ajax或JavaScript库一起协同工作。
关于FlexSoftwareDevelopmentKit2
Flex系列产品中的核心是FlexSoftwareDevelopmentKit(SDK)。Flex2SDK是技术实
现和程序编制的基础集合，它使你可以使用Flex系列产品来创建应用程序。Flex2SDK包
含了Flex构架（类库），Flex编译器，调试器，MXML和ActionScript编程语言，以及其它
实用程序。FlexSDK还包括了核心Flex构架类库的源代码，使你可以学习这些类的代码并
扩展它们以备你自己的使用。
FlexSDK可以作为一个独立包进行使用，或者集成在FlexBuilder和FlexDataServices
里。
Flex应用程序由MXML和ActionScript源文件组成。（译者注：简而言这，MXML是
用来进行用户界面布局设计的标签语言，ActionScript是FlashPlayer的编程语言。）
关于FlexBuilder2
FlexBuilder是一个使用FlexSDK、FlexDataServices和FlashPlayer来开发应用程序的
集成开发环境（IDE）。FlexBuilderIDE为开发人员提供了各种工具用来进行开发、设计、
调试Flex应用程序，其中包括集成的增量编译器和单步调试器。因为它与Flex2SDK、Flex
程序模型、Flex编程语言紧密集成，所以FlexBuilder可以提高开发小组中所有成员的生产
力。
FlexBuilder是建立在Eclipse工作平台上的（一种对于开发工具的开源平台）。因此，
FlexBuilder可以作为一个独立的产品或者Eclipse的插件来进行安装，并且能够从Eclipse
工作平台上数以百计的商业和开源项目中受惠。
FlexBuilder提供了一套针对MXML、ActionScript、层叠样式表（CSS）的代码编辑器，
帮助你更加容易地管理代码的源代码操纵工具，以及帮助排除程序中故障的调试器。对于用
户界面的设计，FlexBuilder支持可视化的设计视图，它可以使开发人员或者设计人员去布
置Flex组件，定制它们的外观，以及如何与用户进行互动。
FlexBuilder设计视图的界面如下所示：
FlexBuilder进行程序编制的界面如下图所示：
关于FlexDataServices2
通过使用FlexDataServices，大大地增强了Flex2SDK的功能性。FlexDataServices
新增了对企业信息的支持，以及对于Flex2SDK的数据服务架构。你可以在J2EE应用服务
器上或者servlet容器里将FlexDataServices发布为一个标准的web应用程序。FlexData
Services能够简化操作服务器上数据的编程模式。
关于FlexCharting2
以图表或图形来显示数据的方式可以使用户更容易理解数据的使用。你可以将一个简单
的数据表格，通过设置它的颜色、标题、以及二维表现方式来展示为条形、圆饼形、线形、
或者其它类型的图表。
Flex图表组件扩展了Flex的构架，增加了对大多数常用图表类型的支持，包括条形、
圆饼形、线形、标图形和气泡形。图表组件是动态地在客户计算机上进行渲染的，从而使它
可以非常容易地平铺、翻滚、以及其它增强用户体验的互动性。你还可以使用颜色和标题来
使图形更有可读性。
一个简单的图表如下所示：
Flex应用程序的特性
在Flex中，开发人员可以开发出符合各种需求类型的应用程序，它们是：
1.用户数据收集
2.配置
3.在客户端处理用户的输入，包括过滤和数据校验
4.直接反馈用户
5.多步骤处理
6.支持大数据集
7.实时数据推进
8.偶尔的客户端连接
Flex发布模式
Flex平台支持范围广泛的发布模式，它们是：
1.客户端模式，即应用程序只运行在客户端上而不需要服务器资源。
2.使用简单的RPC访问服务器数据，即使用HTTPService（HTTPGET或POST请求）
和WebService（通过使用SOAP）。
3.FlexDataServices模式，可以提供更为高级的特性，如数据同步、安全增强等等。
FlexDataServices增强的RPC服务支持使用AMF协议去访问RemoteObjects。这样，
你就可以访问远程服务器上的Java对象（JavaBeans，EJBs，POJOs）。同时，FlexData
Services还提供了一个代理/proxy以方便对服务器端数据的存取。
关于FlexBuilder的界面模式
FlexBuilder提供两种界面模式：即开发设计模式、调试模式。你可以在主菜单中的
Window>Perspective>下对两者进行切换。
Flex开发界面模式
打开开发界面模式，你将看到代码编辑器，它包括了导航栏/Navigatorview、调试栏
/Problemsview、以及概述视图栏。
FlexBuilder中的代码提示
代码编辑器包含了许多特征可以帮助开发人员简化他们的工作。其中最重要的特征称之
为代码提示/内容协助/ContentAssist（译者注：内容协助是其英文的直译，不太好，所以根
据它的实际意思意译成代码提示），它将在你输入MXML、ActionScript以及CSS代码时给
出完整的提示。请键入Control+Space以打开代码提示。
在FlexBuilder中设计Flex应用程序
在开发界面中有两种设计方式：代码输入方式和可视化设计方式，你可以自由地在两者
之间进行切换。当你选择可视化设计方式/Designmode时，Flex界面上将出现设计面板/design
canvas、所支持的组件/Components、以及Flex属性栏/Propertiesviews。
Flex调试模式
你可以在代码编辑器中查看和编辑出错或被警告的代码。同时，你还可以设置断点、或
单步执行来帮助你进行程序的调试。
编译应用程序
每当项目资源作出改动后，FlexBuilder便会自动地将Flex和ActionScript3.0编译成
SWF，并与相应的HTML页面一起放置到项目的输出文件夹中。
|
|
