2.1 Flex家族图谱 本章会带领你一览Flex技术的全貌。你可能会在这章遇到大量新的概念和术语，我保证努力让一切循序渐进。但是，如果你遇到一些看起来深奥的术语和概念，请不要担心，也不要困陷于此，在本书的其他篇章会有更深入的介绍。 Flex技术包含开源的Flex SDK、集成开发环境Flex Builder，以及服务器端LiveCycle Data Service/Blaze DS，如图2-1所示。 图2-1 Flex组成 ・ Flex SDK：包含了程序语言MXML和ActionScript、Flex组件类库及命令行方式的编译器。Flex SDK以Mozilla Public License （MPL）的授权模式开源，开发人员可以免费的使用Flex SDK开发和部署Flex 程序； ・ Flex Builder：基于Eclipse，创建Flex 应用的高效集成开发工具； ・ LiveCycle Data Service ES：旧称“Flex Data Service”。Adobe服务器端技术，实现RIA应用同J2EE应用、服务器端业务逻辑、数据的集成。 我们将在本章为你呈现Flex的全貌，在深入学习Flex之前，先建立Flex技术的整体概念。 2.2 非著名语言――MXML和ActionScript 3.0 MXML和ActionScript 3.0是编写Flex应用的程序语言。开发者社区中的非著名语言（在Flash设计者社区，ActionScript大名鼎鼎）。 Flex应用的一砖一瓦都由ActionScript 3.0搭建而成。Flex应用构建于ActionScript 3.0类库上。无论是按钮、下拉框、画布这些可视化控件或容器，还是数据模型、键盘操作管理器、HTTP连接服务这些非可视化组件，其背后都隐藏着ActionScript 3.0。 ActionScript是基于ECMAScript规范的程序语言，用来编写Adobe Flash及Flex应用。遵从ECMAScript规范的最著名脚本语言为JavaScript。从Flash Player 9开始支持的ActionScript 3.0符合ECMA-262，即第三版ECMAScript规范，但在类、命名空间、强类型变量及其他一些特性上作了大量扩展。这些ActionScript 3.0对ECMAScript规范的扩展，预计将会被包含在下一版的ECMAScript规范中。 单纯使用面向对象的程序语言编写用户界面是非常枯燥和低效的。声明性标记语言在这方面有更好的表现。MXML是符合XML语法规范的声明性标记语言，用来描述Flex应用界面的组件布局、属性和交互行为等。我们也可以使用MXML来描述非可视化组件，例如HTTP连接、数据绑定等。 为了更形象地说明，让我们先回到HTML世界。一个普通的HTML页面通常包含标签形式的HTML声明代码和更为复杂的JavaScript脚本。HTML说明了页面的布局、组件的属性等。JavaScript丰富了页面的交互行为，负责逻辑运算、事件响应，甚至服务器端数据交换。 Flex应用也很类似。MXML担负起HTML的责任，而ActionScript扮演类似JavaScript的角色，但比JavaScript要强大和复杂得多。然而，千万不要以为MXML和ActionScript不过如此，第4章“MXML基础”（见第75页）会对此作详细解释。 2.3 话本逐源：Flash Player 大多数人不理解Flash Player能力，或者由于Player（播放器）这个“不够与时俱进”的名称，不公平地隐藏了它的重要性。如果你仍然把Flash Player看作是播放Flash动画的“愚蠢”的播放器，那么，是时候抛弃这种偏见了。 2.3.1 Flash的三种运行环境 ・ Flash Player：内嵌于浏览器中的Flash运行时环境。 ・ AIR：Adobe集成开发环境，即Adobe Integrated Runtime，脱离浏览器，运行于桌面的Flash运行环境，对比Flash Player提供了额外的桌面资源交互和离线处理能力。 ・ Flash Lite：运行于移动设备上的Flash 运行环境。本书不做讨论。 由ActionScript编写的应用可以运行于上述三种Flash运行环境中，本书则主要讨论浏览器端的RIA应用，即Flash Player的Flash运行环境。（如果你需要开发基于AIR的桌面互联网应用时，本书讨论的绝大部分内容仍然有效。） Flash Player刚刚诞生的时候，确实是一款Flash动画或影片的播放器，设计者关注如何像在画布或胶片上一样进行动画创作。Flash Player 8加入了许多重要的功能，尤其在Flash生成、渲染和播放性能上有了巨大的提升。在Flash Player发展的第10个年头，通过重新设计ActionScript 3.0，Flash Player 9成为最重要的一次发布。全新闪亮登场的ECMAScript引擎AVM2使Flash Player脱胎换骨，伴随着Flash Player 9发布的Flex 2，也开始占据RIA舞台的中心。 2.3.2 Flash Player发展史 表2-1总结了Flash Player发展的各个重要阶段。 表2-1 Flash Player的发展史 Flash Player版本发布时间主要特性FutureSplash1996年Flash Player的前身Flash Player 21997年Macromedia发布的第一个Flash Player，加入了按钮、音频文件、库和Tween类Flash Player 31998 年支持MP3，Alpha透明通道Flash Player 41999年5月Mp3的流媒体支持、支持影片的移动。加入了完全的脚本，称为ActionFlash Player 52000年8月全面引入第一版ActionScript语言Flash Player 62002年3月引入RTMP，支持音视频流媒体，应用组件、共享库，加入Flash视频编码Sorenson Sparc编码，引入AMF，支持Flash Remoting和Web ServiceFlash Player 72003年9月升级至ActionScript2，新的面向对象语言。加入了图表、文本特效，第三方插件扩展，高质量的PDF集成Flash Player 82005年8月加入滤镜效果，GIF和PNG的图片支持， bitmap支持；加入了重要的视频编码On2 VP6；支持文件的上传下载；增强的安全特性等 续表 Flash Player版本发布时间主要特性Flash Player 92006年6月新的ECMAScript引擎――AVM2（ActionScript Virtual Machine 2），支持全新的ActionScript3和MXML。Flash第一次从设计制作者社区进军开发者社区 2.3.3 你不知道的Flash Player Flash Player的构成 Flash Player包含4个主要部分： 1. 媒体播放器 媒体播放器负责渲染和绘画矢量图形、生成文本并处理文本布局、播放和处理音频和视频。 2. 虚拟机 ActionScript生成的二进制SWF代码，通过虚拟机执行，并置入Flash的显示列表（Display List，我们将在第5章“ActionScript 3.0基础”（见第83页）中进行详细讲解）中，进行渲染和显示。 3. 网络通讯层 Flash Player通过网络通讯组件实现基于HTTP和HTTPS的网络数据通讯和SOCKET通讯。 4. 平台基础层 大多数情况下，Flash Player作为插件被内嵌于浏览器中（如图2-2所示），平台基础层保证Flash Player能够集成于宿主环境，处理类似授权、网络代理等与宿主平台相关的事情。 图2-2 浏览器中的Flash Player 虚拟机 JRE（Java Runtime Environment）是编译和运行Java程序所必须的环境的集合，包含Java虚拟机、Java平台核心类和支持文件。CLR（Common Language Runtime）是微软.NET框架的虚拟机，用于编译并执行C#等语言代码。 Flex世界，ActionScript虚拟机（简称AVM）扮演着JRE和CLR的角色。 Flash Player 9包含了两个AVM：向下兼容的AVM1和新的、高度优化的AVM2。 AVM1负责执行旧版 ActionScript（ActionScript 1和ActionScript 2），以便保持与现有内容的向后兼容。 AVM2针对下一代 ActionScript 3.0的应用从头开始设计，可提供满足丰富互联网应用程序开发人员需要的性能和功能。 AVM2是从Flash Player 9开始内置其中的全新ActionScript 3.0语言引擎，是最新的ActionScript虚拟机。针对新一代的ActionScript 3.0语言，Adobe重写了ActionScript虚拟机。新的虚拟机为RIA应用的开发者提供了更好的性能和更丰富的特性。AVM2 支持运行时错误报告、内置的调试和二进制套接字支持，使开发人员能够扩展Flash Player，与任何二进制协议一起使用。 同AVM1完全不同的是，AVM2提供了即时编译器JIT（Just-in-time compiler）。通过将ActionScript字节码编译成机器码，最大化提升了应用执行速度。与此对比，AVM1是解释程序，通过将ActionScript源代码（不是字节码）翻译成机器码执行，是对ActionScript代码的解释执行。 解释器是能够执行用其他计算机语言编写的程序的系统软件，它是一种翻译程序。它的执行方式是一边翻译一边执行，因此其执行效率一般偏低，但是解释器的实现较为简单，而且编写源程序的高级语言可以使用更加灵活和富于表现力的语法。AVM1是解释器。JIT（just-in-time compilation），即时编译，也被成为动态翻译，是一种通过在运行时将字节码编译为机器码，从而改善字节码编译语言性能的技术。AVM2内置JIT。 Flash Player如何在浏览器中工作 用户通过HTML页面访问Flash（即SWF文件）。Web服务器将发送的多媒体数据的类型通知给浏览器，而通知手段就是通过声明该多媒体数据的MIME类型，这样就可以让浏览器知道所接收信息的类型，并依此调用该类型信息所需的对应插件。 SWF文件在HTML页面中以“application/x-shockwave-flash”的MIME类型存在。 当浏览器读取到“application/x-shockwave-flash”这种信息类型时，会自动调用插件Flash Player来运行SWF文件。Flash Player对SWF进行渲染并显示，内嵌的AVM会执行ActionScript二进制编码。 浏览器可以执行HTML中的JavaScript脚本程序，同时能够通过JavaScript脚本与Flash Player进行交互。反之，Flash Player中的AVM也能够通过外部接口同JavaScript进行通讯。 通过Flash Player的网络通讯层，Flash Player也能够基于HTTP（s）或Socket实现与服务器端的通讯，例如与后端的Flash流媒体服务器FMS、服务器端Java程序甚至数据库之间进行网络数据通讯。 2.4 SWF和SWC 2.4.1 SWF文件格式 SWF（发音为“swiff”）是由文件头和一系列标签数据构成的二进制文件。你可以从http://www.adobe.com/devnet/swf/ 下载SWF文件格式规范，深入了解SWF格式。 SWF是Flash Player可以执行的唯一文件格式。其他任何文件资源如JPEG、GIF、MP3等，都必须内嵌于SWF文件，或通过其加载。我们可以把SWF想象成为一个“可执行文件”，这个文件内嵌必要的静态资源（比如矢量图型、视频、文本等）和ActionScript二进制代码。“可执行文件”也能够调用外部资源，比如图片、视频甚至其他SWF文件。有的SWF文件只包含可执行代码，没有资源文件，反之亦然。 很多人可能会问，难道Flash Player不能直接播放Flash Video视频文件吗（扩展名为FLV的文件）？答案是：不能。同其他文件格式一样，FLV文件也必须通过内嵌到SWF文件中或被其调用，才能够通过Flash Player进行播放。 Flash能够加载的外部文件包括： ・ mp3（音频）； ・ GIF（图片）； ・ PNG（图片）； ・ FLV（Adobe Flash视频）； ・ XML（数据）。 2.4.2 SWC文件格式 SWC文件是Flex组件和资源的归档文件。你可以通过Winzip等压缩归档工具打开SWC文件。图2-3展示了使用Winzip打开framwork.swc（Flex SDK的架构类库文件）的情形。 图2-3 解压缩后的framwork.swc文件 SWC文件包含library.swf、assets.swf、必要的资源文件及catalog.xml文件。其中的SWF文件即编译后的Flex组件及相关资源。Flex应用在需要使用SWC文件中的组件或资源时，从SWC文件中抽取相应的SWF文件。 SWC中的catalog.xml就像货物目录表一样，说明了SWC中library.swf包含的组件、资源及相互依赖关系。图2-4显示了framework.swc中的catalog.xml的代码片断。 利用SWC文件，你无须费力管理需要共享或归档的所有MXML和ActionScript代码，以及涉及的图片等各式各样的资源文件，只需要一个单独的SWC文件，就可以方便地共享组件和相关的资源。 图2-4 catalog.xml 2.5 Flex SDK 2.5.1 了解Flex SDK Flex SDK（Software Development Kit），即Flex软件开发包，包含了Flex Framework（Flex组件类库）和一组Flex编译工具。你可以从http://www.adobe.com/cfusion/entitlement/ index.cfm?e=flex3email 免费下载38MB Flex 3.0 SDK。 通过Flex SDK提供的开发模型、开发语言和丰富的组件类库，Flex开发者能够快速地创建Flex应用。Flex Framework包含了大量的、可以进一步扩展和配置的组件类。Flex Framework定义了组件和数据之间的交互模式，帮助开发者有效地完成应用逻辑、布局、设计等各个方面。 Flex组件类库是一组“易于扩充”的组件，开发者能够利用MXML和ActionScript进一步扩展或创建自定义组件，实现重用和共享。 2.5.2 核心SWC文件 Flex SDK包含了核心SWC文件：framework.swc、framework_rb.swc、playerglobal.swc、charts.swc、fds.swc及 rpc.swc。 表2-2描述了其中重要的SWC文件的作用。安装Flex 3.0 SDK、Flex Builder 3.0及LiveCycle Data Service后，你可以在“目录”一栏列出的目录中找到这些SWC文件。 表2-2 SDK中的SWC SWC文件描述目录datavisualization.swc包含所有的Charting组件FlexBuilder3sdks3.0.0frameworkslibsdatavisualization_rb.swc包含所有Flex图表组件需要的绑定资源FlexBuilder3sdks3.0.0frameworkslocaleen_USrpc.swcRPC服务需要的类库，RPC服务包括基于SOAP的Web服务，Adobe远程对象服务，以及REST-style服务flex_sdk_3frameworkslibsrpc _rb.swc包含Flex数据服务需要的资源绑定flex_sdk_3frameworkslocaleen_USfds.swc包含使用Flex数据服务需要的雷库，该文件只供LiveCycle Data Service的开发者使用lcds.warWEB-INFflexlibsfds_rb.swc包含Flex数据服务的资源绑定lcds.warWEB-INFflexlocaleen_USflex.swcFlex框架，被用作开发ActionScript应用flex_sdk_3frameworkslibsframework_rb.swcFlex框架需要的资源绑定flex_sdk_3frameworkslocaleen_USframework.swc包含所有Flex框架内置的组件flex_sdk_3frameworkslibs 续表 SWC文件描述目录playerglobal.swcFlash类库，比如flash.utils和flash.net，以及flash基本数据类型，例如String，Object等flex_sdk_3flex_sdk_3frameworkslibsplayer 2.6 开发利器――Flex Builder Flex Builder是开发Flex、AIR和ActionScript应用的开发环境，构建在开源集成开发环境Eclipse之上。可以说，Flex Builder就是一组Eclipse插件，许多基本的核心功能来自于Eclipse。 Eclipse是一个开放源代码的、基于 Java 的可扩展开发平台，是被最广泛的开发者（尤其是Java开发者）使用的免费开源的开发环境之一，即所谓的集成开发环境。Eclipse广泛流行的最重要原因就是插件机制。Eclipse 中的每样东西都是插件，同时自身提供了插件开发环境（Plug-in Development Environment, PDE），使得众多主要软件工具提供商和开源项目都参与进来了，提供基于该环境的产品。你可以在www.eclipse.org获取最新的eclipse工具和插件。 安装Flex Builder有两种方式。 1. 插件形式 获取Eclipse插件形式的Flex Builder，安装于现有的Eclipse开发环境。开发者能够在同一个Eclipse环境中同时进行Java、Flex等不同应用的开发。 2. 独立安装 独立的安装Flex Builder。对于入门级的Flex开发者，这种方式更易安装，开发者无须进行复杂配置。安装向导为你自动化安装所需的一切：Eclipse + Flex Builder。 Flex Builder 的安装包含了三大部分：Flex SDK、Eclipse IDE及插件和Flash Player 9。书中将在本章的2.9节“准备开发环境”（见第31页）带领你安装Flex Builder，并在第3章“13个Flex Builder精选要点”（见第43页）中帮助你全面掌握Flex Builder 3，使其成为你真正的开发利器。 在本书出版时，Flex Builder 3是最新版本，分为Flex Builder标准版和专业版。相比标准版，专业版额外提供了如下几个主要功能： ・ 图表组件； ・ 内存和性能评测； ・ 自动功能测试支持。 本书的开发环境采用独立安装的Flex Builder 3专业版软件。 2.7 LiveCycle Data Service和Blaze Data Service 2.7.1 为什么需要LiveCycle Data Service和Blaze Data Service 如何把RIA应用同服务器端业务逻辑连接在一起？大多数RIA开发者都面临相似的问题。通俗地讲，即RIA客户端应用从哪里获取数据，如何获取，如何互动，如何驱动和响应服务器端业务逻辑。 下面也许是一个RIA应用专家F的典型需求： 1. 第一周，F在想“最基本的、需要从服务器端获取的数据”。F考虑的数据可能来自数据库，也可能来自已经存在的服务器端应用。这些应用也许是J2EE应用、.Net 应用，也可能是运行在AS/400上的RPG程序。 2. 第二周，F有了更高的要求：“当用户在Web页面上点击一个按钮，如果RIA客户端应用能够直接触发或调用服务器应用中相对应的业务，就更好了。” 3. 第三周，F变得越发“贪心”：“我希望能够实时地获取数据。你知道，我对传统Web页面中通过定时器定时轮询服务器端数据服务的方式已经无法忍受了。” 4. 第四周，F开始考虑更加切实的问题：“还有一点，我要的不是花架子。这些应用是关系企业运行的核心系统，数据量巨大，我需要强壮的架构、高效稳定的大规模数据处理。” 可以理解，F有很多问题需要解决，而LiveCycle Data Service（简称LC DS）或Blaze Data Service（简称Blaze DS）则能够为此提供解决方案。 2.7.2 LiveCycle Data Service和Blaze DS的基本概念 你也许对LiveCycle Data Service和Blaze Data Service有很多疑问，我们将在第4篇“Flex服务器篇”（见第395页）详尽地讲解如何使用LiveCycle Data Service和Blaze Data Service，本节只回答概念性问题。 问题1：什么是LiveCycle Data Service? LiveCycle Data Service的前身叫做Flex Data Service，听起来更容易理解，即：Flex应用的数据服务。LC DS是将RIA应用同企业业务逻辑、J2EE、.Net等企业应用结合在一起的服务器软件。该服务器软件需要部署在应用服务器上，例如WebSphere、WebLogic、JBoss、Tomcat和JRun等。 你知道吗？ LiveCycle是Adobe企业解决方案平台，包含业务流程管理系统（LiveCycle Process Management）、企业版权管理系统（LiveCycle Rights Management）、表单服务（LiveCycle Forms）等12个解决方案组件。LiveCycle Data Service是其中的一个整合RIA应用和J2EE等企业应用的解决方案组件。 问题2：什么是Blaze Data Service? Blaze Data Service以前是LiveCycle Data Service的一部分，现已成为免费开源项目。Blaze DS能够用于实现远程对象调用，并能实现基于Web的消息通讯。 问题3：LiveCycle Data Service具体能做什么? 1. 提供RPC服务，即远程过程调用服务：基于HTTP或SOAP协议获取服务器端数据，或者基于AMF格式，通过调用远程对象获取数据和触发服务器端逻辑； 2. 提供数据管理能力：管理客户端和服务器端的数据同步、大规模数据的数据分页以及数据冲突等； 3. 提供消息服务：Web层客户端应用同服务端的消息发布和订阅，基于每个客户端的服务质量服务（QOS）、RTMP通道支持； 4. 提供支持离线应用的能力：例如离线数据缓存及本地消息队列等； 5. 提供企业Flex应用集成所需的代理服务、Web层编译Flex应用能力、支持WSRP接口的门户部署、集群部署、支持Ajax的数据服务、实现Flex RIA应用和Ajax程序交互的Flex-Ajax Bridge、多种服务适配器、服务器端PDF生成等其他各种服务。 问题4：LiveCycle Data Service和Blaze Data Service有什么区别? 从功能上看，Blaze DS只提供RPC服务、消息服务、代理服务及有限的服务适配器。最重要的区别在于，Blaze DS没有提供数据管理功能，而该功能对于在RIA客户端展示大型数据，实现客户端同服务器端大容量数据交互处理非常重要。在消息服务方面，二者在性能上也有很大区别。请参见第17章“Flex服务技术概览”的17.1.4节“Blaze DS介绍”（见第402页）提供的LiveCycle和Blaze DS对比。 2.8 Flex还是Flash Flex还是Flash，本章回答的最后一个问题。 首先，我们来“统一口径”。本节说到的Flash是狭义的Flash技术，即Flash设计者（所谓的“闪客”），利用Flash制作工具，比如Flash Professional 等创意软件设计，通过逐帧绘制、编写ActionScript脚本而创作Flash作品。这些作品大多数是动画、广告、网站美工作品等。 从技术角度来看，Flex和Flash是融合在一起的。确切地说，Flex是Adobe Flash技术平台架构的重要组成成员。这里的Flash平台架构即广义的Flash。 在应用技术选型的时候，Flex和Flash二者的区别非常明显。 我不想把Flex和Flash的关系类比成Java和Photoshop，但其实很大程度上，确实是这样，即使他们的区别没有这么巨大。 Flex是面向开发者社区的，专注于企业应用的表现层解决方案，提供了大量的通用组件用于构建前端页面、通过数据服务技术帮助你更好的分离表现层、业务层和数据层。同J2EE或.Net项目类似，Flex应用是由开发者利用集成开发环境（基于Eclipse的Flex Builder）通过代码和相关配置编写、编译和部署的。 Flash是面向设计者社区的，设计师使用Flash Professional创意制作软件，像制作电影一样，在时间线上，逐帧绘制Flash。熟练的Flash设计师也使用ActionScript语言，但更多的是实现动画、特效等更多美工类型的工作。 使用Flex还是Flash，回答下面的问题： 1. 你需要开发的是RIA项目吗？ 2. 是否需要同后端业务集成？ 3. 是否需要同后端数据关联？ 4. 界面上需要大量应用成熟的组件吗？例如按钮、文本框、下拉框？ 如果你即将开发的是RIA项目或应用，Flex将是你明确的选择。 如果你在考虑使用一种技术构建业务前端，需要同后端业务逻辑关联，Flex将是你明确的选择。 如果你在考虑使用一种技术展现后端数据，例如数据仪表板（Data Dashboard），那么Flex将是你最好的选择。 如果你的应用由大量成熟的、用户熟悉的组件构成，例如文本框、按钮、下拉组合框等，那么Flex将是你更好的选择。 如果你需要为网站提供绚丽的装饰、动画或者广告，那么请使用Flash。 需要特别说明的是，在Flex项目中，我们依然会需要传统的Flash技术。利用Flex Builder，可以直接嵌入并调用Flash设计作品。 2.9 准备开发环境 2.9.1 安装Flex Builder 3 专业版 如果你还是学生，那么恭喜――你有机会下载免费的Flex Builder 3专业版软件：https://www.flexregistration.com/。对于非学生用户，你可以下载60天免费版本的Flex Builder专业版。你可以从http://www.adobe.com/cn/products/flex/ 下载独立安装方式的Flex Builder专业版，或者从http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex%5Feclipse下载eclipse插件版本，按照向导即可完成安装。 2.9.2 安装LiveCycle Data Service 2.6 请从http://labs.adobe.com/downloads/livecycle_dataservices2_6.html下载最新的LiveCycle Data Service 2.6 Beta版本。 2.10 第一个Flex应用――Hello Flex! “Hello World”之类的例子是完美的“第一次”。一些人热衷于使用最少的代码编写“Hello World”，但往往同时缺失了很多要点。仅仅通过3到4行的代码，使用Flex也能编写“Hello World”。但本章的“Hello Flex”样例稍显复杂，我希望能利用这些代码，尽量体现Flex应用的本质，帮助你更深入地体会Flex技术。 如果在本节你读到一些不甚明了的文字，别担心，我们还有大量的篇幅和时间为你一一阐明。 现在，让我们一起向Flex打声招呼。 2.10.1 步骤一：创建第一个Flex项目 在文件目录系统中创建一个目录（如C:DONGFlexBookWorkspace），将它用作本书中所有样例项目的工作空间（Workspace）。 你知道吗？ 工作空间（workspace）是所有项目的容器，具有自己特有的属性和元数据设置。一个安装好的Eclipse可以支持多个工作空间，你只须在启动时指定使用哪个工作空间。 启动Flex Builder后，选中File → New → Flex Project 创建项目。Flex Builder（以下简称FB）弹出“新建Flex项目”向导，如图2-5所示。 图2-5 创建项目向导 如图“创建项目向导”中所示，填写项目名称（Project Name）为“HelloFlex”，去掉“Use default location”的选项框中的选择，指定“C:DONGFlexBookWorkspaceHelloFlex”为项目位置。选择“Web application (runs in Flash Player)”作为本项目的应用类型，接受其他默认设置，直接点击“Finish”完成项目的创建。新创建的HelloFlex如图2-6所示。 图2-6 创建的项目HelloFlex Flex Builder自动生成主应用文件：HelloFlex.mxml，如代码2-1所示。 代码2-1：自动生成的主应用文件 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> </mx:Application> Flex应用程序就是普通XML文件，后缀名为mxml。因此，你可以看到MXML 文件的第一行是 XML 声明，每个 MXML 文件的第一行都必须如此。 <mx:Application>是Flex互联网应用程序的第一个标签，也是Flex互联网应用程序的根标签。该标签定义了Flex互联网应用程序的应用容器，开发者之后添加的任何容器、组件及ActionScript代码最终都被包含或嵌入该标签中。 2.10.2 步骤二：UI设计和编写ActionScript脚本 UI设计：添加容器和组件 点击“设计（Design）”按钮进入Flex Builder的设计视图。（图2-6中用实线框标识“Design”按钮。）Flex Builder提供了可视化的UI设计器，通过拖曳，开发者即可进行页面布局。 如图2-7中，在左下角的“组件（Components）”调板中，拖曳Layout类别下的Panel容器到设计区域，然后拖曳Text组件到Panel中。确认选中Text组件，在右侧的“Flex Property （Flex属性）”调板中，设置其ID为txtGreeting。 图2-7 在设计视图中进行UI可视化设计 Flex Builder的设计视图帮助你可视化地、拖过拖曳操作进行页面布局、设置组件属性或进行其他UI设计。在进行拖曳或者属性设置的同时，Flex Builder自动生成了相应的MXML代码。如下面的代码2-2所示，即为Flex Builder在你刚刚的操作中生成的。你会看到，代表Panel容器的<mx:Panel>嵌入在<mx:Application>根容器中。而代表Text组件的<mx:Text>嵌入在<mx:Panel>中。 代码2-2：UI设计自动生成的MXML代码 <mx:Panel x="147" y="91" width="768" height="521" layout="absolute"> <mx:Text width="264" height="50" id="txtGreeting" fontFamily="Arial" fontSize="26" text="text" textAlign="center" x="242" y="178" /> </mx:Panel> 编写ActionScript脚本 我们通过ActionScript的方法使你的第一个Flex应用问候这个世界。 首先在<mx:Application>标签之下，<mx:Panel>标签之上加入greeting方法，代码片断如代码2-3所示： 代码2-3：ActionScript方法：Greeting() <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ private vargreetingWord:String="empty word"; functiongreeting():void{ greetingWord="Hello Flex!"; } ]]> </mx:Script> <mx:Panel x="147" y="91" width="768" height="521" layout="absolute" fontFamily="Times New Roman" fontSize="20"> MXML文件中的ActionScript代码内嵌于<mx:Script>标签中。上述代码定义了字符串变量greetingWord以及方法greeting()。该方法将设置greetingWord变量的值为“Hello Flex!”。 事件触发和变量绑定 为了让Flex应用程序能够在启动后显示“Hello Flex!”，我们还要完成两件事： 1. 设置变量greetingWord和可视文本控件txtGreeting文本属性text的绑定，如代码2-4所示。该属性指定了控件显示的文本内容。 代码2-4：ActionScript变量greetingWord与对象属性text绑定 <mx:Text width="264" height="50" id="txtGreeting" fontFamily="Arial" fontSize="26" text="{greetingWord}"textAlign="center" x="242" y="178"/> 2. 使应用加载完成后自动调用greeting()方法，以便设置greetingWord的值。在<mx:Application>标签内，增加事件creationComplete="greeting()"，如代码2-5所示： 代码2-5：应用加载完成后调用greeting方法 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="greeting()"> 如果你现在运行这个Flex应用，你不会得到期望的结果。运行结果如图2-8所示。 图2-8 错误的运行结果 可以看到，Flex应用并没有成功地显示出“Hello Flex!”。 在Flex应用中，当需要把ActionScript变量或属性绑定到其他对象的属性上时，需要使用元数据“[Bindable]”来声明。因此，还需要在“greetingWord”的变量声明中加入代码，见代码2-6。 代码2-6：ActionScript方法：Greeting() [Bindable] private vargreetingWord:String="empty word"; 现在，我们完成了全部代码，准备迎接你的第一个Flex应用吧！ 2.10.3 步骤三：编译和运行 点击运行（Run）按钮（绿色箭头，如下图），运行HelloFlex。Flex Builder将自动启动浏览器，显示运行结果，如图2-9所示。 图2-9 运行HelloFlex 运行结果如图2-10所示。 图2-10 Firefox浏览器中运行的Hello Flex！应用 2.10.4 代码分析（见代码2-7） 代码2-7：HelloFlex 2.11 第一个连接服务的Flex应用――来自服务器的问候：Hello Flex! 我们将在上一节的HelloFlex中加入服务器能力，也就是说，让HelloFlex通过调用WebService来获取问候语：“ Hello Flex! This is from Server!”。 2.11.1 步骤一：创建新的项目HelloFlexFromServer 我们将以上一节创建的HelloFlex为基础，创建新的HelloFlexFromServer项目。 启动Flex Builder后，在Flex导航栏（Flex Navigator）选中HelloFlex，点击鼠标右键，选择“copy”，如图2-11所示。然后在导航栏的空白处，点击“Paste”。 图2-11 复制项目 点击“Paste”后，Flex Builder弹出复制项目对话框。设置新的项目名称为“HelloFlexFromServer”，如图2-12所示，项目目录为%workspace%/HelloFlexFromServer。 图2-12 复制项目对话框 2.11.2 步骤二：创建服务器端Web Service 本书使用Tomcat + XFire部署和开发Web Service服务。如果你不熟悉该部分内容，可以参考http://xfire.codehaus.org/学习理解。 创建服务接口类HelloFlexService和服务实现POJO类HelloFlexServiceImpl，如代码2-7、代码2-8所示。 代码2-7：HelloFlexService接口 package com.mark.pojo; public interface HelloFlexService { public String sayHello(); } 代码2-8：HelloFlexServiceImpl 服务实现POJO package com.mark.pojo; public class HelloFlexServiceImpl implements HelloFlexService{ public String sayHello(){ return "Hello Flex! This is from Server!"; } } 编译上述Java代码。在%TOMCAT%/webapps/xfire/WEB-INF/classes下创建com/mark/pojo目录以映射Java包结构com.mark.pojo，把生成的HelloFlexService.class和HelloFlexServiceImpl.class复制到%TOMCAT%/webapps/xfire/WEB-INF/classes/com/mark/pojo下。如图2-13所示。 图2-13 在Tomcat上部署HelloFlex POJO类 在services.xml中添加服务 在%TOMCAT%/webapps/xfire/WEB-INF/classes/META-INF/xfire/目录下，编辑services.xml，在<beans>标签中，增加<service>标签，如代码2-9所示： 代码2-9：在service.xml中增加服务 <!-- START SNIPPET: services --> <beans xmlns="http://xfire.codehaus.org/config/1.0"> <service> <name>HelloFlexService</name> <namespace>http://com.mark/HelloFlexService</namespace> <serviceClass> com.mark.pojo.HelloFlexService </serviceClass> <implementationClass> com.mark.pojo.HelloFlexServiceImpl </implementationClass> </service> </beans> <!-- END SNIPPET: services --> 启动Tomcat，打开浏览器，访问http://localhost:8080/xfire/services/HelloWorldService?wsdl，得到如图2-14所示的结果，证明Web Service发布成功了。 图2-14 Web Service发布成功 2.11.3 步骤三：添加WebService对象 通过<mx:WebService>可以访问Web Service。如代码2-10所示，在<mx:Panel>上添加WebService对象。 代码2-10：通过WebService对象调用Web服务 2.11.4 步骤四：调用WebService 我们希望在Flex应用初始化完成后，自动调用Web服务，获取服务端的问候语。因此须要修改Application容器的creationComplete事件。在creationComplete事件发生后，将调用Web服务wsHelloFlex的sayHello方法。代码如2-11所示： 代码2-11：修改Application的creationComplete <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsHelloFlex.sayHello()"> 在Web服务的sayHello方法执行后，返回的结果被置于lastResult对象中。我们在greeting()方法中把返回结果传递给greetingWord。一旦greetingWord的值发生变化，与它绑定在一起的文本对象txtGreeting的text属性也会立即被自动更新，显示在应用中，代码如2-12所示。 代码2-12：修改greeting()方法 functiongreeting():void{ greetingWord=wsHelloFlex.sayHello.lastResult; } 2.11.5 步骤五：运行HelloFlexService 确保Tomcat运行，使Web服务HelloFlexService能够访问。运行新的HelloFlexFromServer应用，你将看到来自服务器端的问候，如图2-15所示： 图2-15 来自服务器端的问候 2.12 HelloFlexFromServer应用解析 HelloFlexFromServer代码分析如下： 本章，我们初步了解了Flex技术的全貌，编写了第一个Flex应用。在下一章中，我们将一起深入了解我们在本章使用过的集成开发环境：Flex Builder。