学习如何创建由 jQuery Mobile 驱动的移动 web 应用程序

jfk1982 · 发表于 2011-9-1 10:03

开始之前

为了使本教发挥最大作用，您应该熟悉使用 HTML、JavaScript 和 CSS 构建 web 应用程序。另外，这个移动 web 应用程序附带的服务器端代码是用 PHP 和 MySQL 编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟悉其他服务器端平台，比如 ASP Classic、ASP.Net 或 Java™ Server Pages，那么您可能会发现，服务器端代码很容易理解。熟悉 jQuery 并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移动程序员，而不是准备拓展到移动空间的 jQuery 专业人员。学习完本教程后，您将了解如何构建一个基本的 jQuery Mobile 应用程序以及如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作（比如 insert、update、delete）。当您从多个浏览器运行您的移动 web 应用程序时，您将注意到它有多么通用。最后，您可以将您的移动 web 应用程序的快捷键安装在 iPod 和 Android 设备的主屏幕上，从而演示如何部署一个 web 应用程序。

本教程介绍 jQuery Mobile (JQM) 框架，该框架用于编写针对移动行业的主流浏览器的移动 web 应用程序。JQM 用于向一些移动设备（比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等）上运行的基于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目，以及 JQM 与 HTML5 的关系及其对后者的依赖。然后，本教程介绍构建一个 JQM 应用程序的众多方法中的一种，以及 JQM 增强基本 web UI 元素的一些方法。最后，本教程将关注一个简单的销售驱动导向自动化的需求。

针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设备上更轻松地访问您的应用程序。

要跟随本教程，您需要以下组件：

* 文本编辑器 — 可以使用您喜欢的任何文本编辑器。支持语法高亮功能的编辑器更好用。Notepad++ 是一个很好用的开源编辑器。
* JQuery Mobile 链接 — 实际上您无需下载任何内容。必要的文件通过 jQuery's Content Delivery Network (CDN) 提供。
* Web 浏览器— 这个浏览器用于查看 jQuery Mobile 帮助和文档。
* WebKit (Safari) 或 Chrome Browser — 这些浏览器支持在桌面机上进行 jQuery Mobile 开发。
* 移动设备 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有类似功能的移动设备。
* PHP 和 MySQL 托管环境 — 用于应用程序的服务器端。

我在一个 MacBook Pro 上创建本教程的代码样例，通过 VMWare Fusion 运行 Windows® 7。我使用 Notepad++ 编辑文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的 FTP，可以使与基于服务器的 PHP 文件交互变得非常直观。您也可以在 vi 中编辑文件，但谁想这样做呢？为了使用 MySQL 数据库，我使用我的主机帐户可用的 phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行 Android 2.2 的 Nexus One 和一个运行 iOS 4.1 的 iPod Touch。

jQuery Mobile

我们首先检查 JQM 以及如何使用它改进移动 web 应用程序开发体验。尽管 jQuery Core 可以完全安装使用，但 JQM 仍然处于婴儿期，在本文撰写之时还处于 alpha 阶段。我们可以看一看 JQM 项目期望实现的目标。

JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能，跨最流行的智能手机和平板电脑设备工作。与 jQuery 一样，JQM 是一个在 Internet 上直接托管、免费可用的开源代码基础。事实上，当 JQM 致力于统一和优化这个代码基时，jQuery 核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。

与 jQuery 核心库一样，您的开发计算机上不需要安装任何东西；只需将各种 *.js 和 *.css 文件直接包含到您的 web 页面中即可。这样，JQM 的功能就好像被放到了您的指尖，供您随时使用。

清单 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），本教程稍后还将讨论它。注意，现在一个样式表已经直接从 jQuery 的 Content Delivery Network (CDN) 下载下来。CDN 用于分发跨 Internet 分发经常使用的文件，使得下载速度尽可能快。CDN 通常部署在一些大型基础架构上，通过在 Internet 上的一些战略位置放置文件，将这些文件需要传输的路径减小到最小距离。jQuery CDN 和其他类似 CDN 通常托管在一些世界级大型基础架构上，比如 amazon.com 和其他 Internet 巨头提供的基础架构。

除 CSS 文件外，这个头部还包含三个 JavaScript 文件。第一个 JavaScript 文件对缩减形式的 jQuery 核心库的引用，然后是 JQM 库的缩减形式，最后是一个特定于应用程序的 JavaScript 文件 utils.js。缩减意味着代码针对快速下载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小（并依赖缓存！）来大幅提高应用程序性能。

