Ｆｌｅｘ技術(shù)在企業(yè)網(wǎng)站開(kāi)發(fā)中的應(yīng)用

徐　鹥

摘要 Adobe Flex是一個(gè)用于創(chuàng)建RIA應(yīng)用程序的開(kāi)源框架,其創(chuàng)建的內(nèi)容運(yùn)行于Adobe Flash Player中,集桌面應(yīng)用的強(qiáng)大功能與Web應(yīng)用的高效性于一體。Flex使用MXML和ActionScript語(yǔ)言進(jìn)行編程。闡述使用Flex技術(shù)構(gòu)建企業(yè)網(wǎng)站的優(yōu)勢(shì),并探討相關(guān)的連接數(shù)據(jù)庫(kù)的技術(shù)。

關(guān)鍵詞 Flex;Flash;RIA;Web開(kāi)發(fā)

中圖分類(lèi)號(hào):TP312 文獻(xiàn)標(biāo)識(shí)碼:B 文章編號(hào):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)即豐富互聯(lián)網(wǎng)應(yīng)用程序,其特點(diǎn)體現(xiàn)在一個(gè)“富”字上。傳統(tǒng)的HTML頁(yè)面帶給用戶的頁(yè)面元素是極其有限的,在功能上也存在很大不足。RIA的界面是“豐富”的,同時(shí)具備桌面應(yīng)用程序的特點(diǎn)和Web應(yīng)用程序特點(diǎn)。目前RIA體系主要有Flex/Flash、Ajax、Silverlight、JavaFX等。

桌面應(yīng)用程序的特點(diǎn)包括:在消息確認(rèn)和格式編排方面提供互動(dòng)用戶界面;在無(wú)刷新頁(yè)面之下提供快捷的界面響應(yīng)時(shí)間;提供通用的用戶界面特性,如拖放式操作以及在線和離線操作能力。Web應(yīng)用程序的特點(diǎn)包括立即部署、跨平臺(tái)、采用逐步下載來(lái)檢索內(nèi)容和數(shù)據(jù),可以充分利用互聯(lián)網(wǎng)的標(biāo)準(zhǔn)。

Flex是Adobe官方推出的應(yīng)用于RIA體系的開(kāi)發(fā)平臺(tái),它使用ActionScript與MXML語(yǔ)言進(jìn)行編程[1]。傳統(tǒng)Web程序的開(kāi)發(fā)是基于Web頁(yè)面與服務(wù)器端數(shù)據(jù)交互的模式,把Web程序的表示層建立于HTML頁(yè)面之上,而HTML是適合于文本的,與HTML不同的是,MXML可對(duì)表示層邏輯與用戶界面和服務(wù)器端數(shù)據(jù)綁定提供聲明抽象,將表示與業(yè)務(wù)邏輯的問(wèn)題徹底分開(kāi),以實(shí)現(xiàn)最大限度地提高開(kāi)發(fā)人員的生產(chǎn)率及應(yīng)用程序的重復(fù)使用率。

1 Flex技術(shù)的優(yōu)勢(shì)

傳統(tǒng)企業(yè)網(wǎng)站使用基于HTML/CSS為前臺(tái)的動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)來(lái)構(gòu)建,如ASP/ASP.Net、PHP、JSP等,前臺(tái)展示元素為HTML/CSS,由瀏覽器負(fù)責(zé)解析HTML代碼來(lái)實(shí)現(xiàn)內(nèi)容的展示。HTML是適用于文本的,因此無(wú)法完成復(fù)雜數(shù)據(jù)的用戶交互,當(dāng)個(gè)體數(shù)據(jù)刷新時(shí)需要刷新整個(gè)頁(yè)面。而且由于各瀏覽器的技術(shù)標(biāo)準(zhǔn)不統(tǒng)一(例如對(duì)CSS的支持標(biāo)準(zhǔn)),如果網(wǎng)頁(yè)沒(méi)有使用Web標(biāo)準(zhǔn)來(lái)建構(gòu)的話,在不同的瀏覽器中展現(xiàn)時(shí)將會(huì)出現(xiàn)不一致的情況[2]。

