Flex-RIA技术的发展与应用

Flex-RIA技术的发展与应用
沈云凌
【摘要】@@ RIA(Rich Internet Application,富因特网应用程序)是一种Web体验,它向用户提供了一种灵活易用的职能桌面应用程序,并且将其使用范围延伸到传统的Web应用程序中.Adobe Flex已经被确立为展示这种体验的首选平台.
【期刊名称】《中国金融电脑》
【年(卷),期】2010(000)005
【总页数】4页(P63-66)
【作者】沈云凌
【作者单位】中国工商银行股份有限公司上海分行
【正文语种】中文
RIA(Rich Internet Application，富因特网应用程序)是一种Web体验，它向用户提供了一种灵活易用的职能桌面应用程序，并且将其使用范围延伸到传统的Web 应用程序中。

Adobe Flex已经被确立为展示这种体验的首选平台。

一、Flex-RIA的概述
虽然RIA这个词语近些年来才被人们所熟识，但是其思想早已在各个技术领域得以体现。

RIA技术主要有Java、.Net、Ajax、Micromedia几个派别。

“网页三剑客”——Dreamweaver、Fireworks、Flash就是Micromedia的杰作。

而同属于这家公司的SVG和Flex在市场上也有非常好的表现，Flash多应用于动画，
SVG则在矢量图方面有着出色的表现，Flex则在各大厂商(SAP、IBM、Oracle)的ERP中得到越来越广泛的应用。

1.Flex的发展历程
Flash在中国受到关注已有10年了。

Flash虽好，但想要在企业级开发上占一席
之地是不现实的。

经过了Flash的长期预热，依托于MXML(一种基于XML的声
明性标记语言)、ActionScript3.0(ECMAScript4的一种实现)等标准化开发语言，Flash的兄弟Flex诞生了。

Flex是一项“毫无新技术”的新技术。

然而，它借助于自己得天独厚的运行环境——FlashPlayer，一跃成为RIA开发的大热门。

Flex 3是Adobe出品的开发
RIA的工具。

Flex application是用Flash的.swf文件格式封装的发布在HTML网页中的应用
程序。

它在浏览器里以Flash Player Plug 作为运行环境。

开发者在Flex中可以完全访问Flash绘画API。

应用程序使用ActionScript 3作为其实现复杂逻辑的脚
本语言，这种作用类似于JavaScript的脚本语言兼容Flash CS3和ActionScript3编写的文档。

ActionScript3的语法及关键字与Java非常相似，即使以下两个Flex特有的关键字，也可以在Java中找到相对应的技术：标签<mx:script>…</mx:script>，其
作用等同于JSP中的标签<script
language="JavaScript"type="text/javascript">。

trace()函数，其作用类似于Java中的Log4j。

2.组件的分类
Flex最吸引人的地方，莫过于其丰富而能带给人强烈用户体验的组件，最大程度
地体现了Web 2.0的用户界面标准。

Flex组件的常规分类如下：(1)可视化组件和不可视化组件；(2)容器类组件和非容器类组件；(3)数据可视化组件；(4)打印组件；
(5)行为和效果组件。

行为和效果组件是Flex的特色，它们能使各个窗口或界面之间通过“融合”性的
方式过渡切换，给人很“梦幻”的感觉。

图1、图2是Flex中比较有特色的图表
组件的截图。

二、Flex后端数据支撑平台
1.数据通信方式
如果Flex只是在客户端有优秀的表现，那么它也是很难在企业级应用中获得一席
之地，所以Flex提供了多种前端与后台的数据交互方式。

(1)低数据量的数据通信，包括HTTP Service、WebService、URL Loader、FileReference。

图1 Flex曲线图及区域图控制实例
图2 Flex K线图控制实例
(2)大数据量的数据通信，包括AMF、Live Cycle、Data Services、BlazeDS。

HTTP Service和Web Service适合于跨平台通信，而通过Flex的AMF协议更适合于大数据量的通信，Live Cycle和BlazeDS除了提供对AMF协议的支持，还
提供了很多满足企业级需要的高级特性，如消息通信机制，服务端向客户端推送数据等。

2.后端服务的应用
Live Cycle及BlazeDS组件可以使Flex技术直接与Java企业级服务器进行通信，并可以方便地通过ActionScript对象与Java对象进行映射，在ActionScript中
与后台JavaEE服务器上的Java对象进行交互。

这也是Flex非常高明的一点，如果Flex技术自己包含一个硕大的企业级开发框架的话，就会带来诸多麻烦。

其原
因如下：(1) 这项技术恐怕过于庞大而不宜于被开发者接受。

(2)Java，.NET等技
术平台还处于企业级开发的主导地位，新技术不容易被认可。

(3)一些已经具备企
业级开发技能的开发者可能不原意放弃所掌握的技术而学习一项全新的技术。

而Flex通过Live Cycle(LiveCycle及BlazeDS其实就是一个可以发布在Tomcat上的War包)巧妙的避开了诸多麻烦，通过这个接口可以方便地与企业级应用进行沟通。

(4)高普及率（98%以上）的Flash Player，有很好的市场基础及用户群。

