概述
在軟件開發領域中，有兩個重要的趨勢愈來愈重要：移動應用程序開發和基於標準的 HTML5 web 開發。任何類型開發的學習過程都是艱苦的。開發一個本地移動應用程序一般須要特定平臺和技術知識，好比，用於 iPhone 的 Objective-C，用於 Android 的 Java™（這只是兩個平臺）。HTML5 開發近期日漸流行，由於它是基於標準的。雖然供應商正在迅速地融入並遵照這些早期的規範，但 HTML5 還不是很成熟。html
近期發佈的 Sencha Touch 1.0 融合了移動應用程序開發領域尖端技術和 web 開發，造成了一個簡單的、易於理解的框架用於構建移動 web 應用程序。在本文中，您將學習開始使用 Sencha Touch 框架所需的一切。html5
回頁首java
Sencha Touch
學習構建移動應用程序 — 特別是從一個 web 開發人員的角度 — 可能比較麻煩。各類平臺可供挑選，各類技術可供學習。HTML5 支持，儘管發展勢頭迅速上升，但仍然沒有準備好用於複雜的 Web 應用程序，特別是業務線應用程序。 android
Sencha Touch 將豐富的 HTML5 平臺和移動 web 應用程序開發結合造成一個折中方案。這個框架是開發人員友好的，相似於使用 Ext JS JavaScript 框架。若是您擁有中高級 JavaScript 水平，那麼掌握 Sencha Touch 是可能的。若是您已擁有做爲 JavaScript 和 CSS 開發人員的技能，那麼 Sencha Touch 會當即將您變成一個移動應用程序開發人員。chrome
Sencha 是一家擁有核心商業產品的公司，可是也支持開源軟件。 Sencha Touch 1.0 對我的和商業用途都是免費的。編程
平臺支持
Sencha Touch 目前支持 WebKit 瀏覽器，包括流行的 Apple iOS 和 Google Androidis 平臺。有些人可能會認爲這種支持不夠 — 全部平臺必須重視對 Sencha Touch 的支持。在移動 web 開發領域中選擇一個框架時，明智的作法是注重兩點：平臺的豐富性和特性的豐富性。須要這樣一種框架：可以以對開發人員友好的方式從 HTML5/CSS3 提取最多內容且具備普遍的影響力。在這方面，Sencha 比較精明，支持兩種最流行的平臺並使用它們的資源來爲開發人員提供豐富的、易於使用的特性。 api
您須要知道的事
要開始使用 Sencha Touch，您須要瞭解 JavaScript 語言和 CSS 的工做原理。如前所述，此框架提取許多特性和樣式，不然您一般須要從頭開始組裝。
若是您想更進一步研究，或者想要構建屬於本身的自定義組件，或者修改您本身的品牌樣式，則須要更高級的 HTML5 和 CSS3 技能。更多信息，見 參考資料 部分。
準備開始
開始使用 Sencha Touch：
- 從 Sencha 下載框架。（見 參考資料。）
- 將內容解壓到開發網站的根目錄下。
爲解壓文件夾重命名一個通用名稱，好比，sencha-touch，這樣對於未來的新版框架，您也可使用相同的文件夾名，而不須要更新引用框架的其餘文件。
- 使用一個 WebKit 瀏覽器，好比 Google Chrome，打開示例頁 http://localhost/sencha-touch/examples/。雖然您的環境可能略有不一樣，但您也應該能夠看到相似 圖 1 的界面。
圖 1. Sencha Touch 示例
經過構建一個 Sencha Touch 應用程序研究框架特性。
- 使用 清單 1 中的源代碼，在您網站的根目錄下建立一個新 HTML 文件 index.html。
清單 1. 樣例 HTML5 文檔
<!DOCTYPE HTML> <html> <head> <title>Touch Test</title> </head> <body> </body> </html>
一旦您建立了那個文件，您就正式成爲一名 HTML 開發人員了。頂部的
<!DOCTYPE HTML>文檔類型申明是關鍵，它確保文檔被解析爲 HTML5。 - 修改清單 1 中的代碼，如 清單 2 所示。
清單 2. 安裝 Sencha Touch 腳本和樣式
<!DOCTYPE HTML> <html> <head> <title>Touch Test</title> <!-- sencha touch css --> <link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch-debug.css" /> <!-- sencha touch javascript --> <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script> </head> <body> </body> </html>上述代碼爲 Sencha Touch 框架添加了 CSS 和 JavaScript 文件。您掛鉤的是這些文件的調試版本，這推薦做爲開發使用，由於它們會生成更好的錯誤消息。要部署，只需換成縮小本的調試版本。您也能夠添加您的自定義 CSS 文件和 JavaScript 文件來構建您的應用程序。
- 要保持示例的簡潔性，請包含一些嵌入的 JavaScript 代碼。從修改您的代碼開始，相似 清單 3。
清單 3. 最簡單的 Sencha Touch 應用程序
<!DOCTYPE HTML> <html> <head> <title>Touch Test</title> <!-- sencha touch css --> <link rel="stylesheet" type="text/css" href="sencha-touch/resources/css/sencha-touch-debug.css" /> <!-- sencha touch javascript --> <script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script> <!-- application script --> <script type="text/javascript"> Ext.setup( { onReady: function() { // create the root panel new Ext.Panel({ fullscreen: true, html: "Sencha Touch is ready!" }); } }); </script> </head> <body> </body> </html> - 在 Google Chrome 運行頁面，您應該能夠看到相似 圖 2 的界面。
圖 2. 最簡單的 Sencha Touch 應用程序
清單 3 中的代碼介紹了一個 JavaScript 代碼塊，您可用於整篇文章來探索框架特性。若是您使用了 Ext JS，這個代碼多是熟悉的。Ext.setup 函數是您的 Sencha Touch 應用程序的起點。它接受一個對象以及一些配置選項。示例使用 onReady 選項，當文檔準備好時，它將運行一個函數來。onReady 函數建立應用程序的根面板。根面板分別使用 fullscreen 和 html 選項，佔用全部可用空間以及包含一個簡單字符串。
在 Android 模擬器中運行應用程序
到目前爲止，您已經使用 Google Chrome 瀏覽器完成了開發。這是一個很好的方法，特別是在處理 JavaScript 和 CSS bug 時。使用一個設備模擬器來啓動應用程序測試。本小節展現如何安裝一個 Android 模擬器。
- 爲您的操做系統平臺 下載 最新 Android SDK，而後將其解壓到磁盤。
SDK 包括獲取和運行一個模擬器所須要的全部工具，可是還有一些步驟也是必要的。
- Android 模擬器須要您建立一個 Android Virtual Device (AVD)，這是實際建模一個 Android 驅動設備的基礎配置選項。要建立一個 AVD，在 Android SDK 的工具文件夾下運行
android實用函數。Android SDK 和 AVD Manager 應該打開，相似 圖 3。
圖 3. Android SDK 和 AVD Manager
在這裏，若是您想要建立一個新虛擬設備，使用 New… 按鈕，注意一下一個標記爲 Target 的字段，這是禁用的，在您建立一個新虛擬設備以前，下載附屬包到 SDK。
- 從左邊菜單欄選擇 Available Packages。
- 擴展您的網站 https://dl-ssl.google.com/android/repository/repository.xml 來檢索可供安裝的工具包列表。
- 選擇最新 SDK 平臺，如 圖 4 所示，而後單擊 Install Selected。
圖 4. 可供 Android SDK 使用的數據包
- 在下一個窗口單擊 Install 按鈕，接受安裝。
- 下載和完成後，單擊 Close。
您剛剛爲您想建立的 AVD 安裝了一個潛在目標，這個目標是一個運行在版本 2.2 上的 Android 設備，下一步是建立 AVD。
- 從 AVD Manager 左邊的按鈕選擇 Virtual Devices，單後單擊 New…。
- 輸入
sencha-avd做爲 Name，而後選擇您剛剛安裝的 Android 2.2 目標做爲 Target。其餘所有保持默認設置。 - 單擊 Create AVD。
在確認窗口單擊 OK，而後關閉 AVD Manager。
如今您所須要的是在您本地開發環境中運行一個模擬器。要運行模擬器：打開一個終端窗口，將路徑修改成 Android SDK 的安裝根目錄，而後輸入 清單 4 中的命令。
清單 4. 調用 Android 模擬器
tools/emulator -avd sencha-avd
您能夠在 Android 模擬器中使用 web 瀏覽器來瀏覽您在 http://localhost/ 下的測試應用程序，可是您將獲得一個很大的 404 錯誤，這是由於在模擬器中應用 localhost 或 127.0.0.1 其實是在模擬器自己環境中。爲了引用您的部署環境，使用地址 10.0.2.2，生成 圖 5 所示界面。
圖 5. 在 Android 模擬器中運行的示例
Sencha Touch UI 組件概覽
如今您對基本原理有所瞭解，這部分通覽了一些 Sencha Touch UI 組件。
按鈕
您能夠經過使用一些配置選項建立許多按鈕樣式。清單 5 中的代碼建立了一系列垂直排列的全部可用按鈕。示例應用程序延伸出一組添加到根面板的條目 — 在本例中，是一個面板和一個系列垂直排列的按鈕。
按鈕根據 ui 配置選項進行樣式化。支持的按鈕類型是 normal、back、round、action 和 forward。
清單 5. 按鈕
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
// this will contain a vertical layout of buttons
{
xtype: "panel",
layout: "vbox",
items: [
{
xtype: "button",
ui: "normal",
text: "Normal"
},
{
xtype: "button",
ui: "back",
text: "Back"
},
{
xtype: "button",
ui: "round",
text: "Round"
},
{
xtype: "button",
ui: "action",
text: "Action"
},
{
xtype: "button",
ui: "forward",
text: "Forward"
}
]
}
]
});
}
});
</script>
圖 6 顯示了生成結果
圖 6. Sencha Touch 中提供的按鈕樣式
表單
表單套件包含全部常見功能和其餘功能。很明顯，表單套件處理和整合了 HTML5 特有函數。支持 HTML5 中的字段類型（好比，電子郵件、web 地址和時間選擇器）和屬性（好比，佔位符文本）；Sencha Touch 只不過讓它們更容易使用。清單 6 顯示了一些特性。
清單 6. 表單控件樣例
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
// add a panel to the root panel
{
xtype: "form",
items: [
{
xtype: "textfield",
name: "name",
label: "Name",
placeHolder: "your name here"
},
{
xtype: "emailfield",
name: "email",
label: "Email",
placeHolder: "you@example.com"
},
{
xtype: "urlfield",
name: "url",
label: "Url",
placeHolder: "http://www.example.com"
},
{
xtype: "datepickerfield",
name: "date",
label: "Date",
picker: { yearFrom: 2010 }
}
]
}
]
});
}
});
</script>
運行清單 6 中的表單能夠生成相似 圖 7 的界面。 Date 字段得到焦點，底部顯示時間選擇器。
圖 7. 可用表單字段樣例
列表
開發移動 web 應用程序時，您可使用有限的基本面板。對基於列表的 UI 組件的支持變得很重要。Sencha Touch 配備有各類列表的支持，包括簡單的、組合的和嵌套的。圖 8 是框架下載中的 Kitchen Sink 演示的一個屏幕截圖，展現了一個組合列表。列表右邊垂直排列的字符公開了一個有用的方法，能夠直接跳到列表特定部分。
圖 8. Kitchen Sink 演示中的一個組合列表
圖標和工具欄
Sencha Touch 附帶一個使人震撼的內置圖標庫，當即可用。您所須要作的只是指定一個字符串表明一個您想要的圖標的 CSS 類。清單 7 顯示如何構建兩個工具欄：一個位於根面板頂部，一個位於底部。每一個工具欄配置了一個小的開箱即用的圖標樣例。
此框架還提供更多可用圖標，查看 API 文檔和示例獲取更多信息。
清單 7. 工具欄中的圖標
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
dockedItems: [
{
xtype: "toolbar",
dock: "top",
items: [
{
iconMask: true,
ui: "plain",
iconCls: "add"
},
{
iconMask: true,
ui: "plain",
iconCls: "delete"
},
{
iconMask: true,
ui: "plain",
iconCls: "star"
},
{
iconMask: true,
ui: "plain",
iconCls: "home"
}
]
},
{
xtype: "toolbar",
dock: "bottom",
items: [
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]
}
]
});
}
});
</script>
運行清單 7 中的代碼以後，您能夠看到相似 圖 9 的界面。
圖 9. 圖標和樣式樣例
幻燈效果和選項卡
幻燈效果和選項卡易於實現，經過使用探討過的編碼模式。清單 8 顯示了一個有標籤的界面和一個 carousel.
清單 8. 構造幻燈效果和選項卡
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.TabPanel({
fullscreen: true,
items: [
{
title: "Tab 1",
html: "First tab"
},
{
title: "Tab 2",
html: "Second tab"
},
{
title: "Tab 3",
html: "Third tab"
}
]
});
}
});
</script>
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Carousel({
fullscreen: true,
items: [
{
html: "First item"
},
{
html: "Second item"
},
{
html: "Third item"
}
]
});
}
});
</script>
幻燈效果和選項卡相似於代碼和函數。幻燈效果在卡之間移動，能夠經過一個滑動動做從一邊滑到另外一邊，也能夠單擊一個位於底部的環形圖標。默認狀況下，這兩個控件均可以使用一個滑動動畫在卡之間切換。
圖 10 顯示了選項卡界面。
圖 10. 樣例選項卡界面
圖 11 顯示了 carousel 界面。
圖 11. 樣例幻燈效果界面
覆蓋
您可使用幾個覆蓋控件。您的選擇包括標準提示、確認和提示控件，以及普通模態控件。
地圖
在移動 web 開發中，最重要的一個組件就是地圖。Sencha Touch 使得在您的應用程序中包含一個地圖變得很容易，使用 Ext.Map 組件便可。清單 9 顯示瞭如何在樣例應用程序中包含一個地圖，記住包含 Google Maps API 的 JavaScript 文件，可以使該樣例運行。
清單 9. 使用地圖
<!DOCTYPE HTML>
<html>
<head>
<title>Touch Test</title>
<!-- sencha touch css -->
<link rel="stylesheet" type="text/css"
href="sencha-touch/resources/css/sencha-touch-debug.css" />
<!-- Google Maps API -->
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true"></script>
<!-- sencha touch javascript -->
<script type="text/javascript" src="sencha-touch/sencha-touch-debug.js"></script>
<!-- application script -->
<script type="text/javascript">
Ext.setup( {
onReady: function() {
// create the root panel
new Ext.Panel({
fullscreen: true,
items: [
{
xtype: "map"
}
]
});
}
});
</script>
</head>
<body>
</body>
</html>
生成的地圖窗口如 圖 12 所示。
圖 12. 地圖控件示例
事件和數據訪問
Sencha Touch 支持幾個您在移動應用程序中指望的關鍵事件，好比觸摸開始/結束（touch start/end）、滾動開始/結束（scroll start/end）、敲擊（tap）、雙擊（double tap）、滑指（swipe）和按壓（pinch）。數據訪問看起來像過去 Ext JS 所作的。
Sencha Touch 框架支持 JSON with padding (JSONP)、Yahoo! 查詢語言和 Ajax 請求。與 Sencha Touch 數據包集合，它們提供一個靈活的機制來將數據綁定到您的 UI 組件上。
樣式和設計
建立您本身的主題多是一個相對比較難的任務。Sencha Touch 框架擁有關鍵特性，使得修改默認樣式和設計變得更爲容易。
框架使用 Syntactically Awesome Stylesheets (Sass)，這是 CSS3 的一個擴展，容許您使用變量和選擇遺傳性向主題開發添加更多的威力。更改單個變量可能會影響整個主題 — 就這麼簡單。
建立一個新主題不在本文範圍以內。參考資料 有幾個連接可幫助您開始。
結束語
本文提供了 Sencha Touch 的一個簡介，它是一個使用 HTML五、CSS3 和 JavaScript 構建的移動 web 應用程序框架。您學習瞭如何建立一個簡單 Sencha Touch 應用程序，以及如何使用一個設備虛擬器進行測試。您還探索了一些 UI 組件。
本文只是對 Sencha Touch 框架的一個簡單介紹。如今您已經掌握了基礎知識，能夠考慮經過如下 參考資料 進一步研究相關概念。
參考資料
學習
- 全面瞭解 Sencha：閱讀 API 文檔，查閱博客，訪問論壇，下載演示，等等。
- 閱讀 「Dive into HTML5」，做者 Mark Pilgrim，獲取開始 HTML5 開發的幫助。
- 瞭解更多 Android。Android Dev Guide 中有常見任務的參考信息和分步指導。
- developerWorks developerWorks 中國網站 Web 開發專區 專門提供關於各類 Web 解決方案的文章。
得到產品和技術
- 下載 Sencha Touch。
- 下載最新版 Google Chrome 瀏覽器。
- 獲取最新 Android SDK。
- 下載和學習更多 Sass。
- 以最適合您的方式 IBM 產品評估試用版軟件：下載產品試用版，在線試用產品，在雲環境下試用產品，或者在 IBM SOA 人員沙箱 中花費幾個小時來學習如何高效實現面向服務架構。
討論
- 找到 對 web 開發感興趣的其餘 developerWorks 成員。
- 分享您的知識：加入一個關注 web 主題的 developerWorks 小組。
- 快速找到答案：訪問 Web 2.0 Apps 論壇。
- 快速找到答案：訪問 Ajax 論壇。