使用HTML 5创建Flex的离线应用程序

康婧

摘要: HTML5和Flex技术都是目前比较流行的RIA解决方案，二者完全可以结合起来使用，从而共同增强Web应用程序，提高用户体验。关于离线存储这一重要特性，HTML 5中的localstorge就是用来支持这一特性的。而Flex技术在离线存储方面并没有标准实现，所以可以通过整合HTML 5这一特性，从而创建RIA的离线应用。本文首先会简要介绍HTML 5中的localstorge，然后通过实例来介绍具体的整合方法，从而使用HTML 5技术创建Flex的离线应用程序。

关键词：HTML5；Flex；AIR

中图分类号：TP311文献标识码：A文章编号：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

互联网的普及使得，基于浏览器服务器（B/S Browser/Server）的瘦客户端模式应用程序开始占据主流位置，Web的流行解决了C/ S应用程序部署和更新的困难。基于浏览器的瘦客户端应用程序是在Web服务器上部署和更新的，因此消除了将应用程序的任何部分显式部署到客户计算机并加以管理的必要性。但同时瘦客户端应用程序的缺点也比较明显：

1)由于采用了HTML页面形式的用户界面，由于受到网络速度的影响，所以客户端的数据处理能力较C/S应用程序有所下降，用户体验也相对较差，无法像C/S那样快速的响应用户请求以及使用丰富的效果来展示数据。

2)浏览器必须总是具有网络连接，这意味着用户在断开连接时将无法访问应用程序，当再次连接后，必须重新输入数据，这就增加了应用程序的使用的复杂度。

RIA技术的使用使得在数据处理方面，客户端和服务器端能够进行更好的平衡，共同分担数据处理的压力，同时RIA使用相对健壮的客户端描述引擎，能够提供响应速度快和图形丰富的用户界面。本文研究基于HTML5和Flex技术的离线存储，通过在客户端直接存储数据，可加速Web应用程序的响应。

1 HTML5离线存储

HTML标准自1999年12月发布的HTML 4.01后，后继的HTML 5和其它标准被束之高阁，为了推动web标准化运动的发展，一些公司联合起来，成立了一个叫做Web Hypertext Application Technology Working Group（Web超文本应用技术工作组- WHATWG）的组织，HTML5草案的前身名为Web Applications 1.0，於2004年被WHATWG提出，於2007年被W3C接纳，并成立了新的HTML工作团队。HTML 5的第一份正式草案已于2008年1月22日公布。HTML 5有两大特点：

新的布局元素，包括日历控件、地址卡、标尺和进度条，以及视频、音频的支持，强化了Web网页的表现性能。

Web存储，提供在客户端存储数据的新方法

HTML5提供了两种在客户端存储数据的新方法：

localStorage——没有时间限制的数据存储，这是HTML5新增的功能。

sessionStorage——针对一个session的数据存储

HTML5存储为Web站点提供了在本地计算机上存储和提取数据的方法，之前这些都是由Cookie机制完成的，但是Cookie只适应小数据量的数据存储，因为它们由每个对服务器的请求来传递，这使得Cookie速度很慢而且效率不高。在HTML5中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。HTML5使用JavaScript来存储和访问数据。

首先要检测浏览器是否支持HTML5存储，所以在使用HTML5时首先要检测使用的浏览器是否对HTML5支持，目前各主流浏览器对HTML5支持的情况如表1所示：

HTML5本地存储是基于键值对的，以键保存和提取数据，键Key是String类型的，而对应的存储数据可以是JavaScript支持的类型，但是真正存储时还是使用string的形式存储，所以在提取数据时要进行必要的强制类型转换，比如：parseInt(),parseFloat()等。虽然HTML5的存储空间变大，但是还是有大小限制，它的最大存储空间为5M，但是这对于以字符串存储的数据来说已经是不小的空间。

HTML5针对localStorage提供了必要的API接口，包括查找key对应的键值，以及添加删除键值对内容。

2 Flex技术