图3是Flex客户端与后台服务器进行通信的架构图，如果要进行低数据量的跨平台通信，只要通过非常普及的HTTP协议就行了；如果要进行大数据量通信，只需要再通过AMF协议进行客户端与服务端的数据对象映射就能无缝地集成，而这一切都已经封装在现成的组件中。

图3 Flex 客户端与服务端通信架构
三、Flex的MVC框架
Flex的MVC框架Cairngorm从根本上来说是将程序代码按照逻辑功能(数据、用户视图以及起控制作用的代码)分块的一种方法论。

这个方法论被归纳为MVC，即Model(模型)、View(视图)和Control(控制)。

Cairngorm由以下6个逻辑层次组成：
(1)Model Locator，在一个地方存储程序中所有的值对象(Value Objects，数据)并共享变量。

它与HTTP Session对象很相似，不过它存储在Flex客户端，而不是存储在一个中间层程序服务器的服务器端。

(2)View(视图)，一个或多个Flex组件(button，panel，combo box，Tile等等)绑定在一起形成的一个特定的个体，使用Model Locator中的数据，并且针对用户的交互动作（点击，鼠标滑过，拖拽等）产生自定义的Cairngorm Events。

(3)Front Controller(前端控制器)，接收Cairngorm Events并且将它们映射到Cairngorm Commands。

(4)Command(命令)，处理业务逻辑，调用Cairngorm Delegates或其它的Commands，以及更新Model Locator中存储的值对象和变量。

(5)Delegate(委托)，由一个Command创建，它将远程过程调用(如HTTP、
Web Services等)实例化并且将结果返回给该Command。

(6)Service(服务)，定义连接到远程数据库的远程过程调用(如HTTP、Web Services等)。

Flex是基于事件的处理机制，而Cairngorm的工作流程大体上是这样的：客户端界面是由View组成。

View使用Flex的binding(绑定)来显示Model Locator中包含的数据。

View根据诸如鼠标点击，按钮按下以及拖拽之类的用户动作产生Event，并映射到Command。

Command包括业务逻辑，创建所需Delegate，处理Delegate的相应，以及更新存储在Model Locator中的数据。

由于View
是绑定到Model Locator中的数据上的，所以当Model Locator中的数据改变的时候View也会自动更新。

Delegate调用Service并且将结果提交给Command，这一步是可选的，但是推荐这么做。

Service调用远程数据然后将结果提交给Delegate。

可以看出，Cairngorm把MVC中的Controller又进行了细化，并在其中引入了Delegate的设计模式，使程序结构具有了更低的耦合度。

所以，适当地计划程序并使用像Cairngorm这样的设计模式可以帮助我们更快地编码、更快地竣工，使测试和调试更加简单，而且当客户需要添加新功能的时候可以很容易地进行调整。

四、Flex在金融业务方面的应用
1.图表
图表展示是Flex的一个强项，而且Flex更适合于展示动态、互动性要求较强的图表。

图4所示的Flex应用中，有三张图表(曲线图、饼图、柱状图)，分别从“时间”、“区域”及“区域明细”三个角度，对“收入”进行了非常直观的展示。

除此之外，三张图表之间还能联动，对任何一张图表的改动操作都会动态地引起其他图表数据的变动，对数据分析及决策提供了很好的支持。

这一特性在金融管理类数
据分析领域有很好的发展前景。

图4 Flex图表联动的例子
2.数据向用户的实时推送
Flex的后台服务提供了非常完美的数据推送功能。

如下图5的行情数据推送例子
所示：前端Flex应用程序从后台服务“订阅”实时更新的数据，如“开盘价”、“收盘价”、“实时价格波动”、“当日最高价”、“当日最低价”等，后台服务将数据以消息的形式异步推送到Flex前端。

对于一些数据实时性要求较强的B/S
结构的Web应用，如股票指数、外汇牌价等，Flex能够有很好的表现。

图5 Flex后台服务将数据推送到前端的例子
3.清晰的数据导向
Flex在动态数据导向中的应用也很广泛。

在很多应用系统中，都有“机构树”、“资金链”等树状结构的应用。

在银行系统中，还可以应用到“资金流向监控”中。

不仅可以从全局把握资金的流向，还能具体到某一单位、个人，对个体的信用、资金状况、上下游资金等进行动态跟踪及监控，有效地规避资金风险。

Flex的编程模式为MXML+ActionScript3+CSS，它是一个加强版的Web编程模式，并且拥有强大的数据邦定功能，完整的数据驱动型组件，丰富和灵活的后台通信方式。

目前，很多厂商都提供了针对Flex的Cloud APIs。

如Adobe、Amazon、Ebay、Flickr、Google、Yahoo、YouTube、IBM等。

而且很多ERP 系统都将Flex作为其图表展示的媒介。

所以，RIA将是未来WEB客户端编程的一种趋势，Flex就是其中最典型的代表。

通过Flex绚丽的UI及强大的后台支撑服务，必能提升项目中的用户体验，提高项目的实用性。

提高用户对企业的满意度和忠诚度，并最终提升企业的价值。