Flex 新一代富客户端技术浅析

1、Flex 新一代富客户端技术浅析.txt你站在那不要动！等我飞奔过去！雨停了天晴了女人你慢慢扫屋我为你去扫天下了你是我的听说现在结婚很便宜，民政局9块钱搞定，我请你吧你个笨蛋啊遇到这种事要站在我后面！跟我走总有一天你的名字会出现在我家的户口本上。Flex 新一代富客户端技术浅析Posted on 2009-05-18 15:42 莫问奴归处 阅读(3054) 评论(2) 编辑 收藏 所属分类: 学习笔记1.概述回顾网络应用开发领域，早期是C/S，后来逐渐过渡到B/S，再到以Ajax为核心的Web2.0，如今新一代的富客户端技术又重新归来，在这场新一轮的技术革新中，各大公司和开源社区都纷纷推出了

2、自己的产品。目前具有代表性技术有微软的Silverlight/WPF、Adobe的 AIR/Flex和Sun的JavaFX，以及开源社区的Laszlo。Flex及AIR 是Adobe公司推出的基于开源、免费、跨平台的新一代富客户端平台。这种新型的富客户端能够提供和早期C/S技术一样出色的UI，但又和B/S一样不需要在用户的机器上进行任何部署，也不需要手动对应用程序进行版本更新。Adobe的富客户端技术为AIR和Flex， 其核心以ActionScript语言为基础，运用XML来描述界面。Adobe的RIA为终端用户提供了两种解决方案：Desktop应用和Web应用。对于Desktop应用，需要

3、安装Adobe的AIR作为其运行平台(Runtime)，这时Rich Client程序如同本地的程序一样运行，这种方式类似于Java应用程序，AIR相当于Java 运行环境(JRE)；对于Web应用，Adobe的Flex程序运行于内嵌在浏览器中的Flash Player上，借助Flash Player的良好普及率，Adobe实现了其统一的、跨平台的承载平台，和传统的C/S相比，继承了其界面丰富、操作性强等优点，而又摒弃了其需要手动安装、配置、升级等缺点。Adobe借助Flex/AIR在RIA领域的巨大成功、以及依托Flash Player的广泛的普及率来推广其新一代富客户端技术，使微软看到了下

4、一代互联网和应用开发框架的美好前景，适时的推出了与Adobe Flash Player相类似而又相对抗的产品Silverlight/WPF，在微软的解决方案中，WPF是.NET Framework 3.0的组成部分之一，它是一套基于XML、.NET Framework、向量绘图的展示层开发框架，微软视其为下一代用户接口规范，将广泛被用于下一代的Windows平台的界面开发，这样微软也将逐渐淘汰以GDI 、GDI+、MFC等为代表的Win32 API。WPF可以编写Web程序或者桌面应用程序，可以直接编译为独立运行的exe文件，WPF运行时必须安装.NET Framework 3.0，这就要求W

5、PF目前运行的操作系统必须是Windows Vista或者Windows XP SP2以上。而Silverlight为WPF的子集，是基于浏览器的插件，在浏览器中运行，客户端无需安装.Net Framework，其运行环境不受操作系统和浏览器的种类限制。虽然相对于Adobe的解决方案微软推出较晚，但这也是目前在RIA领域最为强劲的后起之秀。JavaFX是Sun公司推出的RIA技术解决方案，其前身为F3项目。和早期的 Applet、Java Web Start等技术一脉相承，JavaFX其实同样以Java Swing为基础，运行于Java 虚拟机之上。但与原来的Java语言有所不同的是JavaF

6、X是一种全新的脚本语言，为开发者提供了更加简洁、快速的GUI API。JavaFX与前两者最大的不同也就在于其使用的是DSL，我们虽然熟悉SQL这样的DSL语言，但将DSL引入GUI开发还是尚属首次，DSL 的语法更适合GUI的本质，因此从语言的角度来说，JavaFX比.NET和ActionScript更为先进。但与前两者相比，JavaFX无论在推出的时间还是产品里程上都远落后于对手，其技术解决方案的成熟度也稍逊于其它两种产品。本文内容着重以Adobe的RIA解决方案Flex技术对RIA技术进行介绍。1.1 Flex发展历程Flash Player最早为Macromedia公司产品，作为因特网

