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

基于 Flex 的 Web 应用系统开发探索摘 要：介绍了 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 文件组件和源文件M X M L文件A S 文件编译代码和标准化组件A c t i o nS c r i p tC l a s s e sM e d i aA s s e t sW e b 层O p t i o n a l d a t a s e r v i c e s服务器S W F 文件R S L 文件H T M LM e d i aA s s e t sW e b 浏览器F l a s h P l a y e r请求响应编译 配置F l e x d a t a图 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 应用系统开发探索2对象快速序列化、反序列化，采用二进制压缩传输数据，具有数据安全性高、传输快的优点二、搭建基于 Flex 的 Web 应用系统Flex 主要用于前端用户交互的解决方案框架，当复杂业务逻辑的信息系统进行开发时，服务端一般会选用比较成熟的架构，Flex 可以方便地实现与服务端的交互1．Web 应用的整体框架图 2 所示为 Web 应用的整体框架，系统可分为客户端、服务器端 Flex 程序在浏览器中运行，由浏览器插件 FlashPlayer 负责解释执行。

Flex 主要承担着客户端的展现，因此在某种程度上可以说 Flex 是客户端技术数据库J 2 E E （ 服务器端 ）B l a z e D SJ A V A代码浏览器 （ 客户端 ）S W F图 2 Web 应用框架图2．服务器端服务器端可采用分层设计模式，分为控制层、业务层、数据层和数据实体层等这里可以采用 Spring 和 Hibernate 结合的方法来进行开发3．Flex 与服务端的通信图 2 中的 BlazeDS 是 Adobe 公司的一款数据服务产品，它能够提供高级的与服务端通信的方式，其中有 3 种基本通信方式如表 1 所示表 1 BlazeDS 与服务端通信的 3 种基本方式名称 说明RemoteObject 基于 AMF 协议的对象级别的调用HttpService 采用 Http 通信协议，交互数据格式是 XMLMessaging 通过与服务端 JMS 通信的方式进行消息服务传递的数据通信方式在此采用第一种通信方式，使 Flex 通过 BlazeDS 直接调用服务端的 Java 类，以实现用户交互层和业务逻辑层的无缝连接4．配置文件Flex 与服务器端的通信一般需要 4 个配置文件的支持。

在普通 Web 应用中配置其中的两个配置文件就可以了，它们是：remoting-config.xml，描述远程调用 Java 类的服务配置文件；services-config.xml，描述服务基本设置的配置文件基于 Flex 的 Web 应用系统开发探索3（1）remoting-config.xml 中需要配置的具体项有：//定义默认的消息通道//定义 id 为 CatalogManager 的目标，它指向的源文件是com.flexbbs.dao.CatalogDAOcom.flexbbs.dao.CatalogDAO（2）services-config.xml 文件中需要配置的具体项有：//加载描述远程调用 Java 类的服务配置文件 remoting-config.xml//定义默认消息通道//定义一个 id 为 my-amf 的消息通道，它的类型是 AMFChannel//访问目标地址//开启轮检机制true//配置 Tomcat 服务器的登录安全机制true20{context.root}/WEB-INF/flex/services-config.xml{context.root}/WEB-INF/flex/remoting-config.xml{context.root}/WEB-INF/web.xml5．部署Flex 应用可以运行在任何 J2EE 服务器上，例如 IBM 公司的 Websphere、BEA 公司的Weblogic、Adobe 公司的 JRun 以及开源社区的 JBoss、Tomcat 等服务器。

在此选用 Tomcat服务器，使用 oracle10g 进行数据存储，使用 Flex 技术与用户交互其中，通过运行在Tomcat 服务器上的 BlazeDS 和 Java 代码处理系统的逻辑三、Flex 客户端技术客户端的开发是 Flex 开发企业级 Web 应用系统的一大强项，其开发要点如下：1． 模块化的开发在 Flex 中可以针对每个页面建立一些 MXML Component 文件，再将若干 MXML Component 文件组织成一个 MXML Module 文件，最后若干 MXML Module 文件可以包含在作为主界面的 Application 应用中组织结构图如图 3 所示基于 Flex 的 Web 应用系统开发探索5主界面A p p l i c a t i o n模块 1M X M L M o d u l e模块 3M X M L M o d u l e模块 4M X M L M o d u l e模块 2M X M L M o d u l e组件 1M X M L C o m p o n e n t组件 2M X M L C o m p o n e n t组件 3M X M L C o m p o n e n t组件 4M X M L C o m p o n e n t组件 5M X M L C o m p o n e n t组件 6M X M L C o m p o n e n t图 3 Flex 模块化开发结构图这种开发模式可以使大型 Flex 应用的功能模块划分更加清晰，避免了使用过多组件而导致 SWF 文件过大、应用加载时间过长，提高了软件的可用性。

