Sencha Touch是第一個HTML5移動開發框架，Sencha Touch~夠快速地構造出基于HTML5的手機應用，通過它構造出來的程序有著與原生應用一致的用戶體驗，目前該框架兼容Android、iOS、BlackBerry這些主流手機平臺。ExtJS是用于創建網絡前端用戶界面的，它是與后臺技術無關的前端Ajax框架，其功能豐富，無論是界面之美，還是功能之強都高居榜首。現在ExtJS整合JOTouch等推出了適用于前沿Touchweb的Sencha Touch的框架，該框架是第一個基干HTML5的Mobile App框架，同時ExtJS更名為Sencha。Sencha Touch可以讓你的Web App體現出美妙的用戶界面和豐富的數據管理，它基于最新的HTML 5和CSS3的WEB標準，全面兼容Android、AppleiOS、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 TouchSDK并解壓至Web服務器根目錄。下載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目錄中都有，在這些文檔里面還有很多演示示例，并可以修改它們。文檔中還包括所有組件，你可以清楚的了解這些組件。該文檔還詳細解釋了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。
總而言之，需要一個免費的SenchaTouch SDK，一個本機的web服務器和一個支持HTML5的瀏覽器。如果你沒有web服務器，建議安裝wAMP或者MAMP。完成上述工作后，只需要用瀏覽器打開http：／／localhost／sencha-touch-folder，你就能看到歡迎界面了。
3 通過網絡學習示例
在http：／／extjs．org．cn／taxonomy／term／261里，有一個《使用sencha touch開發新浪微博iPhone界面》的示例，看了以后相信不少對sencha touch感興趣的人會為Javascript能開發出這樣的手機Web App應用而感到興奮。Sencha Touch提供相當多的原生UI組件，以滿足手機上的UI設計。這個示例以iPhone界面作為參考，使用SenchaTouch開發設計模仿iPhone界面：
以iPhone的界面目標作為參考對比Sencha Touch實現的界面(如表1)：
具體實現見：http：／／www．imsankyu．com／archives／sencha——touch——develop——sina——weibo——iPhone——page／再來看一個示例：
首先看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標簽的內容為空。接下來看app．js文件中的內容，這里只是彈出一個警告對話框：
Ext．application({
name：’Sencha’．
1aunch：function(){
alert(‘launched’)；
}})；
接下來我們啟動Safari，看看他是否如我們預期的一樣，或者點擊代碼左側的“眼睛”圖標來查看運行的效果。警報消息的彈出意味著Sencha Touch已經正確地被加載運行了。現在開始構建界面：一個TabPanel，TabPanel是一個標簽式的界面，允許你在多個頁面之間瀏覽：
Ext．application({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
items：[
{
title：’Home’，
iconCls：’home’，
html：’W elcome’
}}})；}})，
現在，TabPanel已經顯示在屏幕上了，但把標簽放在頂部有點不大好看、主頁按鈕似乎也有些單調、還沒有任何內容。下面修改tabBarPosition配置項并添加一些HTML內容：
Ext．application({
name：’Sencha’，
launch：function(){
Ext．create(“Ext．TabPanel”，{
fullscreen：true，
tabBarPosition：’bottom’，／／ tabBar
設在下方
items：[
{
title：’Home’，
iconCls：’home’， ／／添加flTab的圖標html：{ ／／添加內容
‘<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( )}}})；}})；
到目前為止，我們已經有了一些HTML內容了，調整一下格式。設置HTML內容的樣式，只要給panel添加cls配置項即可。下面再深入一下，我們希望在一個單獨的選項卡顯示我們的內容，在這里先選用一些虛構的數據。
Ext．application({
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{{{)，
最后添加一個聯系表格，一個tab，包含一個FromPanel和一個FieldSet：
Ext．application({
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)；}})；
在第三個tab中，添加了一個表格，其中包含三個字段和一個提交按鈕，使用了VBOX布局來定位下方的提交按鈕，fieldset配置了一個title和一些instructions，用了一個textfield，一個emai1field和一個textareafield。
4 結論
Sencha Touch需要有以下文件：一個HTML文件index．html，其中引入SenchaTouch框架以及應用程序文件，一個應用程序文件app．js，它定義主屏幕的圖標和程序啟動時所需要做的事件，框架文件的副本touch。現在我們看到了已經完成了的非常基本的應用程序，往下可以學習使用框架的其他部分了，網上提供許多開發指南和組件的示例供大家學習，相信隨著Beta版的發展，將會有更多的指南為構建不同規模的應用程序而推出。
核心關注：拓步ERP系統平臺是覆蓋了眾多的業務領域、行業應用，蘊涵了豐富的ERP管理思想，集成了ERP軟件業務管理理念，功能涉及供應鏈、成本、制造、CRM、HR等眾多業務領域的管理，全面涵蓋了企業關注ERP管理系統的核心領域，是眾多中小企業信息化建設首選的ERP管理軟件信賴品牌。
轉載請注明出處：拓步ERP資訊網http://m.hanmeixuan.com/
本文標題：用HTML5開發移動應用
相關文章
