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