Ｆｌｅｘ技術在企業網站開發中的應用

徐　鹥

摘要 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