[注]本文节选自《开源技术选型手册》的RIA篇章。该书已由电子工业出版社博文视点公司出版。 购买请点击这里：http://www.china-pub.com/39918
感兴趣的朋友也可以从InfoQ中文网找到这本书的精选版：http://www.infoq.com/cn/minibooks/open-source-tools-choice 

综述

随着Web技术的发展以及Internet的日益成熟，人们对Web应用程序的要求日益提高，希望其承载更多的业务逻辑，帮助人们处理日常生活、工作、学习中的一些问题。后续的，随着无线网络的普及，随时随地通过无线网络访问Web站点将成为一种可能甚至必需。但是因为Web模型是基于页面的模型，缺少客户端智能机制，所以到目前为止Web应用程序对完成复杂应用方面始终跟不上步伐，整体的用户体验效果与桌面应用程序仍然有差距。

传统的Web应用程序是基于页面跳转模型的，每一个任务操作由一个或者多个页面组成。典型的，如果某个操作任务是多步骤或者多选项的，那么要么需要一份很长的页面，要么使用分页而让用户在多个页面中跳转。这种处理方式导致用户花费大量的时间在等待页面的跳转和重载刷新，这种缓慢、不自然、混乱的用户体验过程和效果经常让用户感到懊悔和苦恼。另外一方面，传统的Web应用程序也无法表达复杂的人机交互过程比如游戏，这种人机交互需要在用户行动、快速移动或者情节不断变化的时候在屏幕上不断的反馈。不断的重载刷新页面肯定是一种最糟糕的处理方式了。

在这种背景下，RIA（Rich Internet Application）的思维和技术逐渐得到了广泛的支持和应用。RIA结合了桌面应用程序的在数据交互、用户界面表现、数据格式编排等方面的优点，又兼有Web应用程序的零部署、易于传播等特性，能够有效改善Web应用程序的人机交互效果，向用户提供更丰富、更具有交互性和响应更快的用户体验。

与传统的纯HTML应用程序相比，RIA能够提供一个强劲的技术平台，使浏览器客户端的能力往桌面应用程序中的客户端靠近，不仅适合传统的三层乃至N层的开发过程，同时能够和原有的环境集成以延展原有的应用程序而不需要大规模的伤筋动骨的修改和更新。

关联信息

Macromedia Flex是比较成功和有效的RIA解决方案之一。今天，几乎大部分的浏览器上都安装了Macromedia Flash的浏览器插件，大量的Web应用程序都或多或少的嵌入了Flash的应用。而Macromedia Flex则是基于Flash的、一个构建RIA应用的完整解决方案，其能够使Web应用程序具备快速反映能力，并在不同状态与显示之间流畅的过渡，提供毫无中断的连续的工作流；由于搭建在Flash平台上，Flax在多媒体、视频、流媒体方面有更加突出的表现。更重要的是，Flex具有基于标准的架构，使用直观的基于XML的MXML来定义丰富的用户界面，可以运行于J2EE和.NET平台，能够与当前Web开发工具、方法、设计模式紧密配合。

Openlaszlo则是一个开源的RIA开发环境。使用Openlaszlo平台时，开发者只需编写名为LZX的描述语言（其中整合了XML和Javascript），运行在J2EE 应用服务器上的Openlaszlo平台会将其编译成SWF格式的文件并传输给客户端展示。从这点上来说，Openlaszlo的本质和Flex是一样的。Flash是任何浏览器都支持的展示形式，从而一举解决了浏览器之间的移植问题。而且，在未来的计划中，Openlaszlo还可以将LZX编译成Java或.NET本地代码，从而大大提高运行效率。

