Ｆｌｅｘ技术在企业网站开发中的应用

徐　鹥

摘要 Adobe Flex是一个用于创建RIA应用程序的开源框架,其创建的内容运行于Adobe Flash Player中,集桌面应用的强大功能与Web应用的高效性于一体。Flex使用MXML和ActionScript语言进行编程。阐述使用Flex技术构建企业网站的优势,并探讨相关的连接数据库的技术。

关键词 Flex;Flash;RIA;Web开发

中图分类号:TP312 文献标识码:B 文章编号:1671-489X(2009)21-0108-02

Flex in Enterprise Web Site Development//Xu Yi

Abstract Adobe Flex is an open source framework that runs in Adobe Flash Player to create RIAs, it combines the functionality of desktop applications with the availability of web applications. The programming model is made up of MXML and ActionScript. This paper describes the use of Flex technology to build the advantage of enterprise website, and discusses the related technology to connect database.

Key words Flex;Flash;RIA;Web development

Authors address Department of Electronics and Information Technology, Jiangmen Polytechnic, Jiangmen, Guangdong, 529090, China

RIA(Rich Internet Application)即丰富互联网应用程序,其特点体现在一个“富”字上。传统的HTML页面带给用户的页面元素是极其有限的,在功能上也存在很大不足。RIA的界面是“丰富”的,同时具备桌面应用程序的特点和Web应用程序特点。目前RIA体系主要有Flex/Flash、Ajax、Silverlight、JavaFX等。

桌面应用程序的特点包括:在消息确认和格式编排方面提供互动用户界面;在无刷新页面之下提供快捷的界面响应时间;提供通用的用户界面特性,如拖放式操作以及在线和离线操作能力。Web应用程序的特点包括立即部署、跨平台、采用逐步下载来检索内容和数据,可以充分利用互联网的标准。

Flex是Adobe官方推出的应用于RIA体系的开发平台,它使用ActionScript与MXML语言进行编程[1]。传统Web程序的开发是基于Web页面与服务器端数据交互的模式,把Web程序的表示层建立于HTML页面之上,而HTML是适合于文本的,与HTML不同的是,MXML可对表示层逻辑与用户界面和服务器端数据绑定提供声明抽象,将表示与业务逻辑的问题彻底分开,以实现最大限度地提高开发人员的生产率及应用程序的重复使用率。

1 Flex技术的优势

传统企业网站使用基于HTML/CSS为前台的动态网页技术来构建,如ASP/ASP.Net、PHP、JSP等,前台展示元素为HTML/CSS,由浏览器负责解析HTML代码来实现内容的展示。HTML是适用于文本的,因此无法完成复杂数据的用户交互,当个体数据刷新时需要刷新整个页面。而且由于各浏览器的技术标准不统一(例如对CSS的支持标准),如果网页没有使用Web标准来建构的话,在不同的浏览器中展现时将会出现不一致的情况[2]。

基于Flex技术的RIA架构使用Flash Player作为客户端,Flash Player具备广泛的用户群体,全球98%的浏览器都安装了Flash Player,能够正常浏览Flash内容。Flex是通过Java、PHP或是.Net等途径来进行客户端与服务端通信的,在服务端解释MXML内容,并生成相应的SWF内容发送至客户端Flash Player中呈现。客户端的作用不仅是展示页面,它还可以将用户的请求异步地进行计算、传送和检索数据、显示集成的用户界面。

使用Flex技术构建企业网站,可以充分体现RIA的优势。由于其内容是在Flash Player中呈现的,不仅能在多种浏览器中展现一致,还能获得较为丰富的用户体验。对于企业来说,部署Flex可以继续使用现有的Web应用程序模型(包括J2EE和.NET),无需大规模替换现有的Web应用程序。

Flex对前台的表现力进行大幅度的增强,进一步提升界面的友好程度,并且减少用户与系统的远程交互频率,可以轻松构建更为直观、易于使用、反应更迅速的Web应用程序。

