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)都高居榜首�，F(xiàn)在ExtJS整合JOTouch等推出了適用于前沿Touchweb的Sencha Touch的框架，該框架是第一個(gè)基干HTML5的Mobile App框架，同時(shí)ExtJS更名為Sencha。Sencha Touch可以讓你的Web App體現(xiàn)出美妙的用戶界面和豐富的數(shù)據(jù)管理，它基于最新的HTML 5和CSS3的WEB標(biāo)準(zhǔn)，全面兼容Android、AppleiOS、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 TouchSDK并解壓至Web服務(wù)器根目錄。下載Sencha Touch 2。O的地址：http：／／cdn．sencha．io／touch／sencha-touch-2．0．0-pr1．zip。查看2．0文檔：http：／／docs．sencha．corn／touch／2=0／。Sencha Touch 2．0 中所有被廣泛使用的類在API目錄中都有，在這些文檔里面還有很多演示示例，并可以修改它們。文檔中還包括所有組件，你可以清楚的了解這些組件。該文檔還詳細(xì)解釋了Layouts，Components and Classes，如何使用tab panels，forms and carousels。SenchaTouch 2．0 的新功能可去這里了解：
http：／／html5mobi．gotoip 1．corn／discussion／6 1／sencha—tOuch一2一what—s—new—m—sencha—touch-2．0。
總而言之，需要一個(gè)免費(fèi)的SenchaTouch 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界面》的示例，看了以后相信不少對sencha touch感興趣的人會(huì)為Javascript能開發(fā)出這樣的手機(jī)Web App應(yīng)用而感到興奮。Sencha Touch提供相當(dāng)多的原生UI組件，以滿足手機(jī)上的UI設(shè)計(jì)。這個(gè)示例以iPhone界面作為參考，使用SenchaTouch開發(fā)設(shè)計(jì)模仿iPhone界面：
以iPhone的界面目標(biāo)作為參考對比Sencha Touch實(shí)現(xiàn)的界面(如表1)：
具體實(shí)現(xiàn)見：http：／／www．imsankyu．com／archives／sencha——touch——develop——sina——weibo——iPhone——page／再來看一個(gè)示例：
首先看index．html文件：
<!D0CTYPE html>
<html>
<head>
<title>Getting Started<／title>
<link rel=”stylesheet”href=”touch／
resources／css／sencha—t0uch．css” type=”
test／css”>
<script type=”text／javascript”src=”
touch ／sencha-touch-al1．js’’><／script>
<script type=”teXt／javascript”src=”
app．js”><／script>
<／head>
<body><／body>
<／html>
它引入了Sencha Touch框架的js文件和CSS文件和代碼文件：app．js，body標(biāo)簽的內(nèi)容為空。接下來看app．js文件中的內(nèi)容，這里只是彈出一個(gè)警告對話框：
Ext．a(chǎn)pplication({
name：’Sencha’．
1aunch：function(){
alert(‘launched’)；
}})；
接下來我們啟動(dòng)Safari，看看他是否如我們預(yù)期的一樣，或者點(diǎn)擊代碼左側(cè)的“眼睛”圖標(biāo)來查看運(yùn)行的效果。警報(bào)消息的彈出意味著Sencha Touch已經(jīng)正確地被加載運(yùn)行了�，F(xiàn)在開始構(gòu)建界面：一個(gè)TabPanel，TabPanel是一個(gè)標(biāo)簽式的界面，允許你在多個(gè)頁面之間瀏覽：
Ext．a(chǎn)pplication({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
items：[
{
title：’Home’，
iconCls：’home’，
html：’W elcome’
}}})；}})，
現(xiàn)在，TabPanel已經(jīng)顯示在屏幕上了，但把標(biāo)簽放在頂部有點(diǎn)不大好看、主頁按鈕似乎也有些單調(diào)、還沒有任何內(nèi)容。下面修改tabBarPosition配置項(xiàng)并添加一些HTML內(nèi)容：
Ext．a(chǎn)pplication({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
tabBarPosition：’bottom’，／／ tabBar
設(shè)在下方
items：[
{
title：’Home’，
iconCls：’home’， ／／添加flTab的圖標(biāo)html：{ ／／添加內(nèi)容
‘<img src=http：／／staging．sencha．
com／img／ sencha．png ／>’，
‘<hl>W elcome to Sencha Touch<／
hl> ’，
“<p>You’re creating the Getting
Started app．This demonstrates how ”
“to use tabs，lists and forms to create
a simple app<／p>”，
‘<h2> Sencha Touch (2．0．Opr1)<／
h2> ’
]．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．a(chǎn)pplication({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
tabBarposition：’bottom ’，
items：[
{
title：’Home’，
iconCls：’home’，
cls：’home’。
html：[
’<imgwidth=”65％ ”src=”http：／／
staging．sencha．com／img／sencha．png”>’
’<h1>Welcome to Sencha Touch<／
hl> ’。
”<p>You’re creating the Getting
Started app．This demonstrates how ’’
”to use tabs，lists and forms to create
a simple app<／p>”，
’<h2>Sencha Touch (2．0．0pr1)<／
h2> ’
]．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一20 1 1一now-packen-w’}
{title：’Documentation in Ext JS 4’，
url；’new—ext—js一4一d0cu’}
]}}]
})．setActiveltem(11{{{)，
最后添加一個(gè)聯(lián)系表格，一個(gè)tab，包含一個(gè)FromPanel和一個(gè)FieldSet：
Ext．a(chǎn)pplication({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
tabBarPOsitiOn：’bottom ’，
items：[
{
title：’Home’，
iconCls：’home’，
cls： ’home’，
html：[
’<img width=’65％’ src=http ，
staging．sencha．com／img／ sencha．png ／
> ’，
‘<hl>Welcome to Sencha Touch<／
h1> ’．
“<p>You’re creating the GettingStarted app． This demonstrates how ”
“to use tabs，lists and forms to createa simple app<／p>”，
‘<h2> Sencha Touch (2．0．0pr1)<／
h2>’
]．join(?)
}，{
xtype：’list’，
title：’Blog’，
iconCls：’star’，
itemTpl：’{title}’，
store：{
fields：[‘title’，’url’]，
data：[
{title：’Ext Scheduler 2．0’，url：’extscheduler一2—0一upgradin’
{title：’Previewing Sencha Touch 2’，url：’sencha-touch-2-wha’}
{title：’Sencha Con 201 1’，url：’senchacon-201 1一n0w—packen—w’}
{title：’Documentation in Ext JS 4’，ufl：’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 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è)emai1field和一個(gè)textareafield。
4 結(jié)論
Sencha Touch需要有以下文件：一個(gè)HTML文件index．html，其中引入SenchaTouch框架以及應(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)用程序而推出。
核心關(guān)注：拓步ERP系統(tǒng)平臺(tái)是覆蓋了眾多的業(yè)務(wù)領(lǐng)域、行業(yè)應(yīng)用，蘊(yùn)涵了豐富的ERP管理思想，集成了ERP軟件業(yè)務(wù)管理理念，功能涉及供應(yīng)鏈、成本、制造、CRM、HR等眾多業(yè)務(wù)領(lǐng)域的管理，全面涵蓋了企業(yè)關(guān)注ERP管理系統(tǒng)的核心領(lǐng)域，是眾多中小企業(yè)信息化建設(shè)首選的ERP管理軟件信賴品牌。
轉(zhuǎn)載請注明出處：拓步ERP資訊網(wǎng)http://www.ezxoed.cn/
本文標(biāo)題：用HTML5開發(fā)移動(dòng)應(yīng)用
本文網(wǎng)址：http://www.ezxoed.cn/html/support/1112156215.html
相關(guān)文章