基于Flex技術(shù)的RIA架構(gòu)使用Flash Player作為客戶端,Flash Player具備廣泛的用戶群體,全球98%的瀏覽器都安裝了Flash Player,能夠正常瀏覽Flash內(nèi)容。Flex是通過(guò)Java、PHP或是.Net等途徑來(lái)進(jìn)行客戶端與服務(wù)端通信的,在服務(wù)端解釋MXML內(nèi)容,并生成相應(yīng)的SWF內(nèi)容發(fā)送至客戶端Flash Player中呈現(xiàn)?？蛻舳说淖饔貌粌H是展示頁(yè)面,它還可以將用戶的請(qǐng)求異步地進(jìn)行計(jì)算、傳送和檢索數(shù)據(jù)、顯示集成的用戶界面。

使用Flex技術(shù)構(gòu)建企業(yè)網(wǎng)站,可以充分體現(xiàn)RIA的優(yōu)勢(shì)。由于其內(nèi)容是在Flash Player中呈現(xiàn)的,不僅能在多種瀏覽器中展現(xiàn)一致,還能獲得較為豐富的用戶體驗(yàn)。對(duì)于企業(yè)來(lái)說(shuō),部署Flex可以繼續(xù)使用現(xiàn)有的Web應(yīng)用程序模型(包括J2EE和.NET),無(wú)需大規(guī)模替換現(xiàn)有的Web應(yīng)用程序。

Flex對(duì)前臺(tái)的表現(xiàn)力進(jìn)行大幅度的增強(qiáng),進(jìn)一步提升界面的友好程度,并且減少用戶與系統(tǒng)的遠(yuǎn)程交互頻率,可以輕松構(gòu)建更為直觀、易于使用、反應(yīng)更迅速的Web應(yīng)用程序。

2 在Flex中連接數(shù)據(jù)庫(kù)的方式

在企業(yè)級(jí)Web的開(kāi)發(fā)中,比較關(guān)鍵的技術(shù)就是前臺(tái)頁(yè)面與后臺(tái)程序?qū)崿F(xiàn)數(shù)據(jù)交互的技術(shù)。Flex提供3種數(shù)據(jù)交互的方式:HttpService,WebService和RemoteObject[3]。其中HttpService可以通過(guò)JSP、ASP/ASP.net或是PHP來(lái)讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù),還可以直接獲取XML文檔中的數(shù)據(jù);WebService方法通過(guò)WebService中間件技術(shù)來(lái)實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的操作;使用RemoteObject方法首先要安裝Flex Data Service,這是一個(gè)免費(fèi)的服務(wù)程序,然后使用ActionScript中的RemoteObject類(lèi)來(lái)連接遠(yuǎn)程服務(wù)程序,以實(shí)現(xiàn)對(duì)數(shù)據(jù)庫(kù)的操作。遠(yuǎn)程服務(wù)程序可以由ASP/ASP.net、Java、PHP等程序來(lái)編寫(xiě)。

例如使用HttpService方式與Java進(jìn)行通信,所編寫(xiě)的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"＞//定義數(shù)據(jù)網(wǎng)格控件

＜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＞

編寫(xiě)的data.jsp文件內(nèi)容如下:

＜%@ 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 結(jié)束語(yǔ)

RIA技術(shù)是未來(lái)Web開(kāi)發(fā)的一個(gè)重要發(fā)展方向,它集桌面應(yīng)用程序與Web應(yīng)用程序的特點(diǎn)于一體,能夠?qū)崿F(xiàn)復(fù)雜的數(shù)據(jù)交互與快速實(shí)時(shí)地響應(yīng),獲得豐富的用戶體驗(yàn),必將成為企業(yè)級(jí)Web開(kāi)發(fā)的重要技術(shù)。Flex是當(dāng)今RIA體系中的主流技術(shù)之一,在RIA體系中處于領(lǐng)先地位。在Flex中可以與成熟的Web開(kāi)發(fā)技術(shù)相結(jié)合,構(gòu)建更為實(shí)用、互動(dòng)更豐富的企業(yè)級(jí)應(yīng)用。

參考文獻(xiàn)

[1]Tapper J,Labriola M,Boles M,et al.Flex3權(quán)威指南[M].楊博,杜昱宏,等,譯.北京:人民郵電出版社,2009

[2]Garret J J.用戶體驗(yàn)的要素:以用戶為中心的Web設(shè)計(jì)[M].范曉燕,譯.北京:機(jī)械工業(yè)出版社,2008

[3]姜天格.Flex 3企業(yè)級(jí)Web應(yīng)用系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[M].北京:機(jī)械工業(yè)出版社,2008