使用jQTouch增強您的下一個移動web應用程序
對 web 開發的興趣，包括移動 web 應用程序，從未像現在這般高漲。一些開發桌面或者服務器端應用的開發人員也開始對移動 web 感興趣。然而，許多人想要將他們目前的 web 開發技巧應用到移動 web 開發中，這樣他們就不用學習完全不同的事物了，只為移動用戶進行開發。這是他們尋求移動 web 而非本地移動開發的部分原因。在 web 開發的世界中，有很多客戶端框架，但是 jQuery 是最流行的。那么，理所當然有很多對 jQuery 非常了解的開發人員對移動 web 開發感興趣。這些開發人員將會很樂意學習 jQTouch — 一個基于 jQuery 的 web 框架，專為移動 web 開發而設計的。本文將從移動 web 開發人員的角度關注 jQTouch。
先決條件
本文對 jQTouch 作一簡要概述。正如之前所提到的，這個框架是基于 jQuery 的。如果您對 jQuery 有一定了解，那么 jQTouch 對您將并不陌生。雖然本文并不需要熟知 jQTouch 知識，但是 JavaScript、HTML 和 CSS 方面的知識一定要熟悉。這里所有的代碼都是純客戶端的，可以被部署到任何 web 服務器上。本文中一起使用 jQTouch 1.0-beta2 和 jQuery 1.3.2。參見 參考資料 獲取這些工具的鏈接。
jQTouch 簡介
迄今為止，本系列已經介紹了兩個 web 應用程序框架，借鑒了大量 Apple 的 Cocoa 應用程序框架。這些框架抽象出 HTML 和 CSS — web 的關鍵表示技術。Cappuccino 框架甚至提取出許多 JavaScript，使用自己的編程語言 Objective-J 對其進行替換。jQTouch 框架采用一個非常不同的方法。它包括核心 web 技術，使普通的 Web 開發任務更容易、更直觀。
jQTouch 之所以受歡迎是因為它構建于 jQuery 之上。從技術上來說它是一個 jQuery 插件，添加特定移動功能和樣式到應用程序。具體來說，它添加樣式和可視效果，旨在利用 iPhone 的功能優勢。盡管它的很多特性在其他移動設備上也能很好地工作，jQTouch 設計時無疑參考了 iPhone。我們來看一個構建于 jQTouch 之上的一個簡單的移動 web 應用程序。
jQTouch 應用程序開發：利用 web 技巧
正如前面所提到的，和其他框架（比如 SproutCore 和 Cappuccino）相比，jQTouch 框架采取了一個截然不同的方法來進行 web 應用程序開發。jQTouch 框架和這些框架也有很多共同之處；它同樣允許您從您的服務器上檢索數據以及在客戶端創建整個用戶接口。但是，不像這些框架，它不要求 您使用此方法。事實上，它不僅僅建立在 JavaScript 上，也建立在 HTML 和 CSS 上。要了解這一點，從基礎開始。
jQTouch 基礎
如果您閱讀了本系列的前兩篇文章，您對這個將要使用 jQTouch 構建的應用程序應該比較熟悉。它是針對內部 web 應用程序的一個員工通訊錄。您需要加載您在本系列上兩期中所使用的數據。然而，jQTouch 提供更移動友好的用戶界面元素，因為它有一個更好的 UI。您將需要以表格形式和清單形式顯示數據。從一個主界面開始，如 清單 1 所示，該界面允許用戶選擇表格格式或清單格式的數據。
清單 1. 應用程序要點和主屏幕代碼
- >
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Intranet Employee Directorytitle>
- <style type="text/css" media="screen">
- @import "jqtouch/jqtouch.min.css";
- style>
- <style type="text/css" media="screen">
- @import "themes/jqt/theme.min.css";
- style>
- <script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript"
- charset="utf-8">script>
- <script src="jqtouch/jqtouch.min.js" type="text/javascript"
- charset="utf-8">script>
- <script type="text/javascript">
- var jQT = $.jQTouch({
- icon : 'icon.png'
- });
- script>
- head>
- <body>
- <div class="home">
- <div class="toolbar">
- <h1>Employeesh1>
- div>
- <ul class="edgetoedge">
- <li class="arrow"><a href="#list-style">Lista>
- li>
- <li class="arrow"><a href="#table-style">Tablea>
- li>
- ul>
- div>
- body>
- html>
#p#
清單 1 中的代碼包含一個 jQTouch 應用程序的基本要點。兩個 CSS 文件和兩個 JavaScript 文件也包含在內。要使用 jQTouch，這兩個 JavaScript 文件您都需要。這些包含 jQuery 庫和 jQTouch 插件庫。您也需要第一個 CSS 文件（jqtouch.min.css），另一個 CSS 文件是一個可選主題。jQTouch 包括兩個主題，一個用來匹配 iPhone (Cocoa Touch) UI，另一個（jqt）較為中性。在清單 1 中，jqt 主題 CSS 文件也包括在其中。最后，您需要初始化 jQTouch 對象。許多選項可以被傳送到這個構造函數。在這里，您只要指定一個應用程序圖標，如果用戶‘安裝’ 該應用程序，將會使用這個圖標，如 圖 1 所示。
圖 1. 安裝到 iPhone 主屏幕的移動 web 應用程序
回到清單 1，余下的代碼是基礎 HTML。您有一個含有 home 類的 div。這個類沒什么特別之處。然而，如果您熟悉 jQuery，那么您將會認出這是 jQuery 中的一個頁面。您應用程序中的每個頁面（屏幕）在單個 HTML 頁面上是一個 div。所以這種情況下，您的頁面在頂層有一個 div，含有 toolbar 類。 這個特別的類是在核心 jQTouch CSS 文件中定義的幾個樣式中的一個。接著，您有一個含有 edgetoedge 類的無序列表 — 另一個 jQTouch 樣式。這個列表中的每個條目都是鏈接到 HTML 頁面其他部分的鏈接。此外，它也是另一個常用 jQuery 范式，用于鏈接一個 web 應用程序中的不同頁面。圖 2 展示了在清單 1 中創建的應用程序在 iPhone 中的樣子。
圖 2. iPhone 上的主屏幕
圖 2 顯示一個相對簡單的用戶界面；創建它需要的所有代碼在清單 1 中，此時您所用是一些 HTML。您清單中的元素也是可點擊的，而且它們將導向您應用程序的其他頁面。然而，這些頁面需要一些加載 Ajax 的數據以正常工作。正如您所看到的，Ajax 是 jQuery 與眾不同的另一個方面。
使用 jQuery 生成動態數據
迄今為止，您已經利用了 jQTouch 為移動設備優化的樣式來生成簡單的 HTML，并將其變成一個引人注目的移動用戶界面。現在生成一個動態清單和一個動態表格。首先檢索這些界面的數據，如 清單 2 所示。
清單 2. 使用 Ajax 檢索數據
- $(document).ready(function(){
- $.getJSON('employees.json', function(data){
- data.forEach(addEmployee);
- });
- ...
- });
- function addEmployee(e){
- addEmployeeToList(e);
- addEmployeeToTable(e);
- }
在清單 2 中，您只用了基本的 jQuery 功能。初始頁面加載完成后立即使用 Ajax 從服務器加載數據。這是 Web 開發中的一個常用范式，jQuery 使用 $(document).ready 函數輕松地就可以生成。該函數接受一個函數作為它的輸入參數。在這個案例中您使用一個匿名內聯函數，也稱為一個閉包。這個閉包在在初始頁面加載完成后立即 執行。jQuery 提供很多方便的函數來處理 Ajax 請求和響應。在這種情況下，數據將被格式化為 JSON，因此，使用 jQuery 的 getJSON 函數，采用一個字符串來表示請求的 URL 端點。這個函數在后臺使用一個 XMLHttpRequest 對象生成一個 HTTP GET 來請求這個 URL。
當 Ajax 請求從服務器成功返回時，該函數也采用另一函數作為一個回調。（也可以利用另一個可選 callback 函數來處理錯誤，但是為了保持示例的簡潔，我們放棄了使用它。）您再一次傳遞一個閉包作為 callback 函數；此函數預期接收一個 employee 對象數組 — 在本系列之前的文章中您曾使用過的數據。該回調函數然后使用 Array 對象的 forEach 方法。您可能對這個函數不是很熟悉，因為它在舊版本中沒有提供。但是在您鎖定的這些更現代的瀏覽器上，它都是 可用的。它使用一個函數作為它的參數，然后依次將這個函數應用到 Array 中的每個對象中。盡管您可以傳遞另一個閉包給它，而不是將其作為一個引用傳遞給另一個名為 addEmployee 的函數。該函數授權分離函數，將員工對象添加到列表以及添加到表格。看看這些函數如何使用 jQTouch 動態創建 UI。
使用 jQTouch 創建動態 UI
回到清單 1 ，您將注意到您的主屏幕已經連接到其他兩個頁面了，一個是數據的列表視圖，另一個是數據的表格視圖。我們之前提到過，它利用 jQuery 在頁面上使用 div 的約定來代表您的應用程序的各個頁面。這些頁面的 HTML 如 清單 3 所示。
清單 3. 列表和表格的 HTML
- <div id="list-style">
- <div class="toolbar">
- <h1>Listh1>
- <a class="button back" href="#">Backa>
- div>
- <ul class="edgetoedge" id="eList">ul>
- div>
- <div id="table-style">
- <div class="toolbar">
- <h1>Tableh1>
- <a class="button back" href="#">Backa>
- <a class="button flip" href="#new">+a>
- div>
- <table>
- <thead>
- <tr>
- <td>Nametd>
- <td>Phonetd>
- <td>Emailtd>
- tr>
- thead>
- <tbody id="eTable">tbody>
- table>
- div>
再一次強調，上面只是一個簡單的 HTML。一次只研究一個頁面，在列表頁中，您再次有一個使用工具欄樣式的嵌套 div。它是一個簡單標題，含有鏈接錨文本。注意到錨點有返回類按鈕。再一次說明，這是 jQTouch 提供的一種樣式，它將為頁面創建一個返回按鈕，看起來像源自移動平臺的。圖 3 顯示了這個工具欄在 iPhone 中的效果。
圖 3. 列表頁面工具欄
正如您所看到的，jQTouch 允許您使用少量代碼輕松地創建高質量的界面。返回到清單 3 ，您可以看到您也有一個空的無序列表。注意，它使用 jQTouch 提供的 edgetoedge 風格，如果您想水平拉伸整個屏幕，這是一個很合適的條目。使用您在清單中從服務器檢索到的數據來填充這個列表，如 清單 4 所示。
清單 4. 創建一個列表
- function addEmployeeToList(e){
- var list = $("#eList");
- var text = e.firstName + " " + e.lastName +
- ", " + e.phone + ", " + e.email;
- var li = $("<li>").html(text);
- list.append(li);
- }
#p#
在典型 web 開發中動態創建 HTML 元素是一個比較繁瑣的任務；這再一次成為 jQuery 炫目的地方。清單 4 中的代碼是純 jQuery 代碼。您首先可以通過向 jQuery 傳遞一個 CSS 選擇器從清單 3 中獲取這個無序列表的一個引用。創建您想要放入列表中的文本，然后使用 jQuery 提供的便捷方法來創建 DOM 元素，并向其中添加一個文本節點。最后，將這個 DOM 元素添加到無序列表中。圖 4 使用模擬數據顯示了這個列表的樣子。
圖 4. 列表視圖
要創建您的列表，使用一些基本的 jQuery 代碼來從服務器檢索數據，然后創建一些標準 HTML 元素（以及一個引用 jQTouch 樣式的 HTML 框架），這也是創建上述 UI 所必需的。如果您在一個移動設備上測試它，您將注意到它的加載速度很快而且屏幕滾動很流暢。現在看看您如何創建一個表格來顯示同樣的數據。
回到清單 3 ，注意您的表格頁面類似于列表頁面。它有一個類似的工具欄，只有一個額外按鈕。（不久您就會看到這個按鈕的功能。）它也有一個綱要表格 — 即，有表頭但沒有數據。數據和列表中的一樣。您只需要為您的表格創建行即可，如 清單 5 所示。
清單 5. 創建表行
- function addEmployeeToTable(e){
- var table = $("#eTable");
- var tr = $("<tr>")
- .append($("<td>").html(e.firstName + " " + e.lastName))
- .append($("<td>").html(e.phone))
- .append($("<td>").html(e.email));
- table.append(tr);
- }
清單 5 中的代碼類似清單 4 中的。您可以依賴 jQuery 的便捷方法來創建 HTML DOM 元素，然后一起添加。注意，便利的附加函數允許您使用一個構建器模式來快速創建表行，其中有 3 個單元格。圖 5 使用模擬數據顯示了表格的樣子。
圖 5. 表格視圖
清單 5 顯示了預期的用戶界面。您可以使用標準 CSS 使這個表格更漂亮。您可能會注意到在頂部工具欄的右端有一個加號（+）按鈕。回到清單 3 ，注意到這個鏈接連接到另一個名為 New 的頁面，也注意一下這鏈接上的類是按鈕翻轉。這將再次創建一個本機外觀按鈕，起鏈接到新頁面的作用。該類的翻轉指明 jQTouch 應該使用一個翻轉轉換。這是一個專有 WebKit CSS 3D 動畫，目前僅在 iPhone 中支持，是 jQTouch 易于利用的 2D 和 3D 動畫其中的一種。當您點擊加號按鈕時，將顯示一個用于創建新員工表單的頁面。清單 6 顯示了該頁面的代碼。
清單 6. 新員工對話框
- <div id="new">
- <div class="toolbar">
- <h1>Add Employeeh1>
- <a class="button cancel" href="#">Cancela>
- div>
- <form id="addEmp" method="post">
- <ul>
- <li><input type="text" placeholder="First Name" id="fn"
- name="firstName" />
- li>
- <li><input type="text" placeholder="Last Name" id="ln"
- name="lastName" />
- li>
- <li><input type="email" placeholder="Email"
- autocapitalize="off" id="email" name="email" />
- li>
- <li><input type="tel" placeholder="Phone" id="phone"
- name="phone" />
- li>
- ul>
- <input type="submit" class="submit" value="Submit"/>
- form>
- div>
清單 6 中的代碼是一個簡單的 HTML，工具欄是使用一個應用 toolbar 類的 div 創建的。此時，您有一個 Cancel 鏈接，是使用 button cancel 類設計的。當然 button 類是將這個鏈接放進一個按鈕中的。cancel 類會使鏈接返回到之前的頁面，類似于 back 類。然而，和 back 類有所不同，它將自動使用與轉換到該頁面效果相反的效果。
有了工具欄之后，您就有一個封裝在無序列表之內的簡單 HTML 表單。您可能會注意到一些不同尋常的事。首先，所有字段都使用占位符屬性，這是一個 HTML5 特性，因此會一直顯示占位符文本，直至該字段獲得焦點。這可以方便地替換對標簽的使用，特別是當一個移動屏幕非常小的時候。注意電子郵件輸入框有一個設置 為 false 的 autocapitalize 屬性。這是另一個 iPhone 特有的特性，通知瀏覽器臨時禁用輸入該框的文本的 OS 級自動大寫。同時我們還注意到，郵件和電話輸入類型都是不尋常的（email 和 tel），這是在 iPhone 和 Android 瀏覽器上都支持的一個特性，當焦點集中在輸入字段時，通知瀏覽器彈出不同的鍵盤。圖 6 顯示了每個字段的樣子。
#p#
圖 6. Android 和 iPhone 瀏覽器，焦點在 tel 和 email 輸入框
最后一點值得注意的是，清單 6 中的表單是 Submit 按鈕，注意它的類是 submit。這是另一個使按鈕（至少在 iPhone 上）更具吸引力的 jQTouch 類。清單 7 顯示了當表單提交后，如何使用 jQTouch 建立一個事件處理程序。
清單 7. 處理表單提交
- $(document).ready(function(){
- // Ajax call can be found in Listing 2
- $("#addEmp").submit(function(){
- var e = {
- firstName : $("#fn")[0].value,
- lastName : $("#ln")[0].value,
- email : $("#email")[0].value,
- phone : $("#phone")[0].value
- };
- addEmployee(e);
- jQT.goBack();
- return false;
- });
- });
注意，這是您在清單 2 中所見到的初始化代碼的一部分。在這里您使用另一個 jQuery 選擇器來獲取表單（清單 6 中顯示的）的一個引用。jQuery 提供一種簡便的方法來劫持表單的 submit 事件。再一次傳遞一個閉包來處理該事件。在閉包中，創建一個 JavaScript employee 對象，但是從表單中檢索值。然后使用您在清單 2 中看到的 addEmployee 函數來將新員工信息添加到列表和記錄視圖中。接著，使用一個 jQTouch 函數 goBack。 其工作方式類似于您之前看到的 Cancel 按鈕，轉回到上一頁。最后，返回 false 來阻止表單提交。顯然，該代碼只能將員工信息添加到本機屏幕。您可以想像一個可將員工信息添加到共享數據庫的服務端 API，而且您可以使用 jQuery 卓越的 Ajax 和表單功能來將數據序列化，然后發送回服務器。這樣，在樣例應用程序中就完成了所有功能。現在，您已經使用 jQTouch 構建了一個移動 web 應用程序，看看其結果如何。
使用 jQTouch 的移動 web 應用程序
盡管 jQTouch 框架可能是 jQuery 之上的一個簡單插件，它的確通過接受核心 web 技術以及使開發更為容易擴展了 jQuery 框架的理念。它添加大量移動優化的用戶界面元素，使您可以輕松地將簡單的 CSS 樣式應用于 HTML，并獲取較為成熟的結果。此外，這些主題和特性（比如頁面轉換）也為應用程序帶來了一種原生感覺。
提到處理應用程序邏輯，jQTouch 不像其他架構那樣試圖提取出工作流。相反地，它依賴功能強大的 jQuery 工具使得表單處理、Ajax、頁面轉換這類任務變得更為容易。如果您是一名經驗豐富的、且習慣于使用 web 應用程序的 web 開發人員 — 使用 web 功能強大的 HTML、JavaScript 和 CSS 組合— 那么，jQTouch 也會非常適合您。您可以快速生成具有吸引力、易于使用的移動 web 應用程序。然而，如果您想采用一個更結構化的方法，那么您將不得不自己添加結構。這極大地改變了通常由一個開發團隊來處理的巨大且復雜的應用程序。此 外，jQTouch 不改變創建 web 應用程序所涉及到的標準工作流 — 它只是試圖讓每個工作流步驟更容易。其他框架進一步提取大量步驟，并使用較少的樣板文件提供一個更有邏輯的工作流。
最后，另一個 jQuery 項目值得一提。這個項目就是 jQuery Mobile 項目（見 參考資料）， 恰如其名。和 jQTouch 不一樣，它不是一個插件；它和 jQTouch 一樣有很多共同的特性，但是它有更為遠大的目標。它的目標是提供更多 UI 小部件，并使它們可以跨平臺工作。例如，您構建的應用程序在 Android 手機上運行良好，但是很顯然它是用于 iPhone 的。jQuery Mobile 應用程序的設計目的是在 Androids 和 iPhones、以及其他平臺上都能良好運行。它不僅僅是一個 jQuery 插件；相反地，它從根本上是為移動電話構建的，轉換成更簡潔、更靈活的代碼：jQTouch 有 69 KB 的 JavaScript 和 8KB 的 CSS，而 jQuery Mobile 只有 12KB 的 JavaScript 和 6KB 的 CSS。寫這篇文章時，發布的是該項目的第一個 α 版本，顯然還是比較粗糙。然而，如果您對 jQTouch 很感興趣，及時了解 jQuery Mobile 的最新信息。
結束語
本文證實了可以應用您的 web 開發技巧來構建一個移動應用程序，只需 jQTouch 提供少量幫助。對于很多開發人員來說，這可能是進行移動開發最直接的方法。如果您是一名 web 開發人員，可能早對 jQuery 有過了解，這使得 jQTouch 更具吸引力。深入挖掘卓越的 jQTouch 文檔并探究它的更多的特性。這使得您可以在移動 web 應用程序中更加輕松地使用 iPhone 和 Android 瀏覽器上可用的很多高級 HTML5 功能。
下載源碼：intradir-jqtouch.zip
文章出處：IBM developerWorks
