使用jQTouch增強您的下一個移動web應用程序
對 web 開發(fā)的興趣，包括移動 web 應用程序，從未像現(xiàn)在這般高漲。一些開發(fā)桌面或者服務器端應用的開發(fā)人員也開始對移動 web 感興趣。然而，許多人想要將他們目前的 web 開發(fā)技巧應用到移動 web 開發(fā)中，這樣他們就不用學習完全不同的事物了，只為移動用戶進行開發(fā)。這是他們尋求移動 web 而非本地移動開發(fā)的部分原因。在 web 開發(fā)的世界中，有很多客戶端框架，但是 jQuery 是最流行的。那么，理所當然有很多對 jQuery 非常了解的開發(fā)人員對移動 web 開發(fā)感興趣。這些開發(fā)人員將會很樂意學習 jQTouch — 一個基于 jQuery 的 web 框架，專為移動 web 開發(fā)而設計的。本文將從移動 web 開發(fā)人員的角度關注 jQTouch。
先決條件
本文對 jQTouch 作一簡要概述。正如之前所提到的，這個框架是基于 jQuery 的。如果您對 jQuery 有一定了解，那么 jQTouch 對您將并不陌生。雖然本文并不需要熟知 jQTouch 知識，但是 JavaScript、HTML 和 CSS 方面的知識一定要熟悉。這里所有的代碼都是純客戶端的，可以被部署到任何 web 服務器上。本文中一起使用 jQTouch 1.0-beta2 和 jQuery 1.3.2。參見 參考資料 獲取這些工具的鏈接。
jQTouch 簡介
迄今為止，本系列已經(jīng)介紹了兩個 web 應用程序框架，借鑒了大量 Apple 的 Cocoa 應用程序框架。這些框架抽象出 HTML 和 CSS — web 的關鍵表示技術。Cappuccino 框架甚至提取出許多 JavaScript，使用自己的編程語言 Objective-J 對其進行替換。jQTouch 框架采用一個非常不同的方法。它包括核心 web 技術，使普通的 Web 開發(fā)任務更容易、更直觀。
jQTouch 之所以受歡迎是因為它構建于 jQuery 之上。從技術上來說它是一個 jQuery 插件，添加特定移動功能和樣式到應用程序。具體來說，它添加樣式和可視效果，旨在利用 iPhone 的功能優(yōu)勢。盡管它的很多特性在其他移動設備上也能很好地工作，jQTouch 設計時無疑參考了 iPhone。我們來看一個構建于 jQTouch 之上的一個簡單的移動 web 應用程序。
jQTouch 應用程序開發(fā)：利用 web 技巧
正如前面所提到的，和其他框架（比如 SproutCore 和 Cappuccino）相比，jQTouch 框架采取了一個截然不同的方法來進行 web 應用程序開發(fā)。jQTouch 框架和這些框架也有很多共同之處；它同樣允許您從您的服務器上檢索數(shù)據(jù)以及在客戶端創(chuàng)建整個用戶接口。但是，不像這些框架，它不要求 您使用此方法。事實上，它不僅僅建立在 JavaScript 上，也建立在 HTML 和 CSS 上。要了解這一點，從基礎開始。
jQTouch 基礎
如果您閱讀了本系列的前兩篇文章，您對這個將要使用 jQTouch 構建的應用程序應該比較熟悉。它是針對內(nèi)部 web 應用程序的一個員工通訊錄。您需要加載您在本系列上兩期中所使用的數(shù)據(jù)。然而，jQTouch 提供更移動友好的用戶界面元素，因為它有一個更好的 UI。您將需要以表格形式和清單形式顯示數(shù)據(jù)。從一個主界面開始，如 清單 1 所示，該界面允許用戶選擇表格格式或清單格式的數(shù)據(jù)。
清單 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 文件也包含在內(nèi)。要使用 jQTouch，這兩個 JavaScript 文件您都需要。這些包含 jQuery 庫和 jQTouch 插件庫。您也需要第一個 CSS 文件（jqtouch.min.css），另一個 CSS 文件是一個可選主題。jQTouch 包括兩個主題，一個用來匹配 iPhone (Cocoa Touch) UI，另一個（jqt）較為中性。在清單 1 中，jqt 主題 CSS 文件也包括在其中。最后，您需要初始化 jQTouch 對象。許多選項可以被傳送到這個構造函數(shù)。在這里，您只要指定一個應用程序圖標，如果用戶‘安裝’ 該應用程序，將會使用這個圖標，如 圖 1 所示。
圖 1. 安裝到 iPhone 主屏幕的移動 web 應用程序
回到清單 1，余下的代碼是基礎 HTML。您有一個含有 home 類的 div。這個類沒什么特別之處。然而，如果您熟悉 jQuery，那么您將會認出這是 jQuery 中的一個頁面。您應用程序中的每個頁面（屏幕）在單個 HTML 頁面上是一個 div。所以這種情況下，您的頁面在頂層有一個 div，含有 toolbar 類。 這個特別的類是在核心 jQTouch CSS 文件中定義的幾個樣式中的一個。接著，您有一個含有 edgetoedge 類的無序列表 — 另一個 jQTouch 樣式。這個列表中的每個條目都是鏈接到 HTML 頁面其他部分的鏈接。此外，它也是另一個常用 jQuery 范式，用于鏈接一個 web 應用程序中的不同頁面。圖 2 展示了在清單 1 中創(chuàng)建的應用程序在 iPhone 中的樣子。
圖 2. iPhone 上的主屏幕
圖 2 顯示一個相對簡單的用戶界面；創(chuàng)建它需要的所有代碼在清單 1 中，此時您所用是一些 HTML。您清單中的元素也是可點擊的，而且它們將導向您應用程序的其他頁面。然而，這些頁面需要一些加載 Ajax 的數(shù)據(jù)以正常工作。正如您所看到的，Ajax 是 jQuery 與眾不同的另一個方面。
使用 jQuery 生成動態(tài)數(shù)據(jù)
迄今為止，您已經(jīng)利用了 jQTouch 為移動設備優(yōu)化的樣式來生成簡單的 HTML，并將其變成一個引人注目的移動用戶界面?，F(xiàn)在生成一個動態(tài)清單和一個動態(tài)表格。首先檢索這些界面的數(shù)據(jù)，如 清單 2 所示。
清單 2. 使用 Ajax 檢索數(shù)據(jù)
- $(document).ready(function(){
- $.getJSON('employees.json', function(data){
- data.forEach(addEmployee);
- });
- ...
- });
- function addEmployee(e){
- addEmployeeToList(e);
- addEmployeeToTable(e);
- }
在清單 2 中，您只用了基本的 jQuery 功能。初始頁面加載完成后立即使用 Ajax 從服務器加載數(shù)據(jù)。這是 Web 開發(fā)中的一個常用范式，jQuery 使用 $(document).ready 函數(shù)輕松地就可以生成。該函數(shù)接受一個函數(shù)作為它的輸入?yún)?shù)。在這個案例中您使用一個匿名內(nèi)聯(lián)函數(shù)，也稱為一個閉包。這個閉包在在初始頁面加載完成后立即 執(zhí)行。jQuery 提供很多方便的函數(shù)來處理 Ajax 請求和響應。在這種情況下，數(shù)據(jù)將被格式化為 JSON，因此，使用 jQuery 的 getJSON 函數(shù)，采用一個字符串來表示請求的 URL 端點。這個函數(shù)在后臺使用一個 XMLHttpRequest 對象生成一個 HTTP GET 來請求這個 URL。
當 Ajax 請求從服務器成功返回時，該函數(shù)也采用另一函數(shù)作為一個回調(diào)。（也可以利用另一個可選 callback 函數(shù)來處理錯誤，但是為了保持示例的簡潔，我們放棄了使用它。）您再一次傳遞一個閉包作為 callback 函數(shù)；此函數(shù)預期接收一個 employee 對象數(shù)組 — 在本系列之前的文章中您曾使用過的數(shù)據(jù)。該回調(diào)函數(shù)然后使用 Array 對象的 forEach 方法。您可能對這個函數(shù)不是很熟悉，因為它在舊版本中沒有提供。但是在您鎖定的這些更現(xiàn)代的瀏覽器上，它都是 可用的。它使用一個函數(shù)作為它的參數(shù)，然后依次將這個函數(shù)應用到 Array 中的每個對象中。盡管您可以傳遞另一個閉包給它，而不是將其作為一個引用傳遞給另一個名為 addEmployee 的函數(shù)。該函數(shù)授權分離函數(shù)，將員工對象添加到列表以及添加到表格?？纯催@些函數(shù)如何使用 jQTouch 動態(tài)創(chuàng)建 UI。
使用 jQTouch 創(chuàng)建動態(tài) UI
回到清單 1 ，您將注意到您的主屏幕已經(jīng)連接到其他兩個頁面了，一個是數(shù)據(jù)的列表視圖，另一個是數(shù)據(jù)的表格視圖。我們之前提到過，它利用 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>
再一次強調(diào)，上面只是一個簡單的 HTML。一次只研究一個頁面，在列表頁中，您再次有一個使用工具欄樣式的嵌套 div。它是一個簡單標題，含有鏈接錨文本。注意到錨點有返回類按鈕。再一次說明，這是 jQTouch 提供的一種樣式，它將為頁面創(chuàng)建一個返回按鈕，看起來像源自移動平臺的。圖 3 顯示了這個工具欄在 iPhone 中的效果。
圖 3. 列表頁面工具欄
正如您所看到的，jQTouch 允許您使用少量代碼輕松地創(chuàng)建高質(zhì)量的界面。返回到清單 3 ，您可以看到您也有一個空的無序列表。注意，它使用 jQTouch 提供的 edgetoedge 風格，如果您想水平拉伸整個屏幕，這是一個很合適的條目。使用您在清單中從服務器檢索到的數(shù)據(jù)來填充這個列表，如 清單 4 所示。
清單 4. 創(chuàng)建一個列表
- 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 開發(fā)中動態(tài)創(chuàng)建 HTML 元素是一個比較繁瑣的任務；這再一次成為 jQuery 炫目的地方。清單 4 中的代碼是純 jQuery 代碼。您首先可以通過向 jQuery 傳遞一個 CSS 選擇器從清單 3 中獲取這個無序列表的一個引用。創(chuàng)建您想要放入列表中的文本，然后使用 jQuery 提供的便捷方法來創(chuàng)建 DOM 元素，并向其中添加一個文本節(jié)點。最后，將這個 DOM 元素添加到無序列表中。圖 4 使用模擬數(shù)據(jù)顯示了這個列表的樣子。
圖 4. 列表視圖
要創(chuàng)建您的列表，使用一些基本的 jQuery 代碼來從服務器檢索數(shù)據(jù)，然后創(chuàng)建一些標準 HTML 元素（以及一個引用 jQTouch 樣式的 HTML 框架），這也是創(chuàng)建上述 UI 所必需的。如果您在一個移動設備上測試它，您將注意到它的加載速度很快而且屏幕滾動很流暢。現(xiàn)在看看您如何創(chuàng)建一個表格來顯示同樣的數(shù)據(jù)。
回到清單 3 ，注意您的表格頁面類似于列表頁面。它有一個類似的工具欄，只有一個額外按鈕。（不久您就會看到這個按鈕的功能。）它也有一個綱要表格 — 即，有表頭但沒有數(shù)據(jù)。數(shù)據(jù)和列表中的一樣。您只需要為您的表格創(chuàng)建行即可，如 清單 5 所示。
清單 5. 創(chuàng)建表行
- 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 的便捷方法來創(chuàng)建 HTML DOM 元素，然后一起添加。注意，便利的附加函數(shù)允許您使用一個構建器模式來快速創(chuàng)建表行，其中有 3 個單元格。圖 5 使用模擬數(shù)據(jù)顯示了表格的樣子。
圖 5. 表格視圖
清單 5 顯示了預期的用戶界面。您可以使用標準 CSS 使這個表格更漂亮。您可能會注意到在頂部工具欄的右端有一個加號（+）按鈕?；氐角鍐?3 ，注意到這個鏈接連接到另一個名為 New 的頁面，也注意一下這鏈接上的類是按鈕翻轉。這將再次創(chuàng)建一個本機外觀按鈕，起鏈接到新頁面的作用。該類的翻轉指明 jQTouch 應該使用一個翻轉轉換。這是一個專有 WebKit CSS 3D 動畫，目前僅在 iPhone 中支持，是 jQTouch 易于利用的 2D 和 3D 動畫其中的一種。當您點擊加號按鈕時，將顯示一個用于創(chuàng)建新員工表單的頁面。清單 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 創(chuàng)建的。此時，您有一個 Cancel 鏈接，是使用 button cancel 類設計的。當然 button 類是將這個鏈接放進一個按鈕中的。cancel 類會使鏈接返回到之前的頁面，類似于 back 類。然而，和 back 類有所不同，它將自動使用與轉換到該頁面效果相反的效果。
有了工具欄之后，您就有一個封裝在無序列表之內(nèi)的簡單 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 事件。再一次傳遞一個閉包來處理該事件。在閉包中，創(chuàng)建一個 JavaScript employee 對象，但是從表單中檢索值。然后使用您在清單 2 中看到的 addEmployee 函數(shù)來將新員工信息添加到列表和記錄視圖中。接著，使用一個 jQTouch 函數(shù) goBack。 其工作方式類似于您之前看到的 Cancel 按鈕，轉回到上一頁。最后，返回 false 來阻止表單提交。顯然，該代碼只能將員工信息添加到本機屏幕。您可以想像一個可將員工信息添加到共享數(shù)據(jù)庫的服務端 API，而且您可以使用 jQuery 卓越的 Ajax 和表單功能來將數(shù)據(jù)序列化，然后發(fā)送回服務器。這樣，在樣例應用程序中就完成了所有功能?，F(xiàn)在，您已經(jīng)使用 jQTouch 構建了一個移動 web 應用程序，看看其結果如何。
使用 jQTouch 的移動 web 應用程序
盡管 jQTouch 框架可能是 jQuery 之上的一個簡單插件，它的確通過接受核心 web 技術以及使開發(fā)更為容易擴展了 jQuery 框架的理念。它添加大量移動優(yōu)化的用戶界面元素，使您可以輕松地將簡單的 CSS 樣式應用于 HTML，并獲取較為成熟的結果。此外，這些主題和特性（比如頁面轉換）也為應用程序帶來了一種原生感覺。
提到處理應用程序邏輯，jQTouch 不像其他架構那樣試圖提取出工作流。相反地，它依賴功能強大的 jQuery 工具使得表單處理、Ajax、頁面轉換這類任務變得更為容易。如果您是一名經(jīng)驗豐富的、且習慣于使用 web 應用程序的 web 開發(fā)人員 — 使用 web 功能強大的 HTML、JavaScript 和 CSS 組合— 那么，jQTouch 也會非常適合您。您可以快速生成具有吸引力、易于使用的移動 web 應用程序。然而，如果您想采用一個更結構化的方法，那么您將不得不自己添加結構。這極大地改變了通常由一個開發(fā)團隊來處理的巨大且復雜的應用程序。此 外，jQTouch 不改變創(chuàng)建 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。寫這篇文章時，發(fā)布的是該項目的第一個 α 版本，顯然還是比較粗糙。然而，如果您對 jQTouch 很感興趣，及時了解 jQuery Mobile 的最新信息。
結束語
本文證實了可以應用您的 web 開發(fā)技巧來構建一個移動應用程序，只需 jQTouch 提供少量幫助。對于很多開發(fā)人員來說，這可能是進行移動開發(fā)最直接的方法。如果您是一名 web 開發(fā)人員，可能早對 jQuery 有過了解，這使得 jQTouch 更具吸引力。深入挖掘卓越的 jQTouch 文檔并探究它的更多的特性。這使得您可以在移動 web 應用程序中更加輕松地使用 iPhone 和 Android 瀏覽器上可用的很多高級 HTML5 功能。
下載源碼：intradir-jqtouch.zip
文章出處：IBM developerWorks
