用HTML5开发移动应用

龙源期刊网

用HTML5开发移动应用

作者：亢华爱

来源：《科技创新导报》2012年第07期

摘 要:自2010年发布 Sencha Touch最初版本,HTML5和移动网络的发展也突飞猛进,许多开发人员以移动网络作为创建应用程序的一个平台,Sencha Touch框架在其中发挥了重要作用,尤其是加速了基于 HTML5 浏览器的应用普及。本文通过示例的方式对Sencha Touch的使用进行介绍

关键词:Sencha Touch HTML5 webkit

中图分类号:TP274 文献标识码:A 文章编号:1674-098X(2012)3(a)-0030-03

Sencha Touch是第一个HTML5移动开发框架,Sencha Touch能够快速地构造出基于HTML5的手机应用,通过它构造出来的程序有着与原生应用一致的用户体验,目前该框架兼容Android、iOS、BlackBerry这些主流手机平台。ExtJS是用于创建网络前端用户界面的,它是与后台技术无关的前端Ajax框架,其功能丰富,无论是界面之美,还是功能之强都高居榜首。现在ExtJS整合JQTouch等推出了适用于前沿Touch Web的Sencha Touch的框架,该框架是第一个基于HTML5的Mobile App框架,同时ExtJS更名为Sencha。Sencha Touch可以让你的Web

App体现出美妙的用户界面和丰富的数据管理,它基于最新的HTML5和CSS3的WEB标准,全面兼容Android、Apple iOS、BlackBerry设备。在个人机上,它兼容webkit为核心的浏览器,如:chrome、safari、maxthon等。

1 Sencha Touch特性介绍

(1)基于最新的WEB标准,HTML5,CSS3,JavaScript。整个库在压缩成gzip后大约只有80KB,通过禁用一些组件还会使它更小。

(2)支持世界上最好的设备,Beta版兼容Android和iOS,Android上的开发人员还可以使用一些专为Android定制的应用。

(3)增强的触摸事件,在touchstart、touchend等标准事件基础上,增加了一组自定义事件数据集成,如tap、swipe、pinch、rotate等。

(4)数据集成,提供了强大的数据包,通过Ajax、JSONp、YQL等方式绑定到组件模板,写入本地离线存储。

2 做好准备工作

龙源期刊网

首先,我们下载最新的Sencha Touch SDK并解压至Web服务器根目录。下载Sencha Touch

2.0的地址:/touch/。查看2.0文档:/touch/2-0/。Sencha Touch 2.0 中所有被广泛使用的类在API目录中都有,在这些文档里面还有很多演示示例,并可以修改它们。文档中还包括所有组件,你可以清楚的了解这些组件。该文档还详细解释了Layouts, Components and Classes,如何使用tab panels,

forms and carousels。Sencha Touch 2.0 的新功能可去这里了解:/discussion/61/sencha-touch-2-what-s-new-in-sencha-touch-2.0。

总而言之,需要一个免费的Sencha Touch SDK,一个本机的web服务器和一个支持HTML5的浏览器。如果你没有Web服务器,建议安装WAMP或者MAMP。

完成上述工作后,只需要用浏览器打开localhost/sencha-touch-folder,你就能看到欢迎界面了。

3 通过网络学习示例

在/taxonomy/term/261里,有一个《使用sencha touch开发新浪微博iPhone界面》的示例,看了以后相信不少对sencha touch感兴趣的人会为Javascript能开发出这样的手机Web App应用而感到兴奋。Sencha Touch提供相当多的原生UI组件,以满足手机上的UI设计。这个示例以iPhone界面作为参考,使用Sencha Touch开发设计模仿iPhone界面:

以iPhone的界面目标作为参考对比Sencha Touch实现的界面(如表1):

具体实现见:/archives/sencha-touch-develop-sina-weibo-iPhone-page/

再来看一个示例:

首先看文件:

龙源期刊网

它引入了Sencha Touch框架的js文件和css文件和代码文件:,body标签的内容为空。接下来看文件中的内容,这里只是弹出一个警告对话框:

ation({

name:‟Sencha‟,

launch:function(){

alert(„launched‟);

}});

接下来我们启动Safari,看看他是否如我们预期的一样,或者点击代码左侧的“眼睛”图标来查看运行的效果。警报消息的弹出意味着Sencha Touch已经正确地被加载运行了。现在开始构建界面:一个TabPanel,TabPanel是一个标签式的界面,允许你在多个页面之间浏览:

ation({

name:‟Sencha‟,

launch:function(){

(“el”,{

fullscreen:true,

items:[

{

title:‟Home‟,

iconCls:‟home‟,

html:‟Welcome‟

}]});}});

龙源期刊网

