学习Flex首先要了解RIA技术RIA(富互联网应用程序)是企

Flex概述111第第章章导读Adobe®Flex™是Adobe公司推出的多平台的RIA（RichInternetApplications）开发产品。它包含了一系列技术和产品，如FlexFramework、FlexBuilder、FlexCharting、AdobeLiveCycleDataServicesES等。本章将详细介绍Flex和Flex技术；对比Flex应用与传统网页应用；学习Flex包含的各个元素，以及它们的工作原理。Flex从入门到精通·4·1.1RIA概述学习Flex首先要了解RIA技术。RIA（富互联网应用程序）是企业级应用程序客户端的最新技术，具有高度的用户互动性和丰富的用户体验。RIA技术的出现是在企业级应用程序经历了几次系统构架方面的转变的必然结果。企业级应用程序最初的模式是客户机/服务器（Client/Server，C/S）应用程序。20世纪90年代随着Windows的出现和客户端处理能力的增强，出现了客户机/服务器应用程序。它采用图形用户界面，客户端的数据处理能力比较强。但由于受到使用局域网的限制，客户端应用程序需要进行不断的更新，因此其应用范围存在很大的局限性。20世纪90年代中期，互联网飞速发展，出现了浏览器/服务器（Browser/Server，B/S）应用程序。Web技术的使用解决了C/S应用程序问题，但由于使用了HTML页面形式的用户界面，客户端的数据处理能力较C/S应用程序有所减弱。RIA技术的出现重新平衡了客户端和服务器端的关系。RIA是B/S技术在客户端的突破发展，它是集桌面应用程序的最佳用户界面功能与Web应用程序的普遍采用和快速、低成本布署以及互动多媒体通信的实时快捷于一体的新一代网络应用程序。RIA大致包括了Flex、Ajax、WPF、OpenLaszlo和GoogleWebToolkit等一系列产品，而Flex是同类产品中最领先和成熟的产品，改善了用户体验。1.2Flex概观Adobe公司的Flex是一个安装在客户端的表现层的服务器；是一个富用户界面组件库；是一个类XML基础的标记语言，用来布局组件；是使用ActionScript这种OOP（面向对象程序设计）语言用于用户界面和应用程序的一个框架。Flex将基于标准的语言和各种可扩展用户界面及数据访问组件结合起来，使开发人员能够快速构建具有丰富数据演示、强大客户端逻辑和集成多媒体的Flex应用程序。使用Flex构建的应用程序能够在所有常见桌面平台上运行，支持对应用程序外观进行完全自定义，并支持各种连接到后端数据和服务的方法。1.2.1Flex应用技术对于Flex的初学者，首先需要了解什么是Flex技术，了解Flex所使用的其他附加技术。简单地说，编程者在Flex框架中建立Flex应用程序，并在FlashPlayer上进行应用。下面详细地讲解一下Flex所使用的各项技术。1．了解FlashPlayerFlex是AdobeFlash平台的一个组成部分，也是FlashPlayer的一组核心技术。Flex的应用程序需要在FlashPlayer上展开，也就是在FlashPlayer中运行Flex应用程序。FlashPlayer是一个用于内容和第1章Flex概述·5·应用程序的轻量型运行库，它不仅符合安全要求，而且是基于许多Web标准（包括ECMA-262编程语言）构建的。FlashPlayer是被广泛应用的软件技术，几乎所有的计算机都安装某一个版本的FlashPlayer，因此Flex可以不受平台限制地得以广泛的应用，并且它仅占用1MB的少量内存。Flex2以上版本的产品都需要基于FlashPlayer9的运行，因此在使用高于Flex2版本的Flex产品时，需要安装FlashPlayer9以上的产品。使用Flex框架可以建立和编译代码为.swf的文件格式，.swf文件格式是FlashPlayer可以阅读的二进制代码。2．了解Flex框架Flex框架就是Flex类库和Flex所使用的ActionScript类的集合的代言词。Flex框架完全由ActionScript类所书写，定义了其控件、容器和管理组件。在本书中，Flex的类库是将要讲解的主要内容。图1-1显示了Flex框架所包含的各类组件。图1-1Flex框架组件3．FlexBuilderFlexBuilder是Adobe官方发布的IDE（集成开发系统），用来构建在开源的EclipseIDE上，使用Flex的MXML和ActionScrip技术，进行Flex书写和调试。要注意的是，FlexBuilder和FlexFramework（框架）并不是同一个概念。FlexBuilder是Adobe格栅商业化的产品，但FlexSDK是免费的，编程者可以在任何文本编辑器中编辑MXML和ActionScript文件，然后在命令行对文件进行编译。…………………Flex从入门到精通·6·4．与LiveCycleDataService（LCDS）集成LCDS是Flex应用的重要组成部分，简单地说，其作用在于Flex应用与数据层之间的发送和获取数据。在Flex中使用数据服务就如使用其他的组件和类。5．附加的Flex库和组件到目前为止，Flex3中有两个官方附加的库，即FlexCharting组件（图表组件）和FlexAdvancedDataGrid（高级数据列表组件）。6．FlexIDE以开源Eclipse为基础的、功能强大的IDE，具有自动部署、调试和追踪的功能。1.2.2Flex组成元素如图1-2所示，Flex表现层服务器包含Flex应用框架和Flex运行服务，而Flex框架又包含MXML描述语言、ActionScript程序语言和Flex类库。图1-2Flex服务的组成编程者结合MXML和ActionScript来建立应用程序，MXML原理定义用户界面元素，ActionScript原理定义客户逻辑和程序控制。Flex类库则包含了Flex组件、管理器和行为控制。Flex运行服务包括支持服务器端的数据传输、编译和高速缓冲内存，内部资源的集成和运行服务的需求。下面详细介绍各个组成部分。1．MXML界面语言MXML是基于XML的标记语言，用于应用程序用户界面的布局，该用户界面中可包含用于操作结构化数据和大型数据集合的高级组件。MXML提供了表示层逻辑的声明抽象以及用户界面和服务器端数据之间的绑定。MXML将表示层问题从业务逻辑中剥离出来，从而有助于开发者生产力和应用程序可用性的最大化。第1章Flex概述·7·使用MXML标签可以进行布局、描述行为效果、过渡、定义数据模型、数据绑定。2．ActionScript编程模型ActionScript是基于ECMA-262标准的一种类似于JavaScript的强类型面向对象语言，可用于定义事件监听器和处理器、设置或检索组件属性值，以及处理回调函数等。ActionScript是FlashPlayer可以理解的编程语言，也是Flex应用的基础。ActionScript是MXML的基础，可以完成MXML所不能完成的任务，包括下面的用途：控制事件。控制错误。绑定数据对象到Flex控件。定义用户组件。3．Flex类库Flex类库提供了可扩展的预建组件（如容器和控件）、数据绑定、行为以及其他功能。4．建立Flex应用程序的步骤通常，建立一个基本的Flex应用程序包括以下步骤。（1）使用MXML代码设计和布局Flex的容器和控件，例如一个按钮控件。代码如下：mx:Buttonlabel=按钮Aclick=handleClickFunction(event)/如果使用FlexBuilderIDE，则可以应用更多的技术，例如拖放、状态改变、行为效果等。（2）在ActionScript代码中完成实现函数功能。代码如下：privatefunctionhandleClickFunction(event:Event):void{//实现业务逻辑}（3）编译代码，Flex编译器自动转换MXML代码为ActionScript代码，并且编译为二进制代码，输出为SWF文件格式，并且在FlashPlayer上运行。使用FlexBuilderIDE可以完全自动编译所有的文件。（4）将SWF文件包装在服务器的HTML网页中，使用FlexBuilderIDE这个过程也是完全自动生成的。1.2.3Flex技术与传统网页技术的对比在共同点上，传统技术和Flex技术都是N-层（N-Tier）的结构。n的具体数目取决于应用的很多因素。多数传统技术包含了至少3层的结构：1个数据层（DataTier）、1个业务层（BusinessTier）、1个表现层（PresentationTier）。数据层通常指数据库或数据源；业务层指应用核心的业务逻辑部分；传统技术在其表现层包括了HTML、CSS、JavaScript、JSP、PHP等技术。如图1-3所示，Flex首先包含了1个数据层（DataTier）、1个业务层（BusinessTier），数据层和业务层中间的集成层（IntegrationTier）、表现层（PresentationTier）。与传统技术不同的是，Flex还有一个客户层（ClientTier），这是与传统网页技术完全不同的一个层面。Flex的客户层允许用户脱Flex从入门到精通·8·离服务器工作，不受网络的限制，并且与用户更好地互动。图1-3Flex应用的N-Tier结构Flex应用通常是嵌入在表现层的。Flex应用的客户层比传统技术的表现层更加精致，因此Flex的客户层的建立理所当然地需要更多的时间和资源。相对于传统的网页，Flex最突出的优点就是其界面美观，能展现独一无二的图像、动画和音像等多媒体技术。如图1-4所示是NikeAir网页展示的与用户互动的视频效果。可以访问此网站（）来体验一下Flex的RIA技术的超强用户体验。图1-4NikeAir的视频效果同时，由于Flex在客户层的FlashPlayer展开使用，因此不存在不同平台不能兼容的问题。Flex独特的框架，使得用户UI设计更加容易、便捷。1.2.4Flex的工作原理Flex应用展开在Web上的工作原理，与以HTML为基础的网页应用有很大的差别。了解Flex的工作原理，就能够知道什么是Flex应用必要的工作元素，知道如何建立更好的用户友好的页面。图1-5第1章Flex概述·9·显示了Flex各类基础概念的总结，显示了源程序文件、编译器和FlashPlayer之间的关系。第一部分是Flex的源程序部分。Flex应用需要至少一个MXML文件或ActionScript类文件来构成Flex应用的源程序。图1-5Flex工作原理图1-6显示了Flex的工作流程。通常情况下，Flex应用包含了多个MXML和ActionScript类文件，以及需要嵌入的外部资源。MXML文件首先被编译为ActionScript文件，然后Flex需要将编译出的ActionScript文件和其他的ActionScript类共同生成为一个完整的SWF文件。在下一步中，如果生成了外包装的文件，就需要在HTML中运行此SWF文件；如果不生成外包装文件，可以直接在FlashPlayer上读入此文件。图1-6Flex工作流程外部资源也是Flex应用的一个组成部分，如CSS样式表单、图形文件等。外部资源可以在编译时嵌入到SWF文件中，也可以在运行时动态地加载。有时在运行时Flex的数据服务也是必不可少的，也就是说，运行时需要有可以获取数据服务的URL。外部资源（PNG、Gif等）外部资源（PNG、Gif等）MXMLActionScript3ActionScript+生成的ActionScriptAVM2二进制代码+外部资源源程序编译FlashPlayer