基于flex的web应用系统开发探索doc.docVIP

胡丹瑞：基于Flex的Web应用系统开发探索 PAGE \* MERGEFORMAT 4 《电信交换》2009年 第3期 技术与应用 基于Flex的Web应用系统开发探索 胡丹瑞 （电信科学技术第十研究所 陕西 西安 710061） 摘 要：介绍了Flex的基本概况。从整体架构、服务器端、与服务器端通信、配置文件和部署等五个环节，阐述了如何搭建基于Flex的Web应用系统。对Flex的客户端技术要点做了的说明。在Web系统的前台开发方面将Flex与传统开发模式作了比较。 关键词：Flex ActionScript SWF Web系统 RIA 随着网络的普及和互联网的发展，很多信息人们都能从网上得到，获取信息已经不是问题。但是，如何提供更具魅力的Web应用视觉效果，如何使操作更加人性化等都存在有待探索和改进的地方。 一、Flex简介 Flex技术是目前最流行的RIA（Rich Internet Application，富互联网应用系统）开发技术之一，它是开发Web应用的有效工具[1]。在传统的开发模式中，用PHP、ASP、JSP等技术来开发Web应用，需要依靠浏览器的动态解释才能够正常显示和执行，这样的开发方式经常会给代码调试带来难度。在开发过程中，界面外观的调试非常耗时耗力，往往同一代码在不同的浏览器或同一浏览器的不同版本下会有不同的外观和不同的动作效果[2]。Flex便是人们所期待的能够解决上述问题的方法之一。 1．Flex框架结构 Flex框架的基本模型如图1所示。其基本原理是：通过Flex编译器Flex Builder x.0将MXML文件编译成SWF文件[3]，然后由FlashPlayer执行该SWF文件。 图1 Flex框架结构图 从图1中可以看出Flex应用是多层结构。Flex编译器可以把MXML、ActionScript以及一些Flex类库编译成SWF文件，由FlashPlayer在客户端执行SWF文件，实现对应用的访问。在企业级应用当中，Flex采用N层架构和面向服务的应用程序体系结构，在使用模型/视图/控制器（MVC）设计模式时，可以将表示逻辑从业务逻辑中分离出来，控制器负责处理用户交互逻辑，服务器端业务逻辑控制器负责业务逻辑的处理。 2．Flex技术元素 （1）MXML 基于XML描述应用程序界面的语言； （2）ActionScript 符合ECMA（欧洲计算机制造商协会）标准的脚本语言，负责处理业务逻辑和业务建模； （3）Flex SDK Flex的基础类库； （4）通信服务 Flex支持Adobe公司自定义的通信协议AMF，它能够将Flash/Flex对象快速序列化、反序列化，采用二进制压缩传输数据，具有数据安全性高、传输快的优点。 二、搭建基于Flex的Web应用系统 Flex主要用于前端用户交互的解决方案框架，当复杂业务逻辑的信息系统进行开发时，服务端一般会选用比较成熟的架构，Flex可以方便地实现与服务端的交互。 1．Web应用的整体框架 图2所示为Web应用的整体框架，系统可分为客户端、服务器端。Flex程序在浏览器中运行，由浏览器插件FlashPlayer负责解释执行。Flex主要承担着客户端的展现，因此在某种程度上可以说Flex是客户端技术。 图2 Web应用框架图 2．服务器端 服务器端可采用分层设计模式，分为控制层、业务层、数据层和数据实体层等。这里可以采用Spring和Hibernate结合的方法来进行开发。 3．Flex与服务端的通信 图2中的BlazeDS是Adobe公司的一款数据服务产品，它能够提供高级的与服务端通信的方式，其中有3种基本通信方式如表1所示。 表1 BlazeDS与服务端通信的3种基本方式 名称 说明 RemoteObject 基于AMF协议的对象级别的调用 HttpService 采用Http通信协议，交互数据格式是XML Messaging 通过与服务端JMS通信的方式进行消息服务传递的数据通信方式 在此采用第一种通信方式，使Flex通过BlazeDS直接调用服务端的Java类，以实现用户交互层和业务逻辑层的无缝连接。 4．配置文件 Flex与服务器端的通信一般需要4个配置文件的支持。在普通Web应用中配置其中的两个配置文件就可以了，它们是：remoting-config.xml，描述远程调用Java类的服务配置文件；services-config.xml，描述服务基本设置的配置文件。 （1）remoting-config.xml中需要配置的具体项有： ?xml version=1.0 encoding=UTF-8? service id=remoting-service class=flex.messagi