与Macromedia Flex不同，Ajax则是基于Javascript客户端脚本、XMLHttp对象、XML、XHTML/HTML和CSS等传统Web开发技术的另外一个RIA解决方案，其更强调基于纯数据的异步交互模式。2005年2月，Adaptive Path公司的Jesse James Garrett在其“Ajax:A New Approach to Web Application”（ http://www.adaptivepath.com/publications/essays/archives/000385.php ）一文中首次提出Ajax概念，极力向Web开发人员推荐这种综合使用Javascript、XHTML和CSS、DOM、XMLHttpRequest、XML和XSLT的技术。与很多开发人员一样，Garrett一直非常羡慕桌面应用程序在用户界面表现、人机交互、数据传输等方面的强大表现力，一直在寻求能够缩小Web应用程序在用户体验方面与桌面应用程序的巨大差距的解决方法。由于Google在Gmail、GMap、Google Suggest等站点的成功运用，Garrett相信Ajax就是其一直在寻找的宝贝。原来的Ajax有一个冗长的名字：异步的Javascript、CSS、DOM和XMLHttpRequest（Asynchronous Javascript+CSS+DOM+XMLHttpRequest）。Garrett扮演了“临门一脚”的角色，形象的称之为Ajax，即Asynchronous JavaScript and XML（异步JavaScript和XML）的缩写，这个形象简短的名字概括了这种技术的特点。Ajax已经引起的全世界的广泛关注和应用，而且，Prototype、Dojo、DWR等Ajax框架已经给Web应用开发领域带来了实实在在的贡献和影响。

Bindows 也是用Javascript和DHTML开发的Web窗体框架。Javascript用于客户端界面的显示和处理，XMLHTTP用于客户端与服务器的信息传输。Javascript在客户端的表现力不容置疑，利用Javascript几乎可以实现Windows应用程序所能干的大部分事情，XMLHTTP 一直以来常被用于实现"无刷新"的Web页面，它和 Javascript配合，可以完成数据从服务器和客户端的传输。Bindows的一个主要的缺点是它采用一次全部载入的方式来实现脚本库，在窗口的加载期，需要一个漫长的等待过程，甚至浏览器的进程会产生无响应的情况。这点Bindows根本没有遵循"用多少取多少"的准则。另外，内部大量利用了IE6 的技术，没有考虑到非IE的浏览器，限制了Bindows的流行。

在接下来的内容里，我们选取Flex和OpenLaszlo两个比较典型、相对成熟的RIA解决方案，探讨如何构建RIA应用程序。

Adobe FLEX总评（Rank）

上手容易程度	★★★★★
社区活跃度	★★★★★
应用广泛性	★★★★★
推荐指数	★★★★★

作为支持RIA的开发、部署一系列发展中的技术和产品线，Adobe Flex是Adobe在Flash基础上面向业界提供的RIA解决方案，其中包括Adobe Flex SDK、Adobe Flex Builder、Adobe Flex Data Services和Adobe Flex Charting等等。Flex向开发者提供一个熟悉的编程模型和一整套的产品和组件，使开发者能够充分发挥Adobe Flash Player9的优势，充分发挥Adobe Flash Player 9的优势，无缝扩展浏览器的性能，构建高性能、拥有绝佳用户体验效果的RIA应用程序，并且无缝的与ASP、JSP、PHP、ASP.NET等主流后台语言和架构集成。

功能和特点（Highlights & Features）Flex包含一系列可供设计、开发、部署的相关产品，包括：

lAdobe Flex 2 SDK (Software Development Kit)
lAdobe Flex Builder 2
lAdobe Flex Data Services 2
lAdobe Flex Charting 2

作为Adobe Flash技术的承续和发展，Flex采用GUI界面开发，使用基于XML的MXML语言，并提供多种组件，可以实现Web Services远程调用、远程对象访问、页面组件拖拽、数据网格、图标等等，并内建了动画效果和其他互动机制。相对于基于HTML的应用（比如纯JSP、ASP、PHT或者ASP.NET）在每个请求时都需要执行服务器的脚本，由于客户端只需要载入一次，Flex应用程序的工作流被大大改善了，更加适合于构建快速、具有动画效果、具备良好用户体验效果的RIA应用程序。

