摘 要:自2010年發(fā)布 Sencha Touch最初版本，HTML5和移動(dòng)網(wǎng)絡(luò)的發(fā)展也突飛猛進(jìn)，許多開發(fā)人員以移動(dòng)網(wǎng)絡(luò)作為創(chuàng)建應(yīng)用程序的一個(gè)平臺(tái)，Sencha Touch框架在其中發(fā)揮了重要作用，尤其是加速了基于 HTML5 瀏覽器的應(yīng)用普及。本文通過示例的方式對(duì)Sencha Touch的使用進(jìn)行介紹

關(guān)鍵詞:Sencha Touch HTML5 webkit

中圖分類號(hào):TP274文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1674-098X(2012)3(a)-0030-03

Sencha Touch是第一個(gè)HTML5移動(dòng)開發(fā)框架，Sencha Touch能夠快速地構(gòu)造出基于HTML5的手機(jī)應(yīng)用，通過它構(gòu)造出來的程序有著與原生應(yīng)用一致的用戶體驗(yàn)，目前該框架兼容Android、iOS、BlackBerry這些主流手機(jī)平臺(tái)。ExtJS是用于創(chuàng)建網(wǎng)絡(luò)前端用戶界面的，它是與后臺(tái)技術(shù)無關(guān)的前端Ajax框架，其功能豐富，無論是界面之美，還是功能之強(qiáng)都高居榜首。現(xiàn)在ExtJS整合JQTouch等推出了適用于前沿Touch Web的Sencha Touch的框架，該框架是第一個(gè)基于HTML5的Mobile App框架，同時(shí)ExtJS更名為Sencha。Sencha Touch可以讓你的Web App體現(xiàn)出美妙的用戶界面和豐富的數(shù)據(jù)管理，它基于最新的HTML5和CSS3的WEB標(biāo)準(zhǔn)，全面兼容Android、Apple iOS、BlackBerry設(shè)備。在個(gè)人機(jī)上，它兼容webkit為核心的瀏覽器，如:chrome、safari、maxthon等。

1 Sencha Touch特性介紹

(1)基于最新的WEB標(biāo)準(zhǔn)，HTML5，CSS3，JavaScript。整個(gè)庫在壓縮成gzip后大約只有80KB，通過禁用一些組件還會(huì)使它更小。

(2)支持世界上最好的設(shè)備，Beta版兼容Android和iOS，Android上的開發(fā)人員還可以使用一些專為Android定制的應(yīng)用。

(3)增強(qiáng)的觸摸事件，在touchstart、touchend等標(biāo)準(zhǔn)事件基礎(chǔ)上，增加了一組自定義事件數(shù)據(jù)集成，如tap、swipe、pinch、rotate等。

(4)數(shù)據(jù)集成，提供了強(qiáng)大的數(shù)據(jù)包，通過Ajax、JSONp、YQL等方式綁定到組件模板，寫入本地離線存儲(chǔ)。

2 做好準(zhǔn)備工作

首先，我們下載最新的Sencha Touch SDK并解壓至Web服務(wù)器根目錄。下載Sencha Touch 2.0的地址:http://cdn.sencha.io/touch/sencha-touch-2.0.0-pr1.zip。查看2.0文檔:http://docs.sencha.com/touch/2-0/。Sencha Touch 2.0 中所有被廣泛使用的類在API目錄中都有，在這些文檔里面還有很多演示示例，并可以修改它們。文檔中還包括所有組件，你可以清楚的了解這些組件。該文檔還詳細(xì)解釋了Layouts， Components and Classes，如何使用tab panels， forms and carousels。Sencha Touch 2.0 的新功能可去這里了解:http://html5mobi.gotoip1.com/discussion/61/sencha-touch-2-what-s-new-in-sencha-touch-2.0。

總而言之，需要一個(gè)免費(fèi)的Sencha Touch SDK，一個(gè)本機(jī)的web服務(wù)器和一個(gè)支持HTML5的瀏覽器。如果你沒有Web服務(wù)器，建議安裝WAMP或者M(jìn)AMP。

完成上述工作后，只需要用瀏覽器打開http://localhost/sencha-touch-folder，你就能看到歡迎界面了。

3 通過網(wǎng)絡(luò)學(xué)習(xí)示例