7、页的矢量动画平台，早期的Flash Player主要是面向娱乐功能和多媒体应用。其后推出了ActionScript语言做为补充，通过ActionScript可以对Flash Player中的动画和控件进行更为复杂的逻辑控制。2000年8月Macromedia 推出了Flash 5.0，并推出了全新的ActionScript语言，这是ActionScript的一次飞跃，ActionScript的语法已经开始定位并发展成为一种完整的面向对象的语言，并且遵循ECMAScript的标准。随后2004年Macromedia推出被收购前的最为经典的版本Flash MX 2004，在这个版本中ActionS

8、cript升级为2.0版本，改造了ActionScript 1.0中的不完善，使其完全支持Class、Interface等面向对象的语法表达，第一次真正意义上具有了和Java、C+一样的编程能力，同时第一次引入了Flex的概念，即Flex 1.0。2005年12月Adobe收购Macromedia公司，由此带了的巨大变革，Adobe将其打造为新一代的RIA，2007年3月27日发布了Flash 9.0，Flash 9.0支持全新脚本语言ActionScript 3.0，ActionScript 3.0是Flash/Flex历史上第二次飞跃，从此以后，ActionScript终于被认可为一种“正

9、规的”、“完整的”、“清晰的”面向对象语言。新的ActionScript包含上百个类库，这些类库函盖了图形、算法、矩阵、XML、网络传输等诸多范围，为开发者提供了一个丰富的开发环境基础。随着ActionScript3.0而来的是新的Flash RunTime虚拟机(VM2.0)，VM2.0的运行效率是VM1.0的几倍。在这个版本中同时推出Flex 3.0和引入AIR的概念。可以说是对Macromedia的原有产品彻底的一次升华，变化如此之大，以至于ActionScript 2.0到ActionScript 3.0间、Flex 2到Flex 3、VM1.0到VM2.0间并不兼容。针对Flex/A

10、IR的开发，Adobe公司出品了基于Eclipse的Flex Builder 3.0。Flex大事记：? Flex 1.02004年1月发布? Flex 2.02006年7月发布? Flex 3.02008年2月发布1.2 Flex编程与Flash制作虽然对于Flex应用和多媒体应用都运行于Flash Player这一同一平台，但对于动画、影音等多媒体应用仍然的是美工或媒体制作者的工作，而Flex应用编程则完全是程序员的工作，可以说是两套面向不同需求的应用开发。在Flex的GUI编程中提供了和Java、.NET、VB、Delphi中相类似UI控件，诸如：输入框、按钮、树、面板、表格、菜单、日期

11、、进度条、各类选择框等，并与这些传统语言相类似的界面控制机制，诸如：消息、触发动作(Action)等。一个熟悉Java编程的开发者，很容易过渡到Flex的开发，ActionScript语言本身、甚至Flex中提供的很多类库都和Java相类似。从另外一个角度来看，一个Flex开发者完全不懂Flash制作也没有任何问题，Flex应用仅仅是运行在Flash Player上而已。当然做为Adobe的统一解决方案，Flex开发并不排斥对影音和动画等媒体的操作，实际上两者可以完美的结合。2 Flex技术分析与以往纯B/S技术不同，Flex是结合了B /S与C/S技术优点的新一代富客户端技术。2.1 新一代

12、富客户端的技术特点1. 可操作性方面：Flex富客户端的界面和操作性将能够和传统的C/S相媲美，提供更丰富、更友善、易用性更强的界面给用户，同时互动性更好，而开发效率却大为提高；特别是Flex内建对音频和视频(包括H.264技术)的支持，给用户提供更好的操作体验。之所以Ajax会大行其道，就是因为Ajax的出现可以弥补传统B/S在界面友善方面的不足，例如Web2.0中普遍提供了一个页面中可以多个Tab的切换，给用户带来更多的方便，但对于更复杂的操作模式则无能为力。而新一代的富客户端如同传统C/S应用一样，可以提供更为复杂的界面，同时其数据持有能力也更强。2. 架构方面：用XML来描述GUI的外