Flex采用ActionScript 3编程语言。ActionScript 3是一种强大的面向对象的编程语言，基于ECMAScript Language Speci6cation，Third Edition[1]。它是一个可构建具有表现力的移动、网络和桌面应用程序并且高效、免费的开放源框架。Flex允许您构建共享一个公共代码库的网络和移动应用程序，从而减少了应用程序创建的时间和成本以及长期维护[2]。目前比较成熟的几种RIA客户端开发技术包括Adobe Flash/Flex，JavaScript，Dojo，Microsoft的Avalon。

Adobe Flex是为满足希望开发RIA的企业级需求而推出的表示服务器和应用程序框架，它可以运行于J2EE、.NET、PHP和ColdFusion平台。Flex程序设计基于Flex UI组件库及基于XML的MXML来定义丰富的用户界面，利用面向对象的脚本语言（Ac? tionScript）来处理程序逻辑，由Flex服务器翻译成SWF格式的客户端应用程序，在Flash Player中运行。Flex提供了音频、视频和实时对话的综合通信技术使RIA具有前所未有的网上用户体验，具有高度互动性和丰富的用户体验。

Adobe AIR是Adobe针对网络与桌面应用的结合而开发出来的技术，可以不必经由浏览器而对网络上的云端程序做控制，也由于这是Adobe所开发的技术，因此能很顺利的与Adobe旗下的Flex、Flash等应用程序来进行开发[3]。Flex结合AIR也可以实现数据的离线存储功能，但是AIR需要安装，对于目前浏览器的普及程度来说，意义不是很大。AIR程序可以检测到网络的连接情况，当网络连接时AIR会把web服务器上的最新数据down下来保存在本地，可以是XML格式或者存储在本地数据库sqlLite中，一旦AIR程序检测到网络断开连接，AIR程序就开始使用本地的数据，以达到离线运行的功能。

3实例应用

前面介绍了HTML5的localStorage和Flex结合AIR技术在离线存储中的特点，下面我们选择把Flex和HTML5结合起来来展示一下离线存储的功能，把HTML5和Flex的优点结合起来。选择Flex作为表现层来展现我们的示例程序，再结合HTML5离线存储中localStorage功能，实现可离线运行的富互联网程序。Flex和HTML交互通过JavasCript来实现，这里只是简单的使用Flex的Ac? tionScript来调用JavasCript来实现该程序。

首先，在Flex端的ActionScript中通过ExternalInterface接口调用JavaScript代码来实现HTML页面登陆会员的信息保存。Flex的ExternalInterface.call()方法调用JavaScript函数，本例中就是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中的函数名称，可以传递也可以不传递参数给名字functionName对应的方法。在本例中log? in方法有两个参数，分别传递用户名和密码，JavaScript端的login函数如下所示：

function login(name,password)

{

//首先判断浏览器是否支持HTML5的localStorage

if(typeof(localStorage) == undefined)

{

alert(Your browser does not support HTML5 localStorage);

}else {

try {

//将键值对存储于localStorage中localStorage.setItem(name, password);

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

//从localStorage中提取数据，用于修改页面标题

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标签嵌入到HTML中，Flex接受服务器端的数据然后保存到HTML5中的localStorage中，这样在网络中断后就可以使用flash调用HTML5的localStorage存储的数据来显示内容，实现数据的离线显示。

4结束语

该文介绍了Flex结合AIR的离线存储以及HTML5的localStorage离线存储的特点，提出利用Flex技术和HTML5结合在一起，以Flex作为表现层提供很好的交互性，再利用HTML5的localStorage功能，实现真正意义上的离线运行的web程序。其中涉及到Flex对JavaScript方法的调用，对于大规模应用的开发尚需深入研究，但是通过本文相关技术的介绍，可以为离线web程序的开发提供解决思路，开发出更能满足各种需求的web程序。

参考文献：

[1] Adobe Flex.构建具有表现力的跨平台移动、网络和桌面应用程序[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.