2．事件机制事件（Event ）让程序员知道用户何时与界面组件交互以及在组件的外观或生命周期中何时发生重要变化，如组件的创建、销毁和大小调整等事件对象（Event Object）是指某个对象包含发生的特定事件的相关信息，当通知事件侦听器发生了事件时，这些相关信息将被发送到所有侦听器事件对象创建后，被 Flash Player 分配给指定的目标事件；事件对象穿过 Display List（显示架构）的每个层次，到达目标事件有时事件对象会像 “冒泡”的方式按原路返回这个过程被称作事件流（Event Flow） ，它可分为三个阶段：（1）捕获阶段 确定事件的传播途径和在该路径上寻找事件捕捉者；（2）目标阶段 触发事件捕捉者来捕捉事件；（3）冒泡阶段 把目标阶段的事件沿着路径继续向上传播并不是每个事件对象都必须参与这三个阶段，当一些事件对象的目标对象不在显示架构中时，那么这些事件对象不经过事件流的捕获和冒泡阶段3．数据绑定机制Flex 技术提供了一种新的数据关联机制 ——数据绑定，即把数据库中的一个数据对象和另一个组件对象或事件对象关联起来当数据对象发生变化时，会向 Flex 发出某种事件；Flex 捕捉到这个事件后，会触发 “绑定” ，把数据库中的数据对象复制给组件对象或事件对象。

这样无需添加代码，数据库中的数据对象就会和组件对象或事件对象产生联动效果，这就是数据绑定如图 4 所示数据库中的数据对象F l e x 组件数据源 F l e x 界面展现数据绑定 数据变化图 4 Flex 数据绑定机制简图在 Flex 数据绑定中，先把一个对象绑定到某个源上，如果这个源发生变化，则源会向Flex 发出某个事件；Flex 捕获到这个事件后，自动触发绑定，完成随后的全部工作四、Flex 与传统前台开发模式的比较基于 Flex 的 Web 应用系统开发探索6Flex 是实现表现层的架构，它的开发模式是基于事件驱动的，它为程序开发人员提供了强大的组件库Flex 组件是向用户提供数据显示或与用户交互的最基本单元，它是整个Flex 的核心部分，其组件之间的关系如图 5 所示U I C o m p o n e n tC o n t a i n e rB u t t o nN u m e r i c S t e p p e rC o m b o B a s eC o m b o B o xB o xF o r mV B o x图 5 Flex 组件关系图Flex 采用基于 XML 的 MXML 语言来使用 Flex 组件，这点与 HTML 很相似，但MXML 有了继承概念，使得 MXML 与 HTML 有着本质的不同。

与传统的 Web 开发不同，Flex 开发模式不再以请求/ 响应模式作为编程模型表 2 列出了在开发前台表现层的传统 C/S 组件、HTML 组件与 Flex 组件的比较表 2 传统 C/S 组件、HTML 组件与 Flex 组件的比较 [4]传统 C/S 结构组件 HTML 组件 Flex 组件部署 需要安装部署 不需要任何安装部署 只需要客户端安装FlashPlayer安全性 差，既可以读取本地资源也可以访问远程服务器高，既不能读取本地资源，也不能访问远程主机高，可以访问本地资源，也可以访问远程主机，但受FlashPlayer 内部机制的限制扩展 完全支持扩展与自定义 完全不支持扩展 完全支持扩展与自定义交互表现 功能强大，交互风格简单 功能有限，交互风格简单 功能强大，交互方式丰富被编程语言调用非常容易，可以进行各种方式调用被。