13、观，GUI和逻辑相分离，真正意义上的MVC，使得应用开发的结构更为清晰。前端界面使用XML来描述，界面的控制由 ActionScript来负责，后端的应用逻辑则封装在后端中间件中，与Flex前端界面相分离。3. 可拓展性方面：Flex做为前端的客户组件，非常容易与各类后端技术相结合，例如AMF、PHP、Java、.Net、ColdFusion等，这样后端应用服务可以规划为类似的“中间件”组件，将业务逻辑封装其中，中间应用服务组件的选择预留给用户极大的选择空间，方便而灵活。4. 从运行的环境方面：程序可以在浏览器中，也可以运行在浏览器外，极大拓展了应用的使用场合。新一代富客户端可以根据需求更加灵

14、活的部署。5. 在性能方面：传统的B/S有各种方式来提高应用服务器的效率，但Flex框架的解决方案与此不同，能够在性能方面有更大的提升。众所周知，传统Web应用客户端每次刷新页面都会对服务器产生请求，服务器要将新的HTML和HTML中包含的图片传递给Client，当请求数量较大时，动态生成HTML及下载图片的过程都会严重地消耗着服务器的资源(CPU、IO、Memory、Network)。而新一代富客户应用是通过第一次运行时将应用一次性下载到本地，所有的GUI都在本地运行，运行过程中只产生少量的数据更新请求，而不需要服务器端实时地产生刷新的页面，也就不存在服务器对HTML等内容的动态构造，这样后

15、端服务器将完全专注于数据逻辑的处理，这样充分利用客户端本地机器的CPU，并最大限度的减少网络带宽。6. 在开发效率方面，Flex的界面编程技术更类似于VB或是Delphi，开发中所见即所得，比起修改ASP、JSP、PHP和Javascript所表现的界面有极高的开发效能，而Flex采用ActionScript是面向对象的语言，是一种和Java、.NET相其类似的语言，对于Java或.NET 程序员来说Flex技术很容易上手，学习和整体维护成本很低。7. 能够与视频、音频等多媒体完美结合。Flex内建视频、音频等多媒体原生组件，因此为程序员提供了方便、易用的API。特别是最新的更新中已经包含了对

16、 H.264编码协议的支持。8. 和B/S相比，Flex能够更方便的实现全双工的消息通信。对于某些特定的应用，需要实时从服务器Push消息给Client，Flex提供了方便的解决方案，突破了传统的HTTP消息基于Get/Post被动请求的模式。Flex框架分析图21 Flex的基本结构Flex是一套Adobe的RIA技术的集合，Flex应用在多层架构中做为表示层。Flex包括：Flex SDK、Flex Builder、Flash Player、LiveCycle Data Service、ActionScript、MXML。? Flex SDK就如同Java的JDK一样，为开发人员提供了一个

17、免费的开发套件，同时这也是一套开源项目。开发者可以通过Flex SDK开发完整的RIA应用。? Flex Builder是Adobe公司为开发Flex/AIR应用而提供的IDE，是一款商业收费软件，最新版本为3.0，其中包含了Flex SDK。Flex Builder中还包含Flex Charting，即Flex的图表，提供了丰富的图表控件，诸如：折线图、饼图、柱状图等? LiveCycle Data Service是Adobe提供的商业付费组件，内置数据管理服务，Flex-Ajax桥接，Jave消息服务(JMS)适配器以及实时协作工具的企业级技术? MXML是宣告式的、基于XML的界面描述语

18、言，用来表达UI布局和相关动作。在Flex技术中，前端的界面由MXML来描述，控制逻辑由 ActionScript来负责，通过二者有机的结合来完成整个GUI的开发在如图21 中一个典型案例中，中间层可以采用Java、PHP、.NET、ColdFusion和BlazeDS等技术，和Flex的通讯可以采用AMF或HTTP 协议，AMF（Action Message Format）协议是一种二进制格式，专门用于ActionScript和后台服务器端的通信，比HTTP通信的速度要快很多，而且支持多种数据类型，对于Java、.NET、ColdFusion、PHP等编程语言都有相应的Remoting服务器

