基于Flex的Web应用系统开发探索

《电信交换》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种基本方式
在此采用第一种通信方式，使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.messaging.services.RemotingService">
<adapters>
<adapter-definition id="java-object"
class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
</adapters>
//定义默认的消息通道
<default-channels>
<channel ref="my-amf"/>
</default-channels>
//定义id为CatalogManager的目标，它指向的源文件是com.flexbbs.dao.CatalogDAO
<destination id="CatalogManager">
<properties>
<source>com.flexbbs.dao.CatalogDAO</source> </properties>
</destination>
</service>
（2）services-config.xml文件中需要配置的具体项有：
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
//加载描述远程调用Java类的服务配置文件remoting-config.xml
<service-include file-path="remoting-config.xml" /> //定义默认消息通道
<default-channels>
<channel ref="my-amf"/>
</default-channels>
</services>
<channels>
//定义一个id为my-amf的消息通道，它的类型是AMFChannel
<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
//访问目标地址
<endpoint
url="http://{}:{server.port}/{context.root}/messagebroke r/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
//开启轮检机制
<polling-enabled>true</polling-enabled>
</properties>
</channel-definition>
<channel-definition id="my-streaming-amf"
class="mx.messaging.channels.StreamingAMFChannel">
<endpoint
url="http://{}:{server.port}/{context.root}/messagebroke r/streamingamf"
class="flex.messaging.endpoints.StreamingAMFEndpoint"/>
</channel-definition>
</channels>
//配置Tomcat服务器的登录安全机制
<security>
<login-command
class="flex.messaging.security.TomcatLoginCommand"
server="Tomcat"/>
</security>
<system>
<redeploy>
<enabled>true</enabled>
<watch-interval>20</watch-interval>
<watch-file>
{context.root}/WEB-INF/flex/services-config.xml
</watch-file>
<watch-file>
{context.root}/WEB-INF/flex/remoting-config.xml
</watch-file>
<touch-file>{context.root}/WEB-INF/web.xml</touch-file>
</redeploy>
</system>
</services-config>
5．部署
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所示。

图3 Flex模块化开发结构图
这种开发模式可以使大型Flex应用的功能模块划分更加清晰，避免了使用过多组件而导致SWF文件过大、应用加载时间过长，提高了软件的可用性。

2．事件机制
事件（Event）让程序员知道用户何时与界面组件交互以及在组件的外观或生命周期中何时发生重要变化，如组件的创建、销毁和大小调整等。

事件对象（Event Object）是指某个对象包含发生的特定事件的相关信息，当通知事件侦听器发生了事件时，这些相关信息将被发送到所有侦听器。

事件对象创建后，被Flash Player分配给指定的目标事件；事件对象穿过Display List（显示架构）的每个层次，到达目标事
件。

有时事件对象会像“冒泡”的方式按原路返回。

这个过程被称作事件流（Event Flow），它可分为三个阶段：
（1）捕获阶段确定事件的传播途径和在该路径上寻找事件捕捉者；
（2）目标阶段触发事件捕捉者来捕捉事件；
（3）冒泡阶段把目标阶段的事件沿着路径继续向上传播。

并不是每个事件对象都必须参与这三个阶段，当一些事件对象的目标对象不在显示架构中时，那么这些事件对象不经过事件流的捕获和冒泡阶段。

3．数据绑定机制
Flex技术提供了一种新的数据关联机制——数据绑定，即把数据库中的一个数据对象和另一个组件对象或事件对象关联起来。

当数据对象发生变化时，会向Flex发出某种事件；Flex捕捉到这个事件后，会触发“绑定”，把数据库中的数据对象复制给组件对象或事件对象。

这样无需添加代码，数据库中的数据对象就会和组件对象或事件对象产生联动效果，这就是数据绑定。

如图4所示。

图4 Flex数据绑定机制简图
在Flex数据绑定中，先把一个对象绑定到某个源上，如果这个源发生变化，则源会向Flex发出某个事件；Flex捕获到这个事件后，自动触发绑定，完成随后的全部工作。

四、Flex与传统前台开发模式的比较
Flex是实现表现层的架构，它的开发模式是基于事件驱动的，它为程序开发人员提供了强大的组件库。

Flex组件是向用户提供数据显示或与用户交互的最基本单元，它是整个Flex的核心部分，其组件之间的关系如图5所示
图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内部
机制的限制
扩展完全支持扩展与
自定义完全不支持扩展完全支持扩展与
自定义
交互表现功能强大，交互风
格简单
功能有限，交互
风格简单
功能强大，交互方
式丰富
被编程语言调用非常容易，可以进
行各种方式调用
被JavaScript调
用，使用不方便
容易，可以被
ActionScript 3.0
进行完整的调用
通过表2可以看出：Flex组件部署简单，安全性高，扩展灵活，交互表现丰富，编程容易；使程序员从繁重的前台界面调试中得到解脱，节省了大量宝贵的时间，加快了企业级Web应用
系统的开发速度；同时Flex使用FlashPlayer作为运行环境，使客户交互可以突破浏览器的限制。

五、结束语
有专门的机构对Flash软件的市场安装情况做过统计[5]，结果如图6所示。

FlashPlayer Java
Windows
Media Player
QuickTime
Player
Shockwave
Player
Player
SVG
图6 连接因特网的电脑Flash软件安装率
从图6中可以看出Adobe FlashPlayer的市场安装率高达99.1%，通过这个高占有率的平台Adobe公司构建了完整的RIA 开发体系。

基于FlashPlayer插件的平台不仅仅是客户端显示工具，而且其功能已经逐渐地向服务端的数据交互进行转变。

在这样一个完整的体系中，Flex程序的运行环境FlashPlayer 是预装在很多种操作系统中的，因此，世界上绝大多数的电脑都已经具备了运行Flex程序的条件。

但是Flex产品存在价格昂贵、占用网络带宽资源等弊端，而我国目前带宽资源是有限的（但在
企业内网中不是问题）[2]。

如今，Flex作为一项新技术，许多Web开发人员对其中的概念的理解也是不尽相同，但是随着FlexSDK的不断更新和完善以及Flex轻便的开发模式和良好的服务端兼容性，都将对今后Web应用的设计产生本质的影响，有利于推动未来Flex的发展。

参考文献
[1] Charles E. Brown.The Essential Guide to Flex 3[M].New York,2008.
[2] 姜天格．Flex3企业级Web应用系统设计与实现[M]．北京：机械工业出版社，2008.
[3] Michele E. Davis,Jon A.Phillips.Flex3:A Beginner’s Guide[M].United States of America,2008.
[4] 吕晓鹏．精通Flex3.0-基于ActionScript3.0实现[M]．北京：人民邮电出版社，2008.
[5] Alaric Cole. Learning Flex3[M].Canada:O’Reilly,June 2008.■。