康婧

摘要: HTML5和Flex技術(shù)都是目前比較流行的RIA解決方案，二者完全可以結(jié)合起來使用，從而共同增強(qiáng)Web應(yīng)用程序，提高用戶體驗(yàn)。關(guān)于離線存儲(chǔ)這一重要特性，HTML 5中的localstorge就是用來支持這一特性的。而Flex技術(shù)在離線存儲(chǔ)方面并沒有標(biāo)準(zhǔn)實(shí)現(xiàn)，所以可以通過整合HTML 5這一特性，從而創(chuàng)建RIA的離線應(yīng)用。本文首先會(huì)簡(jiǎn)要介紹HTML 5中的localstorge，然后通過實(shí)例來介紹具體的整合方法，從而使用HTML 5技術(shù)創(chuàng)建Flex的離線應(yīng)用程序。

關(guān)鍵詞：HTML5；Flex；AIR

中圖分類號(hào)：TP311文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2012)01-0059-03

Create Flex Offline Application with HTML5 Technology

KANG Jing

(Anhui University of Science & Technology, Huainan 232038, China)

Abstract: HTML5 and Flex technologies are currently more popular RIA solutions, combining the two can be used to enhance Web application, and to improve the user experience. The important feature of offline storage, HTML5 use localstorage feature to support. In off-line storage, Flex doesnt have standard implementation, so we can create RIA application of offline through the integration of HT? ML5 and Flex. This paper will first briefly introduce the localstorage feature of HTML5, then use the example to introduce the integration of method to use the HTML5 technology to create Flex offline application.

Key words: HTML5; Flex; AIR

互聯(lián)網(wǎng)的普及使得，基于瀏覽器服務(wù)器（B/S Browser/Server）的瘦客戶端模式應(yīng)用程序開始占據(jù)主流位置，Web的流行解決了C/ S應(yīng)用程序部署和更新的困難?；跒g覽器的瘦客戶端應(yīng)用程序是在Web服務(wù)器上部署和更新的，因此消除了將應(yīng)用程序的任何部分顯式部署到客戶計(jì)算機(jī)并加以管理的必要性。但同時(shí)瘦客戶端應(yīng)用程序的缺點(diǎn)也比較明顯：

1)由于采用了HTML頁面形式的用戶界面，由于受到網(wǎng)絡(luò)速度的影響，所以客戶端的數(shù)據(jù)處理能力較C/S應(yīng)用程序有所下降，用戶體驗(yàn)也相對(duì)較差，無法像C/S那樣快速的響應(yīng)用戶請(qǐng)求以及使用豐富的效果來展示數(shù)據(jù)。

2)瀏覽器必須總是具有網(wǎng)絡(luò)連接，這意味著用戶在斷開連接時(shí)將無法訪問應(yīng)用程序，當(dāng)再次連接后，必須重新輸入數(shù)據(jù)，這就增加了應(yīng)用程序的使用的復(fù)雜度。

RIA技術(shù)的使用使得在數(shù)據(jù)處理方面，客戶端和服務(wù)器端能夠進(jìn)行更好的平衡，共同分擔(dān)數(shù)據(jù)處理的壓力，同時(shí)RIA使用相對(duì)健壯的客戶端描述引擎，能夠提供響應(yīng)速度快和圖形豐富的用戶界面。本文研究基于HTML5和Flex技術(shù)的離線存儲(chǔ)，通過在客戶端直接存儲(chǔ)數(shù)據(jù)，可加速Web應(yīng)用程序的響應(yīng)。

1 HTML5離線存儲(chǔ)

HTML標(biāo)準(zhǔn)自1999年12月發(fā)布的HTML 4.01后，后繼的HTML 5和其它標(biāo)準(zhǔn)被束之高閣，為了推動(dòng)web標(biāo)準(zhǔn)化運(yùn)動(dòng)的發(fā)展，一些公司聯(lián)合起來，成立了一個(gè)叫做Web Hypertext Application Technology Working Group（Web超文本應(yīng)用技術(shù)工作組- WHATWG）的組織，HTML5草案的前身名為Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有兩大特點(diǎn)：

新的布局元素，包括日歷控件、地址卡、標(biāo)尺和進(jìn)度條，以及視頻、音頻的支持，強(qiáng)化了Web網(wǎng)頁的表現(xiàn)性能。

Web存儲(chǔ)，提供在客戶端存儲(chǔ)數(shù)據(jù)的新方法

HTML5提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的新方法：

localStorage——沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)，這是HTML5新增的功能。

sessionStorage——針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)