Flex试图通过提供一个程序员们已经熟知的工作流和编程模型，让程序员比以前更快更简单的开发动画和RIA应用程序。其能够与其他Web技术比如Java、.NET等有效的融合在一起，改善Web应用程序在视图层的表现能力，同时利用Flex的语言和文件结构把应用程序的逻辑从设计中分离出来。
在UI方面，Flex提供了包括控制组件、版面、导航、图表等在内的各个类别的丰富的组件，用于帮助开发者基于所见即所得的IDE快速构建 Flex应用程序。

背景介绍（Background & History）

蔡学镛先生在其《Flash平台的挑战》一文中将1990-2010这20年来软件开发的Framework/API划分为5个阶段：

l第一阶段：GUI和逻辑混在一起，不管客户端还是服务器端都是一样，比如MFC、Java Swing和Servlet。
l第二阶段：这个阶段中，服务器端的GUI和逻辑分开，比如ASP.NET和JSP。
l第三阶段：在这个阶段，Web客户端的互动性增强，比如ASP.NET和Ajax。
l第四阶段：RIA时代，客户端具有更好的互动性，并且客户端的GUI和逻辑分开，且GUI改用宣告的方式构建。RIA的应用搭配VM或者浏览器插件，在浏览器内或者浏览器外都可以执行，比如Adobe的Apollo或者微软的WPF。
l第五阶段：即RIA和DSL（Domain Specific Language）时代，DSL语言取代大部分的XML。

就目前而言，以Flex为代表的RIA解决方案越来越成熟，一些以视频共享、日程编排等为代表性的RIA站点也向其用户展示了RIA应用程序的魅力。事实证明，RIA正越来越受到重视，传统的Web应用程序也正在向RIA靠近。

作为老牌的多媒体解决方案供应商，Adobe在RIA解决方案上有独特的优势。Flash已经被整个业界所接受，并且得到了基本上所有主流浏览器的支持。因此，相比其他RIA解决方案，基于Flash的Flex推广起来自然容易得多了。

最近，Adobe在其官方网站上宣布将把Flex开源，将几乎整个Fle平台组件在Mozilla Public License协议下发布，这其中包括以下几个部分：

lFlex编译器
lFlex命令行调试工具
l源码查看工具
l测试框架
lFlex核心组件库，包括Apollo组件
l封装脚本
lFlex-Ajax Bridge（将会改用MPL协议发布）

随着越来越多的软件产品走入开源模式，事实证明开源对于产品的发展和开发者来说是双赢的。我们有理由相信，随着Flex的开源，Flex开发者和爱好者可以通过阅读研究Flex的源码，更深入的理解Flex并进一步增强它，从而利用Flex开发出更多更出色的RIA应用程序。而对于Flex产品本身来说，更多开发者的加入，能够让其拥有广泛的用户群体，并且利用最小的成本得到最佳的完善和发展，加速Flex的普及。

原文出处：http://www.blogjava.net/eamoi/archive/2008/08/01/219341.html

感谢原创者的辛勤劳动，希望对您有所帮助，转载请注明原出处。

您可能对 [Java] 的这些文章也感兴趣： 使用Java控制UDP协议 DB2 J2EE开发成本收益分析(一) 用Struts开发基于MVC的Web应用 Apusic Operamasks的资源注入 用Rational Rose和UML开发J2EE应用(一) JavaScritp入门：编写一个简单的JavaScript程序 JVM救不了Java 品味Java子类型多态的魅力 Java实现各种排序 经典大放送 java初学者到精通需要掌握的知识

参考资料（Reference）

★网站类
（1）Adobe – Flex开发人员中心 http://www.adobe.com/cn/devnet/flex/
作为官方的开发人员中心，该站点提供了丰富的快速入门、文章和示例，以帮助开发者快速熟悉Adobe Flex的各项功能、特性，由浅入深的掌握Flex的开发和部署，以及在必要的时候与包括Java、PHP、CoLDFusion等技术无缝集成。