现在,TabPanel已经显示在屏幕上了,但把标签放在顶部有点不大好看、主页按钮似乎也有些单调、还没有任何内容。

下面修改tabBarPosition配置项并添加一些HTML内容:

ation({

name:‟Sencha‟,

launch:function(){

(“el”,{

fullscreen:true,

tabBarPosition:‟bottom‟, // tabBar设在下方

items:[

{

title:‟Home‟,

iconCls:‟home‟, //添加Tab的图标

html:[ //添加内容

„

Welcome to Sencha Touch

‟,

“

You‟re creating the Getting Started app. This demonstrates how ”

“to use tabs,lists and forms to create a simple app

„

Sencha Touch (2.0.0prl)

‟

龙源期刊网

].join(“”)}]});}});

到目前为止,我们已经有了一些HTML内容了,调整一下格式。设置HTML内容的样式,只要给panel添加cls配置项即可。下面再深入一下,我们希望在一个单独的选项卡显示我们的内容,在这里先选用一些虚构的数据。

ation({

name:‟Sencha‟,

launch:function(){

(“el”,{

fullscreen:true,

tabBarposition:‟bottom‟,

items:[

{

title:‟Home‟,

iconCls:‟home‟,

cls:‟home‟,

html:[

‟

Welcome to Sencha Touch

‟,

”

You‟re creating the Getting Started app. This demonstrates how ”

”to use tabs, lists and forms to create a simple app

‟

龙源期刊网

Sencha Touch (2.0.0pr1)

‟

].join(””)

},{

xtype:‟list‟,

title:‟Blog‟,

iconCls:‟star‟,

itemTp1:‟{title}‟,

store:{

fields:[‟title‟,‟url‟],

data:[

{title:‟Ext Scheduler 2.0‟,url:‟ext-scheduler-2-0-upgradin‟}

{title:‟Previewing Sencha Touch 2‟,url:‟sencha-touch-2-wha‟ }

{title:‟Sencha Con 2011‟,url:‟senchacon-2011-now-packen-w‟}

{title:‟Documentation in Ext JS 4‟,url:‟new-ext-js-4-docu‟}

]}}]

}).setActiveItem(1);}});

最后添加一个联系表格,一个tab,包含一个FromPanel和一个FieldSet:

ation({

name:‟Sencha‟,

launch:function(){

(“el”,{

fullscreen:true,

龙源期刊网

tabBarPosition:‟bottom‟,

items:[

{

title:‟Home‟,

iconCls:‟home‟,

cls: ‟home‟,

html:[

„

Welcome to Sencha Touch

‟,

“

You‟re creating the Getting Started app. This demonstrates how ”

“to use tabs,lists and forms to create a simple app

„

Sencha Touch (2.0.0prl)

‟

].join(“”)

},{

xtype:‟list‟,

title:‟Blog‟,

iconCls:‟star‟,

itemTpl:‟{ title }‟,

store:{

龙源期刊网

fields:[„title‟,‟url‟],

data:[

{title:‟Ext Scheduler 2.0‟,url:‟ext-scheduler-2-0-upgradin‟}

{title:‟Previewing Sencha Touch 2‟,url:‟sencha-touch-2-wha‟ }

{title:‟Sencha Con 2011‟,url:‟senchacon-2011-now-packen-w‟}

{title:‟Documentation in Ext JS 4‟,url:‟new-ext-js-4-docu‟}

]}

},{

title:‟Contact‟,

iconCls:'user',

xtype:'formpanel',

url:'',

layout:'vbox',

items:[ {

xtype:'fieldset',

title:'Contact Us',

instructions:'(email address is optional)',

items:[ {

xtype:'textfield',

label:'Name',

}, {

xtype:'emailfield',

label:'Email',

龙源期刊网

}, {

xtype:'textareafield',

label:'Message',

} ]}, {

xtype:'button',

text:'Send',

ui:'confirm',

handler: function() {

('formpanel').submit();

} } ]]

}).setActiveItem(2);}});

在第三个tab中,添加了一个表格,其中包含三个字段和一个提交按钮,使用了VBOX布局来定位下方的提交按钮,fieldset配置了一个title和一些instructions,用了一个textfield,一个emailfield和一个textareafield。

4 结论

Sencha Touch需要有以下文件:一个HTML文件,其中引入Sencha Touch框架以及应用程序文件,一个应用程序文件,它定义主屏幕的图标和程序启动时所需要做的事件,框架文件的副本touch。现在我们看到了已经完成了的非常基本的应用程序,往下可以学习使用框架的其他部分了,网上提供许多开发指南和组件的示例供大家学习,相信随着Beta版的发展,将会有更多的指南为构建不同规模的应用程序而推出。