HTML5存儲(chǔ)為Web站點(diǎn)提供了在本地計(jì)算機(jī)上存儲(chǔ)和提取數(shù)據(jù)的方法，之前這些都是由Cookie機(jī)制完成的，但是Cookie只適應(yīng)小數(shù)據(jù)量的數(shù)據(jù)存儲(chǔ)，因?yàn)樗鼈冇擅總€(gè)對(duì)服務(wù)器的請(qǐng)求來傳遞，這使得Cookie速度很慢而且效率不高。在HTML5中，數(shù)據(jù)不是由每個(gè)服務(wù)器請(qǐng)求傳遞的，而是只有在請(qǐng)求時(shí)使用數(shù)據(jù)。它使在不影響網(wǎng)站性能的情況下存儲(chǔ)大量數(shù)據(jù)成為可能。對(duì)于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。HTML5使用JavaScript來存儲(chǔ)和訪問數(shù)據(jù)。

首先要檢測(cè)瀏覽器是否支持HTML5存儲(chǔ)，所以在使用HTML5時(shí)首先要檢測(cè)使用的瀏覽器是否對(duì)HTML5支持，目前各主流瀏覽器對(duì)HTML5支持的情況如表1所示：

HTML5本地存儲(chǔ)是基于鍵值對(duì)的，以鍵保存和提取數(shù)據(jù)，鍵Key是String類型的，而對(duì)應(yīng)的存儲(chǔ)數(shù)據(jù)可以是JavaScript支持的類型，但是真正存儲(chǔ)時(shí)還是使用string的形式存儲(chǔ)，所以在提取數(shù)據(jù)時(shí)要進(jìn)行必要的強(qiáng)制類型轉(zhuǎn)換，比如：parseInt(),parseFloat()等。雖然HTML5的存儲(chǔ)空間變大，但是還是有大小限制，它的最大存儲(chǔ)空間為5M，但是這對(duì)于以字符串存儲(chǔ)的數(shù)據(jù)來說已經(jīng)是不小的空間。

HTML5針對(duì)localStorage提供了必要的API接口，包括查找key對(duì)應(yīng)的鍵值，以及添加刪除鍵值對(duì)內(nèi)容。

2 Flex技術(shù)

Flex采用ActionScript 3編程語言。ActionScript 3是一種強(qiáng)大的面向?qū)ο蟮木幊陶Z言，基于ECMAScript Language Speci6cation，Third Edition[1]。它是一個(gè)可構(gòu)建具有表現(xiàn)力的移動(dòng)、網(wǎng)絡(luò)和桌面應(yīng)用程序并且高效、免費(fèi)的開放源框架。Flex允許您構(gòu)建共享一個(gè)公共代碼庫的網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序，從而減少了應(yīng)用程序創(chuàng)建的時(shí)間和成本以及長(zhǎng)期維護(hù)[2]。目前比較成熟的幾種RIA客戶端開發(fā)技術(shù)包括Adobe Flash/Flex，JavaScript，Dojo，Microsoft的Avalon。

Adobe Flex是為滿足希望開發(fā)RIA的企業(yè)級(jí)需求而推出的表示服務(wù)器和應(yīng)用程序框架，它可以運(yùn)行于J2EE、.NET、PHP和ColdFusion平臺(tái)。Flex程序設(shè)計(jì)基于Flex UI組件庫及基于XML的MXML來定義豐富的用戶界面，利用面向?qū)ο蟮哪_本語言（Ac? tionScript）來處理程序邏輯，由Flex服務(wù)器翻譯成SWF格式的客戶端應(yīng)用程序，在Flash Player中運(yùn)行。Flex提供了音頻、視頻和實(shí)時(shí)對(duì)話的綜合通信技術(shù)使RIA具有前所未有的網(wǎng)上用戶體驗(yàn)，具有高度互動(dòng)性和豐富的用戶體驗(yàn)。

Adobe AIR是Adobe針對(duì)網(wǎng)絡(luò)與桌面應(yīng)用的結(jié)合而開發(fā)出來的技術(shù)，可以不必經(jīng)由瀏覽器而對(duì)網(wǎng)絡(luò)上的云端程序做控制，也由于這是Adobe所開發(fā)的技術(shù)，因此能很順利的與Adobe旗下的Flex、Flash等應(yīng)用程序來進(jìn)行開發(fā)[3]。Flex結(jié)合AIR也可以實(shí)現(xiàn)數(shù)據(jù)的離線存儲(chǔ)功能，但是AIR需要安裝，對(duì)于目前瀏覽器的普及程度來說，意義不是很大。AIR程序可以檢測(cè)到網(wǎng)絡(luò)的連接情況，當(dāng)網(wǎng)絡(luò)連接時(shí)AIR會(huì)把web服務(wù)器上的最新數(shù)據(jù)down下來保存在本地，可以是XML格式或者存儲(chǔ)在本地?cái)?shù)據(jù)庫sqlLite中，一旦AIR程序檢測(cè)到網(wǎng)絡(luò)斷開連接，AIR程序就開始使用本地的數(shù)據(jù)，以達(dá)到離線運(yùn)行的功能。

