創(chuàng)建由jQuery Mobile驅(qū)動(dòng)的移動(dòng)web應(yīng)用程序
開(kāi)始之前
為了使本教發(fā)揮最大作用，您應(yīng)該熟悉使用 HTML、JavaScript 和 CSS 構(gòu)建 web 應(yīng)用程序。另外，這個(gè)移動(dòng) web 應(yīng)用程序附帶的服務(wù)器端代碼是用 PHP 和 MySQL 編寫(xiě)的。熟悉服務(wù)器端編程也有助于您跟隨本教程的操作。如果您熟悉其他服務(wù)器端平臺(tái)，比如 ASP Classic、ASP.Net 或 Java™ Server Pages，那么您可能會(huì)發(fā)現(xiàn)，服務(wù)器端代碼很容易理解。熟悉 jQuery 并不是必須的，當(dāng)然，熟悉它不會(huì)有壞處。事實(shí)上，本教程的目標(biāo)讀者是致力于探索新框架的移動(dòng)程序員，而不是準(zhǔn)備拓展到移動(dòng)空間的 jQuery 專業(yè)人員。學(xué)習(xí)完本教程后，您將了解如何構(gòu)建一個(gè)基本的 jQuery Mobile 應(yīng)用程序以及如何在移動(dòng)瀏覽器和后端服務(wù)器之間管理數(shù)據(jù)。這個(gè)應(yīng)用程序演示如何在銷售相關(guān)數(shù)據(jù)上執(zhí)行基本記錄操作(比如 insert、update、delete)。當(dāng)您從多個(gè)瀏覽器運(yùn)行您的移動(dòng) web 應(yīng)用程序時(shí)，您將注意到它有多么通用。最后，您可以將您的移動(dòng) web 應(yīng)用程序的快捷鍵安裝在 iPod 和 Android 設(shè)備的主屏幕上，從而演示如何部署一個(gè) web 應(yīng)用程序。
關(guān)于本教程
本教程介紹 jQuery Mobile (JQM) 框架，該框架用于編寫(xiě)針對(duì)移動(dòng)行業(yè)的主流瀏覽器的移動(dòng) web 應(yīng)用程序。JQM 用于向一些移動(dòng)設(shè)備(比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等)上運(yùn)行的基于 web 的應(yīng)用程序提供直觀統(tǒng)一的用戶體驗(yàn)。本教程首先簡(jiǎn)要介紹 JQM 項(xiàng)目，以及 JQM 與 HTML5 的關(guān)系及其對(duì)后者的依賴。然后，本教程介紹構(gòu)建一個(gè) JQM 應(yīng)用程序的眾多方法中的一種，以及 JQM 增強(qiáng)基本 web UI 元素的一些方法。最后，本教程將關(guān)注一個(gè)簡(jiǎn)單的銷售驅(qū)動(dòng)導(dǎo)向自動(dòng)化的需求。
針對(duì)這個(gè)問(wèn)題，本教程制定一個(gè)計(jì)劃來(lái)實(shí)現(xiàn)一個(gè)針對(duì)移動(dòng)設(shè)備用戶的解決方案，無(wú)需進(jìn)行本地移動(dòng)開(kāi)發(fā)。完成后的應(yīng)用程序?qū)⒈谎菔荆@樣當(dāng)您跟隨本教程逐步構(gòu)建自己的應(yīng)用程序時(shí)，就知道本教程將把您帶向何處。當(dāng)您學(xué)習(xí)使用 JQM 實(shí)現(xiàn)這個(gè)解決方案時(shí)，我們將逐一檢查源文件中的函數(shù)。本教程最后將介紹幾個(gè)技巧，以幫助您的用戶在他們的移動(dòng)設(shè)備上更輕松地訪問(wèn)您的應(yīng)用程序。
先決條件
要跟隨本教程，您需要以下組件：
◆文本編輯器 — 可以使用您喜歡的任何文本編輯器。支持語(yǔ)法高亮功能的編輯器更好用。Notepad++ 是一個(gè)很好用的開(kāi)源編輯器。
◆JQuery Mobile 鏈接 — 實(shí)際上您無(wú)需下載任何內(nèi)容。必要的文件通過(guò) jQuery's Content Delivery Network (CDN) 提供。
◆Web 瀏覽器— 這個(gè)瀏覽器用于查看 jQuery Mobile 幫助和文檔。
◆WebKit (Safari) 或 Chrome Browser — 這些瀏覽器支持在桌面機(jī)上進(jìn)行 jQuery Mobile 開(kāi)發(fā)。
◆移動(dòng)設(shè)備 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有類似功能的移動(dòng)設(shè)備。
◆PHP 和 MySQL 托管環(huán)境 — 用于應(yīng)用程序的服務(wù)器端。
我在一個(gè) MacBook Pro 上創(chuàng)建本教程的代碼樣例，通過(guò) VMWare Fusion 運(yùn)行 Windows® 7。我使用 Notepad++ 編輯文件，因?yàn)樗粌H擁有不錯(cuò)的語(yǔ)法高亮顯示功能，還有安全的 FTP，可以使與基于服務(wù)器的 PHP 文件交互變得非常直觀。您也可以在 vi 中編輯文件，但誰(shuí)想這樣做呢?為了使用 MySQL 數(shù)據(jù)庫(kù)，我使用我的主機(jī)帳戶可用的 phpMyAdmin。為了在一個(gè)物理設(shè)備上進(jìn)行測(cè)試，我使用一個(gè)運(yùn)行 Android 2.2 的 Nexus One 和一個(gè)運(yùn)行 iOS 4.1 的 iPod Touch。
請(qǐng)參見(jiàn) 參考資料 獲取幫助鏈接；下載 樣例應(yīng)用程序的源代碼。#p#
jQuery Mobile
我們首先檢查 JQM 以及如何使用它改進(jìn)移動(dòng) web 應(yīng)用程序開(kāi)發(fā)體驗(yàn)。盡管 jQuery Core 可以完全安裝使用，但 JQM 仍然處于嬰兒期，在本文撰寫(xiě)之時(shí)還處于 alpha 階段。我們可以看一看 JQM 項(xiàng)目期望實(shí)現(xiàn)的目標(biāo)。
JQM — 最新的 jQuery 家族成員
JQM 的目標(biāo)是在一個(gè)統(tǒng)一的 UI 中交付超級(jí) JavaScript 功能，跨最流行的智能手機(jī)和平板電腦設(shè)備工作。與 jQuery 一樣，JQM 是一個(gè)在 Internet 上直接托管、免費(fèi)可用的開(kāi)源代碼基礎(chǔ)。事實(shí)上，當(dāng) JQM 致力于統(tǒng)一和優(yōu)化這個(gè)代碼基時(shí)，jQuery 核心庫(kù)受到了極大關(guān)注。這種關(guān)注充分說(shuō)明，移動(dòng)瀏覽器技術(shù)在極短的時(shí)間內(nèi)取得了多么大的發(fā)展。
與 jQuery 核心庫(kù)一樣，您的開(kāi)發(fā)計(jì)算機(jī)上不需要安裝任何東西;只需將各種 *.js 和 *.css 文件直接包含到您的 web 頁(yè)面中即可。這樣，JQM 的功能就好像被放到了您的指尖，供您隨時(shí)使用。
清單 1 展示了將 jQuery Mobile 文件添加到應(yīng)用程序是多么簡(jiǎn)單!
清單 1. 將 jQuery Mobile 添加到應(yīng)用程序
- <head>
- <title>IBM JQuery Tutorial</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1
- /jquery.mobile-1.0a1.min.css" />
- <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js">
- </script>
- <script src="http://jquery.ibm.navitend.com/utils.js"></script>
- </head>
清單 1 中的代碼實(shí)際上是本教程的樣例代碼中的一個(gè)潛在高峰(sneak peak)，本教程稍后還將討論它。注意，現(xiàn)在一個(gè)樣式表已經(jīng)直接從 jQuery 的 Content Delivery Network (CDN) 下載下來(lái)。CDN 用于分發(fā)跨 Internet 分發(fā)經(jīng)常使用的文件，使得下載速度盡可能快。CDN 通常部署在一些大型基礎(chǔ)架構(gòu)上，通過(guò)在 Internet 上的一些戰(zhàn)略位置放置文件，將這些文件需要傳輸?shù)穆窂綔p小到最小距離。jQuery CDN 和其他類似 CDN 通常托管在一些世界級(jí)大型基礎(chǔ)架構(gòu)上，比如 amazon.com 和其他 Internet 巨頭提供的基礎(chǔ)架構(gòu)。
除 CSS 文件外，這個(gè)頭部還包含三個(gè) JavaScript 文件。第一個(gè) JavaScript 文件對(duì)縮減 形式的 jQuery 核心庫(kù)的引用，然后是 JQM 庫(kù)的縮減形式，最后是一個(gè)特定于應(yīng)用程序的 JavaScript 文件 utils.js?？s減 意味著代碼針對(duì)快速下載和解析進(jìn)行過(guò)優(yōu)化。記住，每個(gè)應(yīng)用程序頁(yè)面都需要下載這些文件，因此，應(yīng)使它們的大小絕對(duì)最小(并依賴緩存!)來(lái)大幅提高應(yīng)用程序性能。
清單 1 中的版本實(shí)際上是 jQuery Mobile alpha 發(fā)布 1。alpha 發(fā)布 2 已經(jīng)可用，但由于存在一些 bug 行為，本教程依賴該代碼的第一個(gè) alpha 發(fā)布。您閱讀本教程之時(shí)，這些 JQM 文件的一個(gè)更新版本可能已經(jīng)可以下載。參見(jiàn) 參考資料 中 jQuery 的 CDN 鏈接，獲取這些庫(kù)文件的最新版本。JQM 受到 MIT 和 GPL 許可的雙重許可;基本上，這意味著如果您保持這個(gè) jQuery 屬性，就能在您的應(yīng)用程序中使用這些文件。
注意，也可以下載這些 jQuery 文件的一個(gè)副本并直接從您自己的 web 服務(wù)器托管它們。這種方法不是個(gè)壞主意，特別是當(dāng)您正在發(fā)布一個(gè)依賴這個(gè)框架的商業(yè)應(yīng)用程序時(shí)。這些框架可能會(huì)而且的確會(huì)發(fā)生更改，有時(shí)會(huì)損害依賴特定行為的應(yīng)用程序。商業(yè)企業(yè)通常對(duì)可預(yù)測(cè)的行為更感興趣，因?yàn)檫@種行為更容易支持;而不是總是追趕時(shí)髦。
面向觸摸
JQM 是一個(gè)經(jīng)過(guò)觸摸優(yōu)化的框架，用于為基于瀏覽器的移動(dòng) web 應(yīng)用程序構(gòu)建統(tǒng)一和理想的用戶體驗(yàn)。您所知道的關(guān)于編寫(xiě) web 應(yīng)用程序的大部分知識(shí)仍然適用;但是，使應(yīng)用程序看起來(lái)更統(tǒng)一這個(gè)目標(biāo)是 JQM 方法的真正關(guān)鍵部分。JQM 采用一種特殊方式樣式化標(biāo)準(zhǔn)表單元素，使其在視覺(jué)上更美觀并更容易操作。請(qǐng)您仔細(xì)查看 圖 1 中的圖像，它們展示了 JQM 樣式化表單元素的一個(gè)子集。
圖 1. JQM 表單元素
除便于觸摸和樣式化 UI 元素外，JQM 的真正魔力在于它管理屏幕過(guò)渡的方式。我們來(lái)看一看。#p#
應(yīng)用程序架構(gòu)
本節(jié)探索本教程的樣例應(yīng)用程序的架構(gòu)，逐步演示構(gòu)建過(guò)程的每個(gè)主要步驟。您可以逐步跟隨本教程的操作，自己重建應(yīng)用程序;或者，您也可以從 參考資料 下載完整的項(xiàng)目。
應(yīng)用程序架構(gòu)
這個(gè)應(yīng)用程序 — 簡(jiǎn)單地命名為 jQuery tutorial — 跨兩個(gè)主要平臺(tái)實(shí)現(xiàn)：
◆移動(dòng)代碼，利用 JQM
◆服務(wù)器端代碼，在一個(gè) MySQL 數(shù)據(jù)庫(kù)中提供數(shù)據(jù)持久性
所有服務(wù)器端交互通過(guò)一些 PHP 文件完成，數(shù)據(jù)在一個(gè) MySQL 數(shù)據(jù)庫(kù)中的一個(gè)名為 opportunities 的表中進(jìn)行管理。
數(shù)據(jù)庫(kù)結(jié)構(gòu)非常簡(jiǎn)單，只有 4 個(gè)字段(參見(jiàn) 表 2)。
列名
注釋
opp_id
一個(gè)條目的數(shù)值標(biāo)識(shí)符，這個(gè)標(biāo)識(shí)符通過(guò)數(shù)據(jù)庫(kù)自動(dòng)遞增。
opp_person
潛在客戶的姓名或名稱。
opp_contact
潛在客戶的聯(lián)系信息。
opp_description
簡(jiǎn)短的商機(jī)說(shuō)明。
圖 5 展示了 phpMyAdmin 中的文件的結(jié)構(gòu)。列標(biāo)題包括 Field、Type、Collation、Attributes、Null、Default、Extra、Action。
圖 5. 數(shù)據(jù)庫(kù)表結(jié)構(gòu)
您可以看到簡(jiǎn)單的結(jié)構(gòu)和數(shù)據(jù)庫(kù)類型。大部分條目是默認(rèn)值。在一個(gè)生產(chǎn)應(yīng)用程序中，您可能需要仔細(xì)考慮您的數(shù)據(jù)詞典。
要啟動(dòng)應(yīng)用程序，我使用 phpMyAdmin 的插入特性向數(shù)據(jù)庫(kù)插入一些數(shù)據(jù)。圖 6 顯示了與本教程中顯示的設(shè)備屏幕圖像相關(guān)的數(shù)據(jù)的屏幕快照。列標(biāo)題包括 opp_id、opp_person、opp_contact、opp_description。(查看圖 6 的 大圖。)
圖 6. 一些初始數(shù)據(jù)記錄
測(cè)試應(yīng)用程序時(shí)，跳轉(zhuǎn)到直接瀏覽下表是一個(gè)有用的健康檢查。表 3 顯示了應(yīng)用程序使用的源文件清單。
表 3. 必要的應(yīng)用程序源文件
了解這些文件如何協(xié)同工作的最好方法是逐步檢查每個(gè)文件，這是我們下面將介紹的內(nèi)容。
文件
注釋
header.php
包括 HTML 文檔的頭部分，包含必要的腳本標(biāo)記來(lái)包含 JQM 文件。這個(gè)文件的內(nèi)容在前面的 清單 1中已顯示。
footer.php
包括任何 HTML 頁(yè)腳信息。對(duì)于許多應(yīng)用程序而言，這個(gè)信息包含 Google Analytics JavaScript glue 以幫助收集關(guān)于應(yīng)用程序的統(tǒng)計(jì)數(shù)據(jù)。
index.php
應(yīng)用程序用戶界面的主頁(yè)，充當(dāng)部件控制器、來(lái)自一個(gè)類 MVC 范式的部件視圖、或一個(gè)松散配置的 MVC 設(shè)計(jì)中的控制器的部件。
utils.php
這個(gè)文件用于放置所有數(shù)據(jù)訪問(wèn)例程。
db.php
這個(gè)文件用于存儲(chǔ)數(shù)據(jù)庫(kù)憑證。
utils.js
這個(gè)文件用于存儲(chǔ)幾個(gè)表單級(jí)驗(yàn)證腳本。
構(gòu)建應(yīng)用程序
大多數(shù)應(yīng)用程序的關(guān)鍵是創(chuàng)建正確的數(shù)據(jù)模型。如上節(jié)所述，這個(gè)應(yīng)用程序的數(shù)據(jù)模型非常直觀。在代碼詳解中，可以從 清單 5 中的數(shù)據(jù)庫(kù)定義開(kāi)始。
清單 5. opportunities SQL 腳本
- CREATE TABLE IF NOT EXISTS `opportunities` (
- `opp_id` int(11) NOT NULL AUTO_INCREMENT,
- `opp_person` varchar(100) NOT NULL,
- `opp_contact` varchar(50) NOT NULL,
- `opp_description` varchar(500) NOT NULL,
- UNIQUE KEY `opp_id` (`opp_id`)
- ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=25 ;
如果您想通過(guò)包含額外的字段來(lái)修改應(yīng)用程序，可以通過(guò)兩種方法將它們添加到數(shù)據(jù)庫(kù)：一是通過(guò) phpMyAdmin 這樣的工具手動(dòng)添加，如前面的 圖 5 所示；二是通過(guò)擴(kuò)展 SQL 腳本。數(shù)據(jù)庫(kù)表就緒后，下一步是連接到數(shù)據(jù)庫(kù)?？梢酝ㄟ^(guò)一些 mysql 函數(shù)連接到數(shù)據(jù)庫(kù)，如 清單 6 中的 db.php 所示。
清單 6. db.php
- <?
- $mysql_db = "databasename";
- $mysql_user = "username";
- $mysql_pass = "password";
- $mysql_link = mysql_connect("localhost", $mysql_user, $mysql_pass);
- mysql_select_db($mysql_db, $mysql_link);
- ?>
顯然，您需要使用您自己的環(huán)境的數(shù)據(jù)庫(kù)名、用戶名和密碼。如果您不能訪問(wèn)支持 MySQL 和 PHP 的主機(jī)帳戶但想跟隨本教程操作，則現(xiàn)在是配置您的環(huán)境的好時(shí)機(jī)。參見(jiàn) 參考資料 了解一些可用選項(xiàng)。
數(shù)據(jù)庫(kù)就緒后，下一步是切換到一個(gè)自上而下的方法，這需要查看這個(gè)應(yīng)用程序的主源文件 index.php，如 清單 7 所示。
清單 7. 主 UI 源文件
- <?
- require('db.php');
- require('utils.php');
- require('header.php');
- ?>
- <div data-role="page">
- <div data-role="header">
- <h1>JQuery Tutorial</h1>
- </div>
- <div data-role="content">
- <?
- $action = $_REQUEST['action'];
- if ($action == 'addnew') {
- showOneOpp(-1);
- } else if ($action == 'upsert') {
- if ($_REQUEST['id'] == '-1') {
- addOpp($_REQUEST['person'],$_REQUEST['contact'],$_REQUEST['description']);
- } else {
- updateOpp($_REQUEST['id'],$_REQUEST['person'],$_REQUEST['contact'],
- $_REQUEST['description']);
- }
- showOpps();
- } else if ($action == 'delete') {
- killOpp($_REQUEST['id']);
- showOpps();
- } else if ($action == 'details') {
- showOneOpp($_REQUEST['id']);
- } else {
- showOpps();
- }
- ?>
- </div>
- <div data-role="footer">
- Sample code for IBM developerWorks
- </div>
- </div>
- <? require('footer.php'); ?>
- </body>
- </html>
這個(gè) PHP 文件是服務(wù)器上的所有交互的入口點(diǎn)。根據(jù)一個(gè)名為 action 的參數(shù)的存在性和值，腳本執(zhí)行不同的功能。在深入具體操作之前，請(qǐng)注意這個(gè)文檔中的 jQuery Mobile 結(jié)構(gòu)，該結(jié)構(gòu)包含多個(gè) div 元素，每個(gè)元素都帶有相應(yīng) data-role，用于頁(yè)面、頁(yè)眉、內(nèi)容和頁(yè)腳。
這個(gè)應(yīng)用程序架構(gòu)相當(dāng)簡(jiǎn)單 — 頁(yè)面每次加載時(shí)，其內(nèi)容都將被 content div 中新生成的內(nèi)容替代。在某種程度上，這可能帶有欺騙性并返回一些舊的 web 應(yīng)用程序習(xí)慣。也許是這樣，但本教程的目標(biāo)是在一個(gè)有用的真實(shí)世界場(chǎng)景中演示 JQM 的一些基本功能，因此，保持這個(gè)簡(jiǎn)單結(jié)構(gòu)有助于實(shí)現(xiàn)所有目標(biāo)。
要理解發(fā)生了什么事，我們從上到下仔細(xì)查看一下 index.php。
◆db.php 文件被包含進(jìn)來(lái) — 這個(gè)文件向您提供數(shù)據(jù)庫(kù)訪問(wèn)權(quán)。
◆utils.php 文件被包含進(jìn)來(lái) — 這個(gè)文件提供所有特定于這個(gè)應(yīng)用程序的數(shù)據(jù)管理功能。
◆header.php 文件被包含進(jìn)來(lái) — 這個(gè)文件包含 jQuery Core 和 jQuery Mobile JavaScript 文件、jQuery Mobile CSS 文件以及一個(gè)特定于應(yīng)用程序的 JavaScript 文件：utils.js。
◆JQM div 元素被定義，頁(yè)眉包含一個(gè) h1 標(biāo)記和一個(gè)伴隨標(biāo)題文本。
◆通過(guò)從 $_REQUEST 內(nèi)置數(shù)組提取建立 $action 變量。$_REQUEST 變量 coalesces $_GET 和 $_POST 數(shù)據(jù)，簡(jiǎn)化發(fā)送到這個(gè)頁(yè)面的各種請(qǐng)求的處理過(guò)程。
◆使用以下選項(xiàng)評(píng)估 $action 變量，每個(gè)選項(xiàng)都調(diào)用 utils.php 中的一個(gè)或多個(gè)函數(shù)：
◆addnew — 顯示一個(gè)空表單以添加一個(gè)新條目。當(dāng)您正在參加商貿(mào)展或會(huì)見(jiàn)一位新的潛在客戶時(shí)，這個(gè)特性可能正是您需要的。
◆upsert — 如果記錄是新的，您可能想將它插入表中。如果記錄已經(jīng)存在，您需要更新它的列。如果 id 字段的值等于-1，說(shuō)明您有一條全新的記錄，必須執(zhí)行插入操作。其他值代表一條有效記錄、商機(jī)或標(biāo)識(shí)符。
◆delete — 用戶已請(qǐng)求刪除這條記錄。
◆details — 用戶已經(jīng)選擇一個(gè)條目，想查看這個(gè)商機(jī)的細(xì)節(jié)。
◆如果 $action 變量為空，則表示只顯示一列商機(jī)。這是頁(yè)面首次加載時(shí)的默認(rèn)行為。
◆頁(yè)面最后包含 footer.php。在這個(gè)應(yīng)用程序中，頁(yè)腳包含一些 Google 分析代碼，以便跟蹤應(yīng)用程序的使用情況。
理解這個(gè)頁(yè)面后，下一步是檢查 utils.php 中包含的功能。特別是，您需要查看 showOpps 函數(shù)，該函數(shù)為用戶界面生成一個(gè)商機(jī)列表，并引入一個(gè)新的 JQM 功能：listview，如 清單 8 所示。
清單 8. listviewshowOpps 生成一個(gè) listview
- function showOpps()
- {
- global $mysql_link;
- $COL_OPPID= 0;
- $COL_PERSON= 1;
- $COL_CONTACT= 2;
- $COL_DESCRIPTION= 3;
- $sql ="select * from opportunities order by opp_id desc";
- $result = mysql_query($sql,$mysql_link);
- if(mysql_num_rows($result))
- {
- print("<a data-rel=\"dialog\" data-transition=\"pop\"
- href=\"index.php?action=addnew\">Add New Opportunity</a>
- <br /><br />");
- print("<ul data-role=\"listview\" data-filter=\"true\">");
- while($row = mysql_fetch_row($result)) {
- print("<li data-ibm-jquery-contact=\"".$row[$COL_CONTACT]."\">");
- print("<a data-rel=\"dialog\" data-transition=\"pop\"
- href=\"index.php?action=details&id=".$row[$COL_OPPID]."\">");
- print("Person: ".$row[$COL_PERSON]."<br />");
- print("Contact: ".$row[$COL_CONTACT]."<br />");
- print("Description: ".$row[$COL_DESCRIPTION]);
- print("</a>");
- print("</li>\n");
- }
- print("</ul>");
- }
- }
showOpps 函數(shù)跳到數(shù)據(jù)庫(kù)，取出所有行，首先顯示最新記錄，然后將數(shù)據(jù)組織到一個(gè) listview 中。注意這個(gè)代碼清單中的 JQM 特性。
◆在獲取行之前，將為 Add New Opportunity 生成一個(gè)定位標(biāo)記。這里包含了兩個(gè)特定于 JQM 的特性：
◆data-rel="dialog" 告知 JQM 新窗口出現(xiàn)時(shí)應(yīng)該如何顯示。它獲取一個(gè)對(duì)話框的顏色方案。
◆data-transition="pop" 告知 JQM 對(duì)話框以彈出方式顯示。當(dāng)對(duì)話框被清除時(shí)，它執(zhí)行一個(gè)反向過(guò)渡，這時(shí)，對(duì)話框逐漸縮小直到消失。當(dāng)您試驗(yàn)這個(gè)應(yīng)用程序時(shí)，嘗試將這個(gè)值更改為翻頁(yè)、淡出或其他可用過(guò)渡。
圖 7 顯示了添加新條目的對(duì)話框屏幕。這次，它在一個(gè) iPod 上處于縱向顯示模式(portrait mode)。
圖 7. 添加一個(gè)新商機(jī)
◆當(dāng)列表被創(chuàng)建時(shí)，它被創(chuàng)建為一個(gè)無(wú)序列表(或 ul 元素)。 這個(gè)元素的 data-role 是一個(gè) listview。這是 JQM 的一個(gè)重要屬性，因?yàn)榱斜砉芾硎且粋€(gè)重要主題。另外，要注意 data-filter="true" 屬性。這個(gè)簡(jiǎn)單屬性提供整個(gè)應(yīng)用程序中最有價(jià)值的功能(盡管有爭(zhēng)議) — 主屏幕上的先行(look-ahead)搜索，如 圖 8 所示。
圖 8. 過(guò)濾后的結(jié)果
當(dāng)用戶輸入一個(gè)詞組時(shí)，將檢查列表中的每個(gè)條目，查看是否存在該詞組;如果不存在，將從列表中刪除該條目，只留下匹配的條目。在 圖 8 中，單詞 “Lego” 只存在于一個(gè)條目中。 一個(gè)有趣的邊注：圖 8 中的圖像來(lái)自我的 MacBook 上運(yùn)行的 WebKit (Safari)。Safari 和 Chrome 都是測(cè)試以移動(dòng)為目標(biāo)的 web 應(yīng)用程序的桌面瀏覽器的不錯(cuò)選擇。
◆當(dāng)用戶選擇鏈接中的一個(gè)條目時(shí)，他們實(shí)際上是使用一個(gè) data-rel 值 dialog 和一個(gè) data-transition 值 pop 激活一個(gè)定位。結(jié)果是 圖 9(同樣來(lái)自桌面機(jī))中的一個(gè)對(duì)話框視圖中的一個(gè)特定條目的關(guān)聯(lián)細(xì)節(jié)。這個(gè)條目顯示 Person、Contact info 和 Comments 字段以及 Save Opportunity 按鈕。
圖 9. 一條商機(jī)記錄的細(xì)節(jié)
注意，不管這個(gè)屏幕圖像來(lái)自那個(gè)設(shè)備，它都有相似的觀感。這個(gè)教程在 Android 設(shè)備、iPod 和 Safari(WebKit nightly build)上都能很好地運(yùn)行?？梢钥闯觯琷Query Mobile 的一些設(shè)計(jì)目標(biāo)取得了成果。
◆這個(gè)代碼清單中最后需要注意的項(xiàng)目是使用列表項(xiàng)列示的屬性。在本例中，每個(gè)列表項(xiàng)都包含一個(gè)名為 data-ibm-jquery-contact 的自定義屬性，該屬性的值來(lái)自數(shù)據(jù)庫(kù)中的 opp_contact 字段。這個(gè)項(xiàng)目存在的目的為了將來(lái)實(shí)現(xiàn)以下功能：添加當(dāng)用戶在列表中的一個(gè)條目上執(zhí)行 “敲擊并保持(taphold)” 操作時(shí)致電或發(fā)送電子郵件的能力。
當(dāng)一條現(xiàn)有商機(jī)記錄在對(duì)話框中顯示(如 圖 9 所示)之后，用戶可以選擇幾個(gè)選項(xiàng)。這個(gè)頁(yè)面的代碼在 utils.php 中的 showOneOpp 函數(shù)中提供，如 清單 9 所示：
清單 9. showOneOpp
- function showOneOpp($id)
- {
- global $mysql_link;
- $COL_OPPID= 0;
- $COL_PERSON= 1;
- $COL_CONTACT= 2;
- $COL_DESCRIPTION= 3;
- $person = "";
- $contact = "";
- $description = "";
- if ($id != -1) {
- $sql ="select * from opportunities where opp_id = " . $id;
- $result = mysql_query($sql,$mysql_link);
- if(mysql_num_rows($result)) {
- $row = mysql_fetch_row($result);
- $person = $row[$COL_PERSON];
- $contact = $row[$COL_CONTACT];
- $description = $row[$COL_DESCRIPTION];
- }
- print("<a rel=\"external\" href=\"javascript:deleteEntry($id)
- \">Delete this entry</a>");
- }
- print("<form method=\"post\" rel=\"external\" action=\"index.php\"
- onsubmit=\"return checkForm();\">");
- print("<input type=\"hidden\" name=\"action\" value=\"upsert\" />");
- print("<input type=\"hidden\" name=\"id\" value=\"$id\" />");
- print("<fieldset>");
- print("<div data-role=\"fieldcontain\">");
- print("<label for=\"person\">Person</label>");
- print("<input type=\"text\" name=\"person\" maxlength=\"100\"
- id=\"person\" value=\"$person\" />");
- print("</div>");
- print("<div data-role=\"fieldcontain\">");
- print("<label for=\"contact\">Contact info</label>");
- print("<input type=\"text\" name=\"contact\" maxlength=\"100\"
- id=\"contact\" value=\"$contact\" />");
- print("</div>");
- print("<div data-role=\"fieldcontain\">");
- print("<label for=\"description\">Comments</label>");
- print("<input type=\"text\" name=\"description\" maxlength=\"100\"
- id=\"description\" value=\"$description\" />");
- print("</div>");
- print("<fieldset>");
- print("<button type=\"submit\" value=\"Save\">Save Opportunity
- </button>");
- print("</form>\n");
- }
這個(gè) showOneOpp 代碼是填充您在其中編寫(xiě)所有表單元素的屏幕的一種強(qiáng)力方法。這個(gè)屏幕上的一些需要注意的項(xiàng)目包括：
◆如果 $id 等于 -1，那么您將準(zhǔn)備這個(gè)屏幕以添加一條新的商機(jī)記錄;否則，您將載入現(xiàn)有商機(jī)記錄并初始化一些頁(yè)級(jí)變量：$person、$contact 和 $description。
◆如果您擁有一條現(xiàn)有記錄，那么您將顯示一個(gè)鏈接，允許用于刪除該商機(jī)。
◆每個(gè)字段周圍的 data-role="fieldcontain" 幫助 JQM 顯示這些字段：將標(biāo)簽和相關(guān)輸入 HTML 元素組合在一起，通過(guò)細(xì)線分隔。
◆當(dāng)用戶填充這些字段并選擇 Save Opportunity 按鈕時(shí)，那些字段將受到檢查，以確保所有字段都已填充，如果已填充，則保存字段。圖 10 顯示了警告用戶填充所有字段的警報(bào)。
圖 10. 表單級(jí)驗(yàn)證
◆屏幕上的另一個(gè)選項(xiàng)是刪除一個(gè)現(xiàn)有條目。如果選擇該選項(xiàng)，另一個(gè) JavaScript 函數(shù)將提示用戶確認(rèn)是否的確要移除選中的商機(jī)記錄，如 圖 11 所示。
圖 11. 確認(rèn)刪除一條商機(jī)記錄
選擇刪除提示處的 OK 將使用一個(gè)動(dòng)作 delete 將應(yīng)用程序發(fā)送回 index.php。
這些表單級(jí)驗(yàn)證的 JavaScript 例程包含在 utils.js 文件中，該文件由 header.php 包含文件加載。清單 10 顯示了 utils.js。
清單 10. Utils.js — 表單級(jí)驗(yàn)證
- function checkForm() {
- try {
- if ($.trim($('#person').val()) == "" ||
- $.trim($('#contact').val()) == "" ||
- $.trim($('#description').val()) == "") {
- alert("Please enter all fields");
- return false;
- }
- } catch (e) {
- alert(e);
- return false;
- }
- return true;
- }
- function deleteEntry(id) {
- try {
- var confirmString = "Delete this entry. Are you sure?\n" + $.trim($('#person')
- .val()) + "\n" + $.trim($('#contact').val()) + "\n" + $.trim($('#description').val());
- if (window.confirm(confirmString)) {
- window.location="index.php?action=delete&id=" + id;
- }
- } catch (e) {
- alert(e);
- return false;
- }
- return true;
- }
這些函數(shù)是非常直觀的 JavaScript，通過(guò)一些 jQuery 選擇器輔助。
您已經(jīng)看到了這個(gè)應(yīng)用程序的大部分功能。現(xiàn)在看看 utils.php 中實(shí)現(xiàn)的另外幾個(gè)函數(shù)，如 清單 11 所示。
清單 11. 更多數(shù)據(jù)管理例程
- function addOpp($person,$contact,$description)
- {
- global $mysql_link;
- $sql = "insert opportunities(opp_id,opp_person,opp_contact,opp_description) values
- (NULL,'$person','$contact','$description')";
- $result = mysql_query($sql,$mysql_link);
- if ($result == 1) {
- return "SUCCESS";
- } else {
- return "FAILED";
- }
- }
- function updateOpp($id,$person,$contact,$description)
- {
- global $mysql_link;
- $sql = "update opportunities set opp_person='".$person."',opp_contact=
- '".$contact."',opp_description='".$description."' where opp_id= ".$id;
- $result = mysql_query($sql,$mysql_link);
- if ($result == 1) {
- return "SUCCESS";
- } else {
- return "FAILED";
- }
- }
- function killOpp($id)
- {
- global $mysql_link;
- $sql = "delete from opportunities where opp_id =$id";
- $result = mysql_query($sql,$mysql_link);
- }
可以看到，這些例程實(shí)現(xiàn)一些直觀的 PHP/MySQL 數(shù)據(jù)訪問(wèn)功能：插入、更新和刪除商機(jī)記錄。
盡管使用 jQuery Mobile 構(gòu)建的本教程樣例應(yīng)用程序的代碼到此結(jié)束，但這應(yīng)該被視為一個(gè)起點(diǎn)，而不是一個(gè)終點(diǎn)，因?yàn)檫€有更多 jQuery Mobile 知識(shí)等待您去探索。JQM 項(xiàng)目計(jì)劃在 2011 年初推出其 1.0 發(fā)布。隨著時(shí)間推移，希望它能集成到 PhoneGap 這樣的框架中，甚至可能集成到 Appcelerator 的 Titanium 這樣的替代開(kāi)發(fā)環(huán)境中。
最后，本教程檢查這個(gè)新創(chuàng)建的、由 JQM 驅(qū)動(dòng)的 web 應(yīng)用程序的安裝快捷鍵。
安裝應(yīng)用程序
這個(gè)應(yīng)用程序不是原生應(yīng)用程序，因此不能從傳統(tǒng) App Store 下載，但是，您可以在您的設(shè)備的主屏幕上為它創(chuàng)建一個(gè)快捷鍵。圖 12展示如何在一個(gè) iPod 設(shè)備上創(chuàng)建一個(gè)快捷鍵。
圖 12. 選擇您的屏幕底部的加號(hào)(+)
iPod 平臺(tái)允許添加新書(shū)簽、向主屏幕添加鏈接、或?qū)㈡溄与娻]給朋友。選擇 Add to Home Screen 選項(xiàng)。然后，命名鏈接，如 圖 13所示。
圖 13. 選擇 Add to Home Screen
您提供快捷鍵名稱后，快捷鍵將出現(xiàn)在您的主屏幕中，正好在您的 “最喜愛(ài)的游戲” 旁邊，如 圖 14 所示。
圖 14. iPod 平臺(tái)的主屏幕上的快捷鍵
在 Android 平臺(tái)上添加快捷鍵需要更多步驟，首先需要?jiǎng)?chuàng)建一個(gè)新書(shū)簽，如 圖 15 所示。
圖 15. 在 Android 平臺(tái)上創(chuàng)建一個(gè)新書(shū)簽
選中書(shū)簽，給它提供一個(gè)名稱，如 圖 16 所示。
圖 16. 可用書(shū)簽
現(xiàn)在您的書(shū)簽擁有了一個(gè)名稱，可供后續(xù)使用。
下一步是轉(zhuǎn)到主屏幕，按住屏幕上的一個(gè)空白區(qū)域。這時(shí)會(huì)出現(xiàn)一個(gè)選項(xiàng)，允許向主屏幕添加項(xiàng)目。選擇 Shortcuts 選項(xiàng)，如 圖 17所示。
圖 17. 添加一個(gè)快捷鍵
然后，選擇 Bookmark 以查看現(xiàn)有書(shū)簽，如 圖 18 所示。
圖 18. 選擇查看現(xiàn)有書(shū)簽
然后，您將看到一些可用書(shū)簽。選擇您新創(chuàng)建的 jQuery Mobile 應(yīng)用程序?qū)?yīng)的適當(dāng)條目，如 圖 19 所示。
圖 19. 選擇您的 web 應(yīng)用程序
最后，您的快捷鍵現(xiàn)在應(yīng)該出現(xiàn)在桌面上，如 圖 20 所示。
圖 20. Android 主屏幕上的快捷鍵#p#
結(jié)束語(yǔ)
本教程到此結(jié)束。如果您跟隨本教程的操作，您應(yīng)該已經(jīng)了解 jQuery Mobile 的基本結(jié)構(gòu)及其與 jQuery Core 項(xiàng)目的關(guān)系。您創(chuàng)建了一個(gè)銷售商機(jī)跟蹤應(yīng)用程序，該程序擁有跨平臺(tái)兼容性，能在多種設(shè)備上運(yùn)行。而且，您能將該應(yīng)用程序安裝到您最喜歡的智能手機(jī)的主屏幕上。