清单 1 中的版本实际上是 jQuery Mobile alpha 发布 1。alpha 发布 2 已经可用，但由于存在一些 bug 行为，本教程依赖该代码的第一个 alpha 发布。您阅读本教程之时，这些 JQM 文件的一个更新版本可能已经可以下载。参见参考资料中 jQuery 的 CDN 链接，获取这些库文件的最新版本。JQM 受到 MIT 和 GPL 许可的双重许可；基本上，这意味着如果您保持这个 jQuery 属性，就能在您的应用程序中使用这些文件。

注意，也可以下载这些 jQuery 文件的一个副本并直接从您自己的 web 服务器托管它们。这种方法不是个坏主意，特别是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持；而不是总是追赶时髦。

JQM 是一个经过触摸优化的框架，用于为基于浏览器的移动 web 应用程序构建统一和理想的用户体验。您所知道的关于编写 web 应用程序的大部分知识仍然适用；但是，使应用程序看起来更统一这个目标是 JQM 方法的真正关键部分。JQM 采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看图 1 中的图像，它们展示了 JQM 样式化表单元素的一个子集。

标准 JQM 表单元素（单选按钮、复选框、滑块和其他选择选项）的屏幕截图

除便于触摸和样式化 UI 元素外，JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。

在传统 web 应用程序构建中，每个屏幕或页面从服务器获取，屏幕的全部内容被替换。这种方法意味着：

1. 往返服务器
2. 下载 HTML
3. 解析 HTML
4. 呈现 HTML，包括应用层叠样式表

JQM 采用另一种方法。jQuery 核心库的标志是开发人员执行 Ajax 调用的便捷性。Ajax 被浏览器的异步 HTTP 请求功能包裹。当取回整个页面成本很高时，通常使用 Ajax 来取回部分页面或执行某种内联引用数据查询。通过截获页面请求并在多数情况下将那些请求转换成特殊的 Ajax 调用，JQM 将 Ajax 提升到下一个水平。这种行为的最终结果是：当访客导航通过 JQM 构建的 web 应用程序时，页面的 DOM 将被操作，而不是每次替换每个页面。为提供这种行为的一些上下文，请查看清单 2 中的 JQM 样板文档。

<!DOCTYPE html>
<html>
<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>
<div  data-role="page">
      <div data-role="header">
         <h1>jQuery Tutorial</h1>
      </div>
      <div data-role="content">
         Page content goes here!
      </div>
      <div data-role="footer">
         Sample code for IBM developerWorks
      </div>
</div>
</body>
</html>

JQM 随时准备使用 HTML5 data-* 属性。注意，清单 2 广泛使用 div 标记和 data-role 属性。在 HTML5 中，任何带有 data- 前缀的属性实际上将被验证解析器忽略，应用程序可以随意解释那些属性。这正是 JQM 所做的；事实上，JQM 特别依赖 data-role 属性来将其核心功能串联到一起。

表 1 展示了清单 2 中的 data-role 属性的 4 个实例。
data-role 属性注释
page 这是一个应用程序的页面的封装 div。一个 HTML 文件可以包含一个或多个页面级 div 元素。
header JQM 页面的页眉。
content 内容 div 中驻留的内容。
footer JQM 页面的页脚。

当 JQM 应用程序从一个页面切换到下一个页面时，发生的主要行为是 content div 被交换出去以获取新页面的内容。除此之外，JQM 还有更多魔力。简言之，JQM 换出一个内容集以获取另一个内容集，并有选择地修改 DOM 的 CSS，以便从当前页面过渡到一个新页面，或者 — 同样重要的是 — 过渡到一个页面堆栈（或哈希）中的前一页。图 2 展示了本教程的样例应用程序的主页，该程序列示多个条目，在一个 iPod 上运行。

带有一列联系人条目的样例应用程序的主屏幕的屏幕截图

应用程序显示一个列表中的条目。当一个条目被选中时，JQM 载入一个新页面，同时向用户显示一个加载对话框，以便用户能了解正在进行的操作，如图 3 所示。

这个应用程序不可能是一个完整的销售力量自动化应用程序；但是，它足以充当开始采用一些 JQM 功能的用例场景，而且，如果运用得当，可能会改善某位路途中的销售员的业绩。而且，如果您的销售团队拥有各种设备，比如 iPhone、Android、BlackBerry Torch 和 WebOS，这个应用程序可以任一和所有设备上运行。下面介绍如何构建这个应用程序。

本文地址 http://www.chengxuyuans.com/web_technology/179.html

帐号		自动登录	找回密码
密码			成为会员

学习如何创建由 jQuery Mobile 驱动的移动 web 应用程序

相关帖子