在http://extjs.org.cn/taxonomy/term/261里，有一個(gè)《使用sencha touch開發(fā)新浪微博iPhone界面》的示例，看了以后相信不少對(duì)sencha touch感興趣的人會(huì)為Javascript能開發(fā)出這樣的手機(jī)Web App應(yīng)用而感到興奮。Sencha Touch提供相當(dāng)多的原生UI組件，以滿足手機(jī)上的UI設(shè)計(jì)。這個(gè)示例以iPhone界面作為參考，使用Sencha Touch開發(fā)設(shè)計(jì)模仿iPhone界面:

以iPhone的界面目標(biāo)作為參考對(duì)比Sencha Touch實(shí)現(xiàn)的界面(如表1):

具體實(shí)現(xiàn)見:http://www.imsankyu.com/archives/sencha-touch-develop-sina-weibo-iPhone-page/

再來看一個(gè)示例:

首先看index.html文件:

它引入了Sencha Touch框架的js文件和css文件和代碼文件:app.js，body標(biāo)簽的內(nèi)容為空。接下來看app.js文件中的內(nèi)容，這里只是彈出一個(gè)警告對(duì)話框:

Ext.application({

name:’Sencha’，

launch:function(){

alert(‘launched’);

}});

接下來我們啟動(dòng)Safari，看看他是否如我們預(yù)期的一樣，或者點(diǎn)擊代碼左側(cè)的“眼睛”圖標(biāo)來查看運(yùn)行的效果。警報(bào)消息的彈出意味著Sencha Touch已經(jīng)正確地被加載運(yùn)行了。現(xiàn)在開始構(gòu)建界面:一個(gè)TabPanel，TabPanel是一個(gè)標(biāo)簽式的界面，允許你在多個(gè)頁面之間瀏覽:

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

fullscreen:true，

items:[

{

title:’Home’，

iconCls:’home’，

html:’Welcome’

}]});}});

現(xiàn)在，TabPanel已經(jīng)顯示在屏幕上了，但把標(biāo)簽放在頂部有點(diǎn)不大好看、主頁按鈕似乎也有些單調(diào)、還沒有任何內(nèi)容。

下面修改tabBarPosition配置項(xiàng)并添加一些HTML內(nèi)容:

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

fullscreen:true，

tabBarPosition:’bottom’， // tabBar設(shè)在下方

items:[

{

title:’Home’，

iconCls:’home’， //添加Tab的圖標(biāo)

html:[ //添加內(nèi)容

‘’，

‘

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(“”)}]});}});

到目前為止，我們已經(jīng)有了一些HTML內(nèi)容了，調(diào)整一下格式。設(shè)置HTML內(nèi)容的樣式，只要給panel添加cls配置項(xiàng)即可。下面再深入一下，我們希望在一個(gè)單獨(dú)的選項(xiàng)卡顯示我們的內(nèi)容，在這里先選用一些虛構(gòu)的數(shù)據(jù)。

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

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);}});

最后添加一個(gè)聯(lián)系表格，一個(gè)tab，包含一個(gè)FromPanel和一個(gè)FieldSet:

Ext.application({

name:’Sencha’，

launch:function(){

Ext.create(“Ext.TabPanel”，{

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:'contact.php'，

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() {

this.up('formpanel').submit();

} } ]]

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

在第三個(gè)tab中，添加了一個(gè)表格，其中包含三個(gè)字段和一個(gè)提交按鈕，使用了VBOX布局來定位下方的提交按鈕，fieldset配置了一個(gè)title和一些instructions，用了一個(gè)textfield，一個(gè)emailfield和一個(gè)textareafield。

4 結(jié)論

Sencha Touch需要有以下文件:一個(gè)HTML文件index.html，其中引入Sencha Touch框架以及應(yīng)用程序文件，一個(gè)應(yīng)用程序文件app.js，它定義主屏幕的圖標(biāo)和程序啟動(dòng)時(shí)所需要做的事件，框架文件的副本touch。現(xiàn)在我們看到了已經(jīng)完成了的非常基本的應(yīng)用程序，往下可以學(xué)習(xí)使用框架的其他部分了，網(wǎng)上提供許多開發(fā)指南和組件的示例供大家學(xué)習(xí)，相信隨著Beta版的發(fā)展，將會(huì)有更多的指南為構(gòu)建不同規(guī)模的應(yīng)用程序而推出。