2 在Flex中连接数据库的方式

在企业级Web的开发中,比较关键的技术就是前台页面与后台程序实现数据交互的技术。Flex提供3种数据交互的方式:HttpService,WebService和RemoteObject[3]。其中HttpService可以通过JSP、ASP/ASP.net或是PHP来读取数据库中的数据,还可以直接获取XML文档中的数据;WebService方法通过WebService中间件技术来实现对数据库的操作;使用RemoteObject方法首先要安装Flex Data Service,这是一个免费的服务程序,然后使用ActionScript中的RemoteObject类来连接远程服务程序,以实现对数据库的操作。远程服务程序可以由ASP/ASP.net、Java、PHP等程序来编写。

例如使用HttpService方式与Java进行通信,所编写的MXML代码如下:

＜?xml version="1.0" encoding="utf-8"?＞

＜mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" layout="absolute" creationComplete="userRequest.send()"＞

＜mx:HTTPService id="userRequest" url="data.jsp" useProxy="false" method="POST"＞

＜mx:request xmlns=""＞

＜username＞{username.text}＜/username＞＜emailaddress＞{emailaddress.text}＜/emailaddress＞

＜/mx:request＞

＜/mx:HTTPService＞//定义HTTPService

＜mx:Button label="提交" click="userRequest.send()" y="120" x="220"/＞//定义提交按钮

＜mx:DataGrid id="dgUserRequest" x="220" y="240"

dataProvider="{userRequest.lastResult.users.user}" width="360"＞//定义数据网格控件

＜mx:columns＞

＜mx:DataGridColumn headerText="User ID" dataField="userid"/＞

＜mx:DataGridColumn headerText="User Name" dataField="username"/＞

＜/mx:columns＞

＜/mx:DataGrid＞

＜mx:TextInput x="240" y="200" id="selectedemailaddress" //定义输入文本框控件

text="{dgUserRequest.selectedItem.emailaddress}" width="360" fontSize="12"/＞

＜mx:Label text="Email Address" x="160" y="100" color="#ffffff"/＞

＜mx:TextInput id="emailaddress" x="240" y="100" width="360" fontSize="12"/＞

＜mx:TextInput id="username" x="240" y="80" width="360" fontSize="12"/＞

＜mx:Label text="Username" x="180" y="80" color="#ffffff"/＞

＜/mx:Application＞

编写的data.jsp文件内容如下:

＜%@ page contentType="text/xml; charset=utf-8" %＞

＜%request.setCharacterEncoding( "utf-8" );

String username = request.getParameter("username");

String emailaddress = request.getParameter("emailaddress");

String str;

str ="＜?xml version='1.0' encoding='utf-8'?＞＜users＞"

str = str+"＜user＞"

str = str+"＜userid＞1＜/userid＞"

str = str+"＜username＞"+username+"＜/username＞"

str = str+"＜emailaddress＞"+emailaddress+"＜/emailaddress＞"

str = str+"＜/user＞"

str = str+"＜/users＞"

out.print(str);

%＞

3 结束语

RIA技术是未来Web开发的一个重要发展方向,它集桌面应用程序与Web应用程序的特点于一体,能够实现复杂的数据交互与快速实时地响应,获得丰富的用户体验,必将成为企业级Web开发的重要技术。Flex是当今RIA体系中的主流技术之一,在RIA体系中处于领先地位。在Flex中可以与成熟的Web开发技术相结合,构建更为实用、互动更丰富的企业级应用。

参考文献

[1]Tapper J,Labriola M,Boles M,et al.Flex3权威指南[M].杨博,杜昱宏,等,译.北京:人民邮电出版社,2009

[2]Garret J J.用户体验的要素:以用户为中心的Web设计[M].范晓燕,译.北京:机械工业出版社,2008

[3]姜天格.Flex 3企业级Web应用系统设计与实现[M].北京:机械工业出版社,2008