19、端。通过Remoting服务端接口，ActionScript直接调用服务器端对象的方法，弥补了客户端在和数据库服务器通信以及文件操作等方面上的不足。例如，Flex提供的基于 Java的数据服务器Flex Data Service(简称FDS)，可以很方便地让用户部署自己的Java后端应用程序。2.2.1 BlazeDS与AMFBlazeDS是由Adobe公司开发并提供的一套中间层技术解决方案，BlazeDS是基于Java远程调用和Web消息通信的组件，BlazeDS实际上是一套Java应用，运行在 Server端。这样就和前端Flex的应用相分离，将业务逻辑封装其中，为前端Flex和后端数据库

20、建立起中间桥梁，BlazeDS相当于J2EE中的中间件。BlazeDS已经开源，并运行在Tomcat容器中。AMF是Action Message Format的缩写，是Adobe公司定义的协议，AMF是BlazeDS与前端Flex应用通信的方式之一，BlazeDS和前端通信还可以采用 SOAP或HTTP等其它协议。与这些通信方式不同，AMF采用二进制的编码方式，并采用Zlib对消息进行压缩，AMF消息体的大小只有基于XML协议的十分之一。因此在需要大量传输消息的场合，和纯文本协议相比，AMF是一种高效率的传输方式。同时AMF也为开发者提供了一种便利而快速的通信开发接口，它可将前端Flex中本地

21、对象(例如：Object、Array、Date、XML等)传给Server端时自动适配成Server端适当的对象。例如：如果Server端是PHP应用，则AMF会自动转译为PHP的Associative Array；如果Server端是Java应用，则AMF将其转换为Java的数组。2.2.2 Adobe AIR介绍Flex 3.0中最大的变化在于新增AIR工程，AIR是Adobe富客户端的桌面应用解决方案，早期代号Apollo，Adobe将其定位为一个跨平台的客户端系统运行环境。Flex应用、多媒体Flash、Html和Ajax通过AIR可以部署为桌面应用，因为要支持对本地资源的操作，所以F

22、lex 3.0中新增许多对本地资源的操作，如本地文件、PDF文件等。另外，AIR应用程序支持版本升级、集成网页、使用Ajax技术等。在Flex 3.0中的AIR工程中新增HTMLControl类和HTMLPDFCapability类，通过这两个类可实现加载PDF文件，丰富了AIR应用程序的效果和功能。2.3 Flex开发下面以我们开发的一个技术交流网站为例，对Flex开发中的一些技术点做介绍。2.2.1 浏览器的前进/后退和浏览器的历史对于普通HTML的网页，浏览器提供中“回退”、“前进”按钮来控制浏览网页的历史，在Flex中同样可以控制浏览器的历史。在Flex 3.0中增加了一个新类Brow

23、serManager，专门用来控制浏览器的历史，通过截获浏览器的控制消息来实现相应的动作。2.2.2 Flex和HTML间的变量传递Flex中可以嵌入 HTML，HTML也可以嵌入Flex，这样Flex和HTML间的信息交互是Flex开发中不可避免的题目。Flex中嵌入HTML较为容易实现，此时 HTML做为Flex控件中的一部分展现出来；而HTML中嵌入Flex的通信则相对复杂些，这里以此为重点做介绍： 1. 在HTML中首先要通过Javascript对要传递的变量进行定义，并将变量传递给Flash<script language="JavaScript" type

24、="text/javascript">var flashvars = "bookid=$bookid"AC_FL_RunContent("src", "testParameter","flashvars", flashvars,"width", "100%","height", "100%","align", "middle","id", "

25、testParameter","wmode", "opaque","quality", "high","bgcolor", "#869ca7","name", "testParameter","allowScriptAccess","sameDomain","type", "application/x-shockwave-flash","

26、pluginspage", "");</script> 1. 在 ActionScript中取得该变量private function getParams():void private var bookid:String;/获得参数var params:Object = this.parameters;if (params != null) bookid = params"bookid".toString();initApp(); else Alert.show("No params");2.2.3 Flex开发环境除了 Adobe提供的商业IDE Flex Builder外，仍有一些免费的开源IDE可供使用，其中以FlashDevelop最为著名，在功能上毫不逊色，目前已能完整支持AIR，最新版本为 FlashDevelop 3.0.0 Beta 8。此外Flex Builder中的图表(Charting)功能也属于收费项目，对于一般的开发者和商业用户来说，也有开源解决方案Open Flash Chart来替代，提供诸如饼图、柱状图、折线图和三维效果的图表