3實(shí)例應(yīng)用

前面介紹了HTML5的localStorage和Flex結(jié)合AIR技術(shù)在離線存儲(chǔ)中的特點(diǎn)，下面我們選擇把Flex和HTML5結(jié)合起來來展示一下離線存儲(chǔ)的功能，把HTML5和Flex的優(yōu)點(diǎn)結(jié)合起來。選擇Flex作為表現(xiàn)層來展現(xiàn)我們的示例程序，再結(jié)合HTML5離線存儲(chǔ)中l(wèi)ocalStorage功能，實(shí)現(xiàn)可離線運(yùn)行的富互聯(lián)網(wǎng)程序。Flex和HTML交互通過JavasCript來實(shí)現(xiàn)，這里只是簡(jiǎn)單的使用Flex的Ac? tionScript來調(diào)用JavasCript來實(shí)現(xiàn)該程序。

首先，在Flex端的ActionScript中通過ExternalInterface接口調(diào)用JavaScript代碼來實(shí)現(xiàn)HTML頁面登陸會(huì)員的信息保存。Flex的ExternalInterface.call()方法調(diào)用JavaScript函數(shù)，本例中就是JavaScript的login方法。

Public function callLogin():void {

if (ExternalInterface.available) {

var wrapperFunction:String = "login";

ExternalInterface.call(wrapperFunction,key.text,val.text);

} else {

trace("Wrapper not available");

}

}

其中wrapperFunction為JavaScript中的函數(shù)名稱，可以傳遞也可以不傳遞參數(shù)給名字functionName對(duì)應(yīng)的方法。在本例中l(wèi)og? in方法有兩個(gè)參數(shù)，分別傳遞用戶名和密碼，JavaScript端的login函數(shù)如下所示：

function login(name,password)

{

//首先判斷瀏覽器是否支持HTML5的localStorage

if(typeof(localStorage) == undefined)

{

alert(Your browser does not support HTML5 localStorage);

}else {

try {

//將鍵值對(duì)存儲(chǔ)于localStorage中l(wèi)ocalStorage.setItem(name, password);

if(localStorage.getItem(a)!=null){

//從localStorage中提取數(shù)據(jù)，用于修改頁面標(biāo)題

window.document.title = localStorage.getItem(a);

alert("Page Title has been changed");

}

}

catch(e){

if(e == QUOTA_EXCEEDED_ERR) {

alert(Quota exeeded!);

}

}

}

這樣把Flex生成的flash文件通過object標(biāo)簽嵌入到HTML中，F(xiàn)lex接受服務(wù)器端的數(shù)據(jù)然后保存到HTML5中的localStorage中，這樣在網(wǎng)絡(luò)中斷后就可以使用flash調(diào)用HTML5的localStorage存儲(chǔ)的數(shù)據(jù)來顯示內(nèi)容，實(shí)現(xiàn)數(shù)據(jù)的離線顯示。

4結(jié)束語

該文介紹了Flex結(jié)合AIR的離線存儲(chǔ)以及HTML5的localStorage離線存儲(chǔ)的特點(diǎn)，提出利用Flex技術(shù)和HTML5結(jié)合在一起，以Flex作為表現(xiàn)層提供很好的交互性，再利用HTML5的localStorage功能，實(shí)現(xiàn)真正意義上的離線運(yùn)行的web程序。其中涉及到Flex對(duì)JavaScript方法的調(diào)用，對(duì)于大規(guī)模應(yīng)用的開發(fā)尚需深入研究，但是通過本文相關(guān)技術(shù)的介紹，可以為離線web程序的開發(fā)提供解決思路，開發(fā)出更能滿足各種需求的web程序。

參考文獻(xiàn)：

[1] Adobe Flex.構(gòu)建具有表現(xiàn)力的跨平臺(tái)移動(dòng)、網(wǎng)絡(luò)和桌面應(yīng)用程序[EB/OL]. http://www.adobe.com/cn/products/flex/.2009.

[2] Adobe. Adobe Labs[EB/OL].http://labs.adobe.com/wiki/index.php/ActionScript_3. 2001.

[3]維基百科. Adobe AIR[EB/OL].http://zh.wikipedia.org/wiki/Adobe_AIR. 2011.