（2）52RIA http://www.52ria.com/
该站点专注于Flash RIA开源领域，面向开发者提供优质的Flash RIA开源作品、教程和源码。难得可贵的是，52RIA提供的RIA站点秀，在第一时间向开发者展现了Flex RIA的实际应用效果。


（3）中国RIA开发者论坛 http://www.riachina.com/
中国RIA开发者论坛，是全国数一的关于Flex的讨论社区，里面隐藏着众多的高手，而且很多已经参加了工作并在实际项目中。如果读者在Flex开发中遇到什么问题，可以在这个论坛找到答案或者寻求帮助。


（4）RIA Dev http://groups.google.com/group/riadev
该站点是基于Google论坛的联系两岸三地的关于Flex/Apollo的华人论坛社区，它所表现的优势在于只要一提出问题，它将以邮件的方式以最快的速度发到每位成员手中。其目的希望联系全球对Adobe Flex/Apollo感兴趣的华人，促进Adobe Flex/Apollo在华文世界的发展。


（5）FlexCoders http://tech.groups.yahoo.com/group/flexcoders/
全球最大的Flex用户讨论组织，只要是关于Flex的问题，读者都可以在这里提出，而且常常回答者都是Adobe公司参加或者跟Flex相关的工作人员，当然前提条件是要具备良好的英语阅读能力和表达能力。


（6）Flex Components http://tech.groups.yahoo.com/group/FlexComponents/
FlexCoders 的同胞兄弟，这里讨论的侧重于Flex控件的问题。


（7）Adobe Flex实验室 http://labs.adobe.com/technologies/flex/
作为Adobe Flex新技术的研发中心，Adobe Flex实验室负责Flex新版本的研发和发布。自然，从该站点能够了解到最新有关Flex的资讯，以及最新版本Flex的相关下载。


★网站类
（1）《Flex第一步》http://www.dearbook.com.cn/book/230729
邱彦林
著，清华大学出版社，2007年12月第一版
作为国内第一本Flex的书籍，该书包含“走近Flex”、“Flex基础知识”、“ActionScript和Flex”、“Flex初级程序开发”、“Flex程序实战开发”五个部分，深入浅出的讲述了Flex及其ActionScript的相关知识，比较适合对Flex有兴趣的初学者。虽然对于大多数Flex开发者而言，该书在某些内容上不够深入，但将其定位为“入门级”的读物，其表现还是可圈可点。


快速上手教程（Step By Step Tutorial）

关于Flex 2之前提到，Adobe Flex产品线包含Flex 2 SDK、Flex Builder 2、Flex Data Services 2和Flex Charting 2。


其中，Flex 2 SDK是Adobe Flex的核心和基础，其包含Flex框架（类库）、Flex编译器、Flex调试器、MXML和ActionScript编程语言以及其他扩展，同时包含Adobe Flex框架核心类库的源码，用户可以研读这些源码并基于自己的需要进行扩展。Adobe Flex 2 SDK可以作为独立的包安装，也集成在Flex Builder和Flex Data Service组件中。


Flex Builder集成了Flex 2 SDK、Flex应用模型和Flex编程语言，向开发者提供一个可视化的IDE设计、开发、调试环境。值得注意的是，Adobe选择Eclipse作为Flex Builder的平台，能够吸引以Eclipse为代表的开源社区的关注和兴趣，充分发挥基于Eclipse的大量商业和开源的插件的优势，也有利于延续Eclipse用户的开发习惯。与早期的Flex Builder版本相比，Flex Builder 2提供了一个所见即所得的开发环境，包括视图和源码两种编辑状态，大大提高了开发者的开发效率。如下图所示。





 附件: 您所在的用户组无法下载或查看附件



 附件: 您所在的用户组无法下载或查看附件


Flex Data Services则为Flex 2 SDK提供企业级的消息支持，并增强Flex 2 SDK的数据服务架构，简化了在服务器和客户端之前交互的编程模型。其提供的功能和特性包括：


