APP下载

Fl ex与X ML技术在RIA中的集成应用

2010-04-16何晓桃郑文丰

电脑与电信 2010年10期
关键词:用户界面服务器端应用程序

何晓桃郑文丰

(1.广东工业大学计算机学院,广东广州510006;2.广东省科普信息中心,广东广州510040)

1.引言

传统网络程序的开发是基于页面的、服务器端数据传递的模式,把网络程序的表示层建立于HTML页面之上,功能单一、人机交互性差、安全性不高。传统的基于页面的系统已经渐渐不能满足网络浏览者的更高的、全方位的体验要求。随着Web技术的不断发展,Web开发有了新的发展分支,即包含丰富用户体验的应用,这就是富互联网应用(Rich Internet Applications,缩写为RIA)。

Flex是RIA领域中的典型代表。Flex是一个针对企业级富互联网应用的表示层解决方案。具体地说,Fles是一种应用程序框架,主要用于客户端程序的开发。一个完整的Flex程序由MXML代码和ActionScript代码组成。MXML是一种基于XML的标记语言,在Flex技术中,MXML用于设计用户界面,实现丰富的Flex表现层。从作用上来说,MXML和HTML的功能是基本一致的,都是设计用户界面,但MXML提供了较HTML更为丰富的界面组件,并且在开发上更为结构化,条理更加清晰。MXML的编写同样类似于HTML,它通过标签来定义和描述组件。ActionScript基于ECMAScript,是为Adobe Flash设计的面对对象的程序设计语言,在Flex开发中,ActionScript的基本作用类似于传统网页开发中的JavaScript,同时,ActionScript还要负责Flex程序的逻辑控制和业务建模。

XML是Extensible Markup Language的缩写,称之为可扩展标记语言。它具有开放性、简单性、互操作性、自我描述性、可扩展性、内容和显示分离、本地计算、个性化数据视图、数据集成性等多种特点。其中数据集成性是指使用XML,可以描述和集成来自多种应用程序的不同格式的数据,使其能够传递给其它应用程序,做进一步的处理。

本文正是利用XML的数据集成性,采用Flex作为表示层,J2EE作为后台程序,以MySQL作为数据存储,设计一套在线试题系统RIA。它改变传统的在线试题管理系统的基于HMTL的表现层,提供了RIA应用的良好用户体验。

2.设计思路

Flex技术遵循业界标准,采用XML(即可扩展标记语言)数据文档绑定用户界面组件,让数据尽可能保持数据库中的模式传送到客户端。XML文档成为用户界面组件和服务器端数据传送到客户端数据库中进行通信的中介,即从数据库获得数据生成XML文档传送到用户界面组件给用户,或将用户改动生成的数据生成XML文档提供到服务器端解析后存入数据库。Flex技术标准使得它很容易就跟外部XML文件进行通信。而且XML文件简单小巧、存储方便、检索快速,Flex加载外部XML文件的代码简单快捷。同时Flex提供了一系列独特的功能,包括:丰富的表现力、高执行效率、丰富媒体支持、脱机支持等。

通过Flex的HTTPService方式访问服务器端数据,使远程过程调用与服务器环境,如PHP、Adobe ColdFusion和Microsoft ASP.NET进行交互。获得服务器端数据之后,以XML格式返回,再经过Flex解析后在页面上显示出来。

图1 Flex与XML的集成应用

3.系统设计与实现

3.1 系统设计

在线试题的题型包括单选题、多选题、判断题、填空题和问答题。题目通过一个独立的XML文件来描述。基于Flex的表现层通过XML对象访问数据文件XML,并将XML文件中的数据解析后在界面上显示出来。

针对单选题、多选题、判断题、填空题和问答题5中题型分别设计5个XML文件:Choice.xml、MultipleChoice:xml、Judgement.xml、Filling.xml和Answer.xml用来存储五种题型的试题信息,如题干、各备选项、正确答案以及解析。其XML文件具体的内容包括:题干、选项、答案和解析。单选题的XML文件描述如下所示:

其中<chapter>结点存放章节信息,<ti>存放的是一道题的试题信息,<title>存放的是题干信息,<body>存放的是各备选项信息,<answer>存放的是答案信息,<explain>存放的是试题解析。其它XML文件都是用相同的节点存放试题信息,这里就不列举出来了。

3.2 获取XML数据

RIA系统的后端,不限定何种服务端技术,使用PHP、J2EE、ASP.NET都可以。本文中使用PHP作为服务器端应用程序的开发语言,使用MySQL数据库存储所有的试题和相关信息。基于Flex技术的RIA系统通过Flex中内置的HTTPService组件访问服务器端数据,采用POST方法调用一个PHP页,关键代码如下所示:

该PHP页通过HTTP协议POST方式获得提交的参数,并查询MySQL数据库,获得所需数据,然后将结果数据以XML的结构通过HTTP响应形式返回给Flex页面。

3.3 处理XML结果

在RPC组件调用服务之后,服务返回的数据将放置在lastResult对象中。默认情况下,HTTPService组件和Web-Service组件操作的resultFormat属性值为object,而返回的数据以ActionScript对象的简单树形式来表示。Flex解释Web服务或HTTP服务返回的XML数据,以便相应地表示基本类型(如String、Number、Boolean和Date)。要使用强类型对象,您必须使用Flex所创建的对象树来填充这些对象。

WebService和HTTPService组件均返回作为复杂类型的匿名Object和Array。如果makeObjectsBindable为true(默认值),则Object将包装在mx.utils.ObjectProxy实例中,而数组将包装在mx.collections.ArrayCollection实例中。

在处理返回结果时,如果不确信服务调用的结果是包含数组还是单个对象,您可以使用mx.utils.ArrayUtil类的toArray()方法将其转换为数组,如前所示。如果将toArray()方法传递给单个对象,则该方法会返回一个数组,而该对象是唯一的Array元素。如果向方法传递一个数组,则该方法将返回同一个数组。

4.结束语

RIA(富互联网应用程序)是将桌面应用程序的交互式用户体验与传统的Web应用的部署灵活性和低成本相结合起来的下一代的网络应用程序。Flex是一个轻量级、跨平台、跨设备的企业级RIA应用程序的表示层解决方案,同时也是跨多个应用程序服务器平台(PHP、J2EE和.NET)和客户端操作系统(Windows、Mac OS、Linux等)。XML可以描述和集成来自多种应用程序的不同格式的数据,通过XML的自描述性和集成性,可以作为Flex和应用程序之间的数据传递的载体。Flex结合XML技术让现有的Web技术得到了极大的保留,提高产品设计师和开发工程师的“开发体验”,强化设计端和开发端的整合,使富互联网应用程序(RIA)带给用户前所未有的用户体验。

[1]戴侃,杨小虎.基于J2EE和FLEX技术构建RIA系统的探索与实现[J].微电子学与计算机,2003,23(5):22-23.

[2]Adobe System.Flex Documentation[EB/OL].http://solution.myadobe.com.cn/.

[3]陈显军,魏祖宽.基于Flex的XML数据通信与应用研究[J].计算机与现代化,2008,03.

[4]杨占波等.Flex3RIA开发详解与精深实践一企业级Web应用与AIR桌面应用[M].北京:清华大学出版社,2009.

[5]陈燕等.基于XML和Flex的网络考试系统的设计与实现[J].电子商务,2010,06.

猜你喜欢

用户界面服务器端应用程序
基于CiteSpace的国外用户界面体验图谱量化分析
Linux环境下基于Socket的数据传输软件设计
物联网用户界面如何工作
删除Win10中自带的应用程序
谷歌禁止加密货币应用程序
浅析异步通信层的架构在ASP.NET 程序中的应用
UI用户界面色彩设计研究
基于Qt的安全即时通讯软件服务器端设计
基于B/S的跨平台用户界面可配置算法研究
网页防篡改中分布式文件同步复制系统