`
ptz235je
  • 浏览: 16837 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

基于FLEX技术的应用架构设计及其应用

 
阅读更多

基于FLEX技术的应用架构设计及其应用
2011年03月22日
  基于FLEX技术的应用架构设计及其应用
  张文
  摘要:FLEX技术应用不仅满足了人们对WEB应用程序日益提高的需求,它还能兼容原有系统的业务处理模块,这使得原有产品无需重新开发。本文以FLEX工作模式、FLEX常用架构设计、FLEX部署、FLEX应用四方面由内而外的方式,阐述了FLEX工作原理,以及目前FLEX的应用现状。论述了FLEX在RIA技术应用领域的优越性,希望能带给读者一定的帮助。
  [b]
  1           引言伴随着Web技术的发展以及 Internet 的日益成熟,人们对 Web 应用程序的要求日益提高,希望其承载更多的业务逻辑,帮助人们处理日常生活的一些问题。后续的,随着无线网络的普及,随时随地通过无线网络访问 Web 站点将成为一种可能甚至必需。但是因为 Web 模型是基于页面的模型,缺少客户端智能机制,所以到目前为止 Web 应用程序对完成复杂应用方面始终跟不上步伐,整体的用户体验效果与桌面应用程序仍然有差距。在这种背景下,RIA( Rich Internet Application )的思维和技术逐渐得到了广泛的支持和应用。 RIA 结合了桌面应用程序的在数据交互、用户界面表现、数据格式编排等方面的优点,又兼有 Web 应用程序的零部署、易于传播等特性,能够有效改善 Web 应用程序的人机交互效果,向用户提供更丰富、更具有交互性和响应更快的用户体验。
  2           FLEX介绍2.1       RIARIA(Rich Internet Applications)富互联网应用,具有高度互动性、丰富用户体验以及功能强大的客户端。
  目前RIA应用技术中主要有四种主流技术,分别为Flex、JavaFX、Curl、SilverLight。就技术本身而言,四种技术各有千秋。
  Flex是排版打印软件和图形渲染软件巨头Adobe公司在其著名的Flash平台(Flash Player)上,用ActionScript语言开发的一套RIA软件开发套件(SDK)及其集成开发环境。
  Flex SDK由Flex框架类库、Flex编译器、调试器、MXML和ActionScript编程语言以及其他工具组成。从开发出的产品层面来看,经过编译后的Flex应用和组件库是一系列可以运行在Flash虚拟机中的SWF文件。SWF文件由一系列有顺序的“帧”(Frame)构成,“帧”中包含编译后的ActionScript字节码以及所需的数据,比如图像、声音和视频。Flash Player按照“帧”的先后顺序,“试图”以固定的频率执行每一帧中的代码,以显示图形或者播放动画及语音。
  相对于其他RIA技术,FLEX有以几个方面的优势:
  1.完整的浏览器可移植性:任何支持FlashPlayer的浏览器(涵盖了大部分浏览器)都支持Flex及其脚本语言ActionScript(AS);
  2.一致的观感:Flex使用的是FlashPlayer引擎,所以它也将提供一致的观感;
  3.二进制数据通信:Flex客户机和后端服务器之间的二进制数据传输提供完整的支持;
  4.客户端缓存:Flex对客户端缓存提供强大的支持;
  5.流线化(Streaming):Flex优势是对流线化二进制数据提供出色的支持;
  6.调试和编辑器支持:Adobe开发了一个健壮的、基于Eclipse的编辑器FlexBuilder,它大大简化了Flex应用程序的开发和调试。
  2.2       Flex工作模型Flex编译后的程序(SWF)在Flash Player(Flash虚拟机)中通过两个主要部件模块执行,如图1所示。
  图1 Flash Player组成
  ActionScript虚拟机负责执行编译后的ActionScript字节码,而图形渲染引擎则用来绘制“显示列表”(Display List)中的图形对象。
  2.2.1    Flash Player的帧执行模型在Flash Player中,ActionScript字节码的执行与图形渲染是两个完全分离的过程。Flash Player播放每一帧时,都按以下步骤进行:
  a.Flash Player发出事件(Event)
  b.用户代码被执行
  c.RENDER事件被派发
  d.最后的用户代码被执行。
  2.2.2    Flash Player渲染模型Flash图形渲染引擎在屏幕上渲染出的“树”状结构的图形对象,只有在显示列表中出现的显示对象才能在屏幕上出现。当显示对象从显示列表中移出后,它就不能在屏幕上显示。显示列表树状图如图2所示。
  图2 显示列表树状
  处理步骤如下:
  a. Flash在首次加载SWF时会自动创建一个“舞台”(Stage)显示对象,然后自动将这个舞台对象加到显示列表中。
  b.查找SWF文件的主类,然后创建SWF文件主类的实例,并将SWF文件主类的实例作为舞台对象的第一个孩子添加到舞台对象的显示对象列表中。
  c.SWF文件主类加载自己的显示列表中的显示对象,从而形成完整的显示列表。
  3           Flex应用结构设计Flex On Java整体架构通常可划分四层,分别为展现层、外观集成层、业务领域层、数据层。如图3所示:
  图3 Flex On Java 系统结构
  3.1       展现层展现层负责呈现各类数据信息与收集各类用户交互数据信息。
  通常情况下展现层应从操作逻辑、界面美观两方面着手,力求在感觉(听觉、视觉等)与情感方面都能得到用户的认可。在本架构中,展现层所有呈现数据(VO:值对象)原则上应与外观集成层数据(DTO:数据传输对象)一一对应。既遵循VO/DTO设计模式,所有展现层呈现的数据信息,都有一组数据信息在外观集成层与之对应。这样的好处是多方面的,可以降低网络数据传输负担、使展现层与业务领域层耦合度降低。采用此模式对于后期业务的变更与拓展也有着深远的意义。
  上述的VO/DTO模式在EJB等领域被广泛应用,提到了VO/DTO模式就不得不说远程外观(Remote Facade)模式。在实际应用中Remote Facade则是客户端系统与服务端系统之间的接口,Flex客户端使用RemoteObject对象通过BlazeDS框架调用服务器端的Remote Facade对象中的方法,Remote Facade对象方法则调用“领域层”中“领域对象”或“领域服务对象”的方法完成客户端的请求。
  3.2       外观集成层外观集成层主要负责将业务领域层提供的DTO(数据传输对象)通过中间件(BlazeDS)与展现层交互。
  外观集成层如无特殊情况下将业务领域层提供的数据进行过滤处理,只提供展现层所必须的数据对象。此数据对象(DTO:数据传输对象)只具备基本API方法(例如:GET、SET方法),DTO对象中不涉及业务逻辑处理。外观集成层数据对象(DTO:数据传输对象)通过BlazeDS在展现层生成呈现数据对象(VO:值对象),供展现层呈现应用。
  3.3       业务领域层业务领域层负责将数据层提供的数据经过相关业务逻辑处理后供外观集成层提取使用。
  业务领域层与外观集成层分开处理,主要是为了便于内部业务逻辑的处理,降低数据冗余性,降低展现层与业务层的耦合度。数据冗余是指在相应程序模块中,通常情况下内部业务逻辑模块所需要的数据构造项大于等于展现层数据构造项。如果将业务模块中的数据对象直接交由展现层呈现,数据势必产生冗余。不仅造成数据冗余,还将额外增加网络开销。展现层与业务层的耦合度是指尽可能的降低展现层与业务层的关联。当业务领域层发生业务变更时,我们只需针对业务层逻辑进行调整,展现层只负责呈现外观集成层映射的VO对象。避免当业务发生变更时,呈现层也需根据业务进行调整。或许这只是一个微不足道的细节,但实际应用中,企业级的系统编码量级是极其可观的。如果每次需求变更、功能扩展等情况发生,展现层与业务层都需要调整,重复的工作量就很可观了。
  3.4       数据层数据层负责将上层应用提供的数据进行持久化处理与供上层应用提取数据。
  3.5       中间件通常采用BlazeDS作为展现层(FLEX)与业务领域层(JAVA)两个不同区域之间的交互信使。
  3.6       Flex的通信原理使用Flex On Java开发基于B/S结构企业应用,客户端和服务器端的通信协议是我们所熟知的HTTP协议。在Flex中,基于HTTP协议访问服务器的通信组件有三个:
  HttpService(mx.rpc.http.mxml.HTTPService)
  WebService(mx.rpc.soap.mxml.WebService)
  RemoteObject(mx.rpc.remoting.mxml.RemoteObject)
  但是HttpService与WebService在交互的过程中,都是以XML进行的数据交互。这在轻量级数据交互过程中使用尚可。如涉及到大数据量交互时,就心有余而力所不及了(主要体现在数据的传输效率与转换效率两方面)。所以在企业级大型项目中通常采用RemoteObject+“第三方组件(如:BlazeDS、LCDS等)”实现交互的过程。
  RemoteObject+“第三方组件”主要交互过程大致经过以下步骤:
  1、客户端RemoteObject将调用参数中的ActionScript对象序列化为AMF数据格式,然后发出调用请求。
  2、服务器的“第三方软件”获取HTTP请求流。
  3、服务器的“第三方软件”对HTTP请求流进行解析,并且建立响应消息。对HTTP请求流进行解析,解析过程包括解释AMF格式数据,将ActionScript对象的AMF数据按照事先确定的协议“反序列化”为服务器端对象,然后用这些参数调用客户端指定的服务器对象上的方法。
  4、服务器的“第三方软件”将调用的结果“序列化”为AMF格式的数据流。
  5、服务器发送HTTP响应给Flex客户端。
  6、Flex客户端解释AMF格式数据流,将调用结果序列化为ActionScript对象。
  实际上HttpService、WebService与RemoteObject+“第三方组件”这两种交互方式的区别主要在于是否使用AMF二进制数据进行交互。从根本上说RemoteObject+“第三方组件”的优势在于AMF二进制数据的转换和传输效率更高,但是必须通过“第三方软件”解释AMF格式数据。
  AMF(Action Message Format):由Adobe公司定义的一种二进制数据格式规范;
  4           Flex的部署Flex应用程序作为web应用,最终需要在服务器端的WEB环境下运行。而根据应用数据处理方式的不同,部署方式可以分为两种:
  4.1       单一客户端单一部署客户端模式是最简单的部署模式。在单一客户模式下,客户端不需要与后台服务进行交互,或者交互很少。在该模式下,FLEX应用程序只是负责展示功能,不需要更多复杂的配置。所以对于单一客户端的应用,最主要的部署步骤就是将SWF文件和应用中所用的资源(图片、视频、音频文件等)拷贝到部署环境中。
  在实际的应用运行时,FLEX最终是作为HTML网页出现。在服务器端不支持MXML后缀访问时,只能将FLEX作为网页的在浏览器中显示。所以在拷贝SWF文件和应用素材至部署环境后,需要将应用SWF文件嵌入到HTML网页中。
  4.2       数据交互数据交互模式既在FLEX应用中,需要与外部数据文件进行交互。这里的交互,是指通过使用FLEX RPC组件与服务器端对象交互。服务器端对象包含XML文档、JAVA类、JSP脚本、PHP脚本等。所以数据交互模式的应用与使用RPC组件的方式紧密相关。
  而使用RPC组件主要分为两种方式;
  1、FLEX SDK
  2、FLEX DATA SERVICE
  以上两种方式可使用FLEX BUILDER 开发IDE或通过第三方插件实现编译部署。
  5           FLEX的应用5.1       网络营销中的应用顾客体验感受日益成为了企业网络营销的竞争重点,很多公司都试图建立比以往更为强大的网络应用程序。而FLEX的出现有效的解决了网络营销中以下几个方面问题。
  1、FLEX改善了与顾客的交互过程
  FLEX改善了与顾客交互的界面和流程,使得顾客能够更方便快捷地完成订购。对顾客来说来说,如果订购产品需要跳转很多个页面无疑会让人感觉烦琐而枯燥,很可能半途就会放弃购买。
  2、FLEX为顾客提供了更多产品的选择
  使用FLEX可以为企业部署一个优秀的产品配置系统,顾客可以自由地选择他们要购买的产品的属性并立即得到最终效果,顾客可以对所有产品有很直观的感受,并感觉他们选择的余地扩大了,从而购买的可能性也增大了。
  3、提高了顾客对“体验”的感受
  如今的顾客愿意花更多的钱和精力在一个愉快“体验”上。比如看电视转播足球比赛的时候,很多人愿意到酒吧与其他球迷一起呐喊助威。与在家看比赛相比,到酒吧消费的成本要高的多,但是由于可以获得一个更为良好的体验,所以很多人认为这个花费是值得的。所以使用FLEX技术在提高顾客的感受度,也是一种赢利方式。
  5.2       网络自动化中的应用随着技术的发展,OA系统已被广泛使用。作为一种网络应用程序,OA系统的开发大多采用了当前比较流行B/S架构,这种设计方案使应用系统的部署成本低、结构简单,解决了C/S时代一直困扰人们的关于部署、更新、维护方面的难题。而B/S结构中传统WEB开发技术已经无法满足客户丰富的控制要求。而用FLEX技术可以继续利用WEB部署的灵活性,同时又能为用户提供类似C/S结构的应用程序体验。另外还可以通过将部分功能分配给客户端来减轻服务器的压力,并且提升了软件的质量。
  5.3       FLEX的应用现状据Adobe称已经有98%以上的桌面系统的浏览器都安装了 Adobe Flash Player。这使得以Adobe Flash Player为客户端的RIA可以支持种类广泛的平台和设备。
  随着时间的推移,以Flex为代表的RIA应用已经越来越流行,当你打开www.jooce.com等网站时,你会被其绚丽的人机界面所震撼。在Web游戏、Web虚拟现实、Web GIS等领域,FLEX技术更是大显身手。众多知名企业也纷纷加入追捧FLEX技术的行列。
  6           结束语本文从FLEX工作模式、FLEX常用架构设计、FLEX部署、FLEX应用四阶段进行了简单介绍,下面我们对四个要点进行一次简单的总结。
  1、FLEX工作模式
  FLEX工作模式使读者对FLEX工作体系有了更直观的了解,从而方便对于运行过程中出现的问题进行定位与分析。
  2、FLEX常用架构设计
  FLEX常用架构设计使读者了解到FLEX在FLEX ON JAVA架构中所担当的角色,而这正是FLEX的优点之一,既展现层与业务层分离。所以此架构不仅适用ON JAVA,同样适用ON .NET。这一特性使得以FLEX作为展现层时,业务层原有系统无需重新开发,极大的降低了开发成本。
  3、FLEX的部署
  FLEX的部署与传统WEB应用程序一样简捷,通常情况下均可通过第三方软件进行集成部署。
  4、FLEX的应用
  目前许多大型企业已经采用了FLEX技术的产品,并且取得了一定商业成果。而FLEX的支持插件(Adobe Flash Player)已经有(Adobe公司声称)98%以上桌面系统的浏览器安装了。这预示有98%以上的桌面系统是FLEX潜在用户群,这个庞大的潜在用户群将是未来市场推广普及的主力军。
[/b]
分享到:
评论

相关推荐

    论文研究-基于Flex技术和J2EE构建RIA的研究与应用 .pdf

    基于Flex技术和J2EE构建RIA的研究与应用,吴波,徐波,文章介绍了RIA的特性和结构及构建RIA各种不同技术;其次介绍了Flex的组成、技术架构和运行机制,并介绍了如何将Flex技术同J2EE集成构建

    普联架构设计技术方案.pptx

    1、开发平台概念—平台设计原则 基于模型驱动 业务模型、数据模型、软件模型 基于接口实现 业务接口、软件接口 基于灵活开放框架 技术框架、应用框架 清晰的层次结构 数据层次、软件层次 普联架构设计技术方案全文...

    基于Flex 和Spring 的应用开发架构研究 (2012年)

    随着技术的发展,使用者对用户体验方面有了更高的要求,Flex作为富客户端技术在web技术中的应用,在一定程度上提升了用户交互性和用户体验度,为使用者提供了更酷的界面,更短的响应时间及接近于桌面程序的体验。...

    基于Flex和Spring构建RIA系统的研究与应用

    flex是一种强大的构建RIA系统的方案, 本文介绍了flex的关健技术及其数据服务的基本原理。 spring是一种轻量级的J2EE架构 , 本丈提出了一种结合flex和spring构建RIA系统的框架 , 并简要描述了其体实现

    基于fex的arcgis server开发技术方法基础

    本文主要介绍基于flex的富internet应用在开发BS架构的地图服务系统中的应用。 文章分四部分:第一部分介绍富internet应用及主要的代表技术;第二部分介绍arcgisserver9.3新特性及flex开发api; 第三部分是二者结合...

    基于JAVAEE的机电设备管理系统毕业论文(48页18820字数).doc

    2.2.1 国内外研究及应用状况 10 2.2.2 存在的主要问题 11 3 机电设备管理平台支撑技术及开发环境 13 3.1 支撑技术 13 3.1.1 操作系统及其软件:Windows+Tomcat 13 3.1.2 数据库及其软件:PostgreSQL+PostGIS 13 ...

    asp.net知识库

    SQL server 2005中新增的排序函数及应用 根据基本表结构及其数据生成 INSERT ... 的 SQL 简便的MS SQL 数据库 表内容 脚本 生成器 将表数据生成SQL脚本的存储过程 直接从SQL语句问题贴子数据建表并生成建表语句的...

    SPRING攻略 第2版.pdf

    构建于Spring IoC容器组件模型之上的这些Spring3部件提供了集成、批处理、OSGi、Ajax和Flex集成、状态式的Web应用、REST风格Web服务、富客户端用户界面、Google AppEngine开发、基于云的部署、消息、数据访问、Web...

    SPRING攻略 第2版

    构建于Spring IoC容器组件模型之上的这些Spring3部件提供了集成、批处理、OSGi、Ajax和Flex集成、状态式的Web应用、REST风格Web服务、富客户端用户界面、Google AppEngine开发、基于云的部署、消息、数据访问、Web...

    Spring攻略(第二版)高清版

    构建于Spring IoC容器组件模型之上的这些Spring3部件提供了集成、批处理、OSGi、Ajax和Flex集成、状态式的Web应用、REST风格Web服务、富客户端用户界面、Google AppEngine开发、基于云的部署、消息、数据访问、Web...

    SPRING攻略 第2版 (带书签)(一)

    构建于Spring IoC容器组件模型之上的这些Spring3部件提供了集成、批处理、OSGi、Ajax和Flex集成、状态式的Web应用、REST风格Web服务、富客户端用户界面、Google AppEngine开发、基于云的部署、消息、数据访问、Web...

    SPRING攻略 第2版 (带书签)(二)

    构建于Spring IoC容器组件模型之上的这些Spring3部件提供了集成、批处理、OSGi、Ajax和Flex集成、状态式的Web应用、REST风格Web服务、富客户端用户界面、Google AppEngine开发、基于云的部署、消息、数据访问、Web...

    Spring攻略 英文第二版

    构建于Spring IoC容器组件模型之上的这些Spring3部件提供了集成、批处理、OSGi、Ajax和Flex集成、状态式的Web应用、REST风格Web服务、富客户端用户界面、Google AppEngine开发、基于云的部署、消息、数据访问、Web...

Global site tag (gtag.js) - Google Analytics