l一个允许客户端和服务器端之间或者多个客户端之间同步数据的高层次的编程模型。
l用于发布和订阅消息的集成服务。
l基于服务器的自动数据推动和数据流。
l一个用于集成JMS、Hibernate、EJB和其他数据持久化机制的适配器架构。
l允许客户端操纵数据源的授权。
l基于AMF协议的远程对象访问。
l数据服务日志。


值得注意的是，在使用Flex Data Services之前，我们需要将其以标准的Java Web应用程序部署在J2EE应用服务器或者Servlet容器中。

Flex Charting 2提供了丰富的报表模型，包括条状、饼图、线性和其他类型的图表，这些报表可以在客户端动态生成。下图展示了一个用Flex Charting 2生成的条状图。

 附件: 您所在的用户组无法下载或查看附件

MXML和ActionScript

与HTML类似，MXML是在Flex应用程序中用作版面规划和布局的XML语言，Flex Builder 2能将MXML文件编译为相应的Swf文件。MXML提供了提供了一系列与Flex框架类对应的标签，以帮助开发者构建可视化的页面元素，比如容器、导航器和其他UI控件。MXML同时也被用来定义一些不可见的特性，比如访问网络资源、访问数据源、数据绑定等等。

ActionScript则是基于ECMAScript、与Javascript类似的另一个Flex编程语言，其提供MXML所无法提供的流控制、对象操作、与客户端交互等特性。MXML与ActionScript结合，构成Flex应用程序基本的编程模型。在Flex应用程序中，每一个MXML文件代表一个单独的Flex页面。下面的代码段使用MXML和ActionScript语言构建一个简单的Hello World页面。



Hello World接下来我们通过一个Hello World示例演示一个简单的Flex应用的开发过程。
启动Eclipse，选择“New”à“Project”à
“Flex Project”，点击“Next”后在“New Flex Project”对话框中选择“Basic（e.g. XML or web service from PHP/JSP/ASP.NET）”选项，点击“Next”后输入项目名称（这里设置为MyFlexApp），新建一个基本的Flex应用程序。Eclipse将打开默认的Flex设计视图窗口，如下图所示。编辑窗口分为项目导航区域、Flex组件区域、项目编辑设计区域、控制台区域、属性和状态区域等几个部分，这点与普通的Java应用程序类似。



 附件: 您所在的用户组无法下载或查看附件

创建成功后，Eclipse将新建一个完整的Flex应用程序结构，包括.setting、bin、html-template三个文件夹以及一个默认的MyFlexApp.mxml文件。Flex将每一个mxml文件视为一个单独的页面，每一个mxml文件最后将被编译为对应的swf文件。

从Flex组件区域拖动一个Button控件到设计区域，在属性区域中设置其ID为“myButton”，Label属性为“Click Me!”。拖动一个Label控件到设计区域，将其ID属性设置为“myLabel”。

点击项目编辑设计区域左上角的“Source”按钮，切换到源码视图。此时MyFlexApp.mxml的内容如下所示。



MyFlexApp.mxml符合标准的XML格式，以<mx:Application>作为根节点，其内容包含页面中所涉及到的UI组件以及必要的ActionScript代码。我们注意到，刚才拖入的Button控件和Label都包含了x和y属性，这两个属性用于控制该控件在页面中的相对位置。

为myButton设置click事件，其响应代码为“myLabel.text=’Hello, the world.’;”。修改后的MyFlexApp.mxml代码为：



即当点击myButton按钮的时候，将myLabel的文本替换为“Hello, the world.”。鼠标右击MyFlexApp项目，选择“Run As”à
“Flex Application”，运行Hello World范例，其结果如下图所示。



 附件: 您所在的用户组无法下载或查看附件

在上面的应用中，我们将Button的响应事件和控件的代码写在一起。Flex支持将与响应事件有关的代码剥离出来，包括剥离到ActionScript区域或者独立的as文件中。下面的代码段将Button的Click事件剥离到ActionScript区域。



