你的分享就是我们的动力 ---﹥

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

时间:2011-06-28 09:57来源:www.chengxuyuans.com 点击:

开始之前

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


载入一个新页面的屏幕截图

加载状态图标旋转一会儿,然后,当页面内容被下载或在现有 DOM 中被定位后,JQM 交换处当前可见的内容并显示新内容,如 图 4 所示,图 4 展示了 JQM 中的一个对话框。


添加新数据的 JQM 对话框的屏幕截图(显示 Person、Conatct info 和 Comments 字段)

JQM 大量使用主题和颜色样本。注意,图 4 中的对话框的颜色方案(深灰色,黑色背景)不同于 图 3 中的颜色方案(蓝色和灰色,浅色背景)。建议您查阅关于 jQuery Mobile web 页面上可以找到的主题的文档,参见 参考资料 中的链接。

当页面更改发生时,您可以选择以下几种过渡方式:

  • 滑动
  • 向上滑动
  • 向下滑动
  • 弹出
  • 淡出
  • 翻页

当用户往回导航时,过渡也可以反向进行。我特别喜欢翻页过渡。要选择一种特定过渡方式,这样使用 data-transition 属性:<a href="somepage.html" data-transition="flip">Go to some page</a>

与 jQuery Core 类似,JQM 也提供绑定一些 JavaScript 事件的能力。下面是一些事件示例:

  • 设备朝向更改
  • 前一页和后一页创建
  • 前一页和后一页显示
  • 前一页和后一页隐藏
  • 敲击
  • 敲击并保持
  • 滑指
  • 向左滑指
  • 向右滑指

要连接这些事件中的一个,可以使用 清单 3 中的代码。

 

					
$('body').bind('pagebeforeshow',function(event,ui) {
    alert('beforeshow');
});

jQuery 采用美元符号($)— $ 符号之后的就是 jQuery 语法。我们再看一个连接事件的例子。假设当一个列表条目被滑指时,您想执行一些操作。清单 4 展示了捕获每个单独的列表项上的 swipeleft 事件的 jQuery 代码。

 

					
$('li').each( 
    function (idx) {
        $(this).bind (
            'swipeleft',
            function(event,ui) {
                alert("swipe left" + $(this).attr('data-ibm-jquery-key'));
            }
        );        
    });

这段代码详细说明如下:

  1. 迭代每个 li 元素。一个 li 元素是一个排序列表(ol)或一个无序列表(ul)中的一个列表项。
  2. 每个项被连接起来以跟踪 swipeleft 事件。
  3. 当一个向左滑指事件被捕获后,将调用一个函数来显示一个警报框。
  4. 也可以利用 HTML5 data* 属性功能。注意,在这个示例中,您可以通过 attr 方法获取对一个元素的属性的访问权。这里,您取回与一个名为 data-ibm-jquery-key 的自定义属性关联的数据。

混合数据和 UI 元素的优点还存在争议;但是,将数据直接存储在 UI 元素中的能力以及可以轻松绑定的函数提供了一些创造性的编码商机。

事实上,这个讨论只触及 jQuery Mobile 中的功能的皮毛,但现在已经足以说明问题了。现在考虑本教程的样例应用程序背后的动机。


尽管大量的 App Stores 中从来都不缺乏娱乐应用程序,但许多业务应用程序都属于销售力量自动化 类别。这些应用程序的设计目的是帮助管理单个销售人员或销售人员团队的销售行为的过程。无论何种行业,销售成功都归功于一个简单原则:“赢得继续下一步的权利”。如果您有一个合乎需要的销售流程,那么您最终会赢得订单。

本教程中创建的应用程序瞄准销售流程的前端,这个前端有时称为商机。您在本教程中创建的应用程序允许用 户直接从他或她的移动电话管理新的机遇。什么原因呢?很简单。当商务人士不在办公室、参加会议或参与网络活动时,他们经常会遇到可能对他们的产品和服务干 兴趣的人士。这个应用程序的目标是向用户提供一种简单的方法来采集三个重要信息片段:

  • 潜在客户—他们想跟进的潜在客户的姓名
  • 联系信息—电话号码或电子邮件地址
  • 注释—关于商机的简单说明

例如,下面是一个可能的条目:

  • 潜在客户:Joe Bloggs
  • 联系信息:jbloggs@someorganizationabc.com
  • 注释:Joe 需要身份管理方面的帮助。

简短、美观、达意。当我返回办公室时,就可以向 Joe 发送一封电子邮件,进一步了解他的痛点,或向他提供一些关于我的公司的产品和服务的信息,这些信息可能会引起需要身份管理帮助的人士的兴趣。

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

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