通常，Flex应用程序开发的步骤如下所示：

l使用Flex预定义的组件（窗口、按钮、容器、网格等），按照需求定义一个用户界面。
l使用风格和主题来定义可见的设计。
l增加动态动作，如应用程序之间的互动。
l定义并在需要的时候连接相应的数据服务。
l从源码生成一个可以在Flash播放器中运行的Swf文件。


版本信息（Versions）

Adobe于2004年3月发布Flex1.0版本，随后与童年的10月发布Flex1.5版本，这两个版本的目标市场都是企业应用开发。其最初是作为一个J2EE应用，或者是JSP标签库而发布的，能够就爱能够运行中的MXML和ActionScript编译成为Flash应用程序即二进制的Swf文件。

Flex1.5是企业级的表现层服务器，用户将所编写的MXML文件上传到服务器，由Flex编译器将MXML编译成Swf文件，从而创建表现层界面。或者直接在本机编译MXML文件，然后上传Swf文件。Flex1.5 IDE基于Dreamweaver提供，实现了设计和代码视图、高亮语法显示、代码锁紧、应用预览等基本的IDE功能。

2005年10月，Adobe开放了其Alpha本本的Flex2.0，并在经历了三个Beta版本后于次年的5月份发布了Flex 2.0 Final版本。随后，Adobe改变Flex2的许可模式，免费开放其中的“Flex Framework”。不同的是，新版Flex Builder2基于Eclipse IDE构建，充分利用Eclipse IDE的功能和特性，为Flex爱好者提供高效的开发、测试和部署环境。

2007年6月，Adobe发布了Flex 3 SDK和Flex Builder 3 Beta版本，同时将Apollo更名为Adobe Integrated Runtime，即Adobe AIR。Flex 3 Beta 3是Flex 3的最后一个Beta版本，其中包括Flex Builder 3 Beta 3、Flex SDK 3等。与其他版本相比，Flex3改进和更新的部分特性包括：
l对设计/开发流程的改进
Flex 3中提供了Skin Importer，可以缩放、旋转设计视图，可以显示ItemRenderer的设计视图，Advanced Constraints、CS3整合、CSS概要以及Flex 3 SDK style/skinning等诸多改进。这些改进使得整个设计/开发流程更加简单，Flex程序的Skinning功能也更加强大。
l对编码环境的改进
这次改进提高了编译速度，缓存已编译的类，提供更强的AS3/MXML/CSS语法提示、代码查找、重构、代码摘要、内存测量、性能测量等功能，增强了模块机制以及多个SDK支持等等。
l对Flex组件和SDK的改进
提供了更多的类、组件和功能，比如AdvancedDataGrid、新的集合类、深层链接接口、资源包、动态本地化、支持容器的Flex Component Kit for Flash CS3等等，并且加强了与Ajax的整合，提供了高级视觉效果和对复杂的资源管理。
l显著的减少Swf文件的大小
由于支持对Flash Framework的缓存，Flex编译器所生成的Swf文件大小显著减小。


社区视角（Community Perspective）

作为一个典型的RIA解决方案，Flex可以说是目前最优秀的。从Flex 1.0到现在被普遍接受的比较成熟的Flex 2.0，Flex逐渐证明了Adobe在RIA领域的领跑者地位。将来随着Flex 3的推出，可以预计Adobe将继续在RIA领域处于领先的地位。

需要指出的是，目前RIA的应用毕竟还是在相对有限的范围，Adobe依然需要在培育市场和开发者上多下功夫。最近Adobe将Flex开源，就希望借助开源社区的力量推动Flex的快速发展。不过目前Flex Builder 2依然采取免费试用+收费的模式，这在一定程度上限制了吸引力。而且与其他成熟的IDE相比，Flex Builder 2在编译、人性化、易用性等方面依然存在差距，这方面还需多加努力。