jQuery Mobile 和 JSON


jQuery Mobile 和 JSON 学习如何创建由 jQuery Mobile 驱动的移动 web 应用程序 Ableson Frank, 企业家, Navitend 简介: 今天,jQuery 驱动着 Internet 上的大量网站,在浏览器中提供动态用户体验,促使传统桌面应用程序逐渐减 少。现在,主要移动平台上的浏览器的功能都赶上了桌面浏览器,因此 jQuery 团队引入了 jQuery Mobile(或 JQM)。JQM 的使命是向所有主要移动浏览器提供一种统一体验,使整个 Internet 上的内容更加丰富 — 不管使用哪 种查看设备。本教程在一个面向销售力量自动化的应用程序背景下介绍 jQuery Mobile 的基本设计概念。您可以创建一 个直观形象的移动 web 应用程序,与一个 Internet 承载的网站进行交互,存储和管理销售机会。 标记本文! 发布日期: 2011 年 4 月 11 日 级别: 中级 访问情况 144 次浏览 建议: 0 (添加评论) 平均分 (共 0 个评分 ) 开始之前 常用缩略词 l Ajax:异步 JavaScript + XML l ASP:活动服务器页 l CSS:层叠样式表 l DOM:文档对象模型 l FTP:文件传输协议 l GPL:GNU 通用公共许可 l HTML:超文本标记语言 l HTTP:超文本传输协议 l MIT:麻省理工学院 l SQL:结构化查询语言 l UI:用户界面 l XML:可扩展标记语言 为了使本教发挥最大作用,您应该熟悉使用 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 应用程 序。 关于本教程 页码,1/31 本教程介绍 jQuery Mobile (JQM) 框架,该框架用于编写针对移动行业的领先浏览器的移动 web 应用程序。JQM 用于 向一些移动设备(比如 iPhone、iPad、Android、WebOS、BlackBerry Version 6 (Torch, Playbook) 等等)上运行的基 于 web 的应用程序提供直观统一的用户体验。本教程首先简要介绍 JQM 项目,以及 JQM 与 HTML5 的关系及其对后 者的依赖。然后,本教程介绍构建一个 JQM 应用程序的众多方法中的一种,以及 JQM 增强基本 web UI 元素的一些 方法。最后,本教程检查一个基本销售力量自动化需求。 针对这个问题,本教程制定一个计划来实现一个针对移动设备用户的解决方案,无需进行本地移动开发。完成后的应用 程序将被演示,这样当您跟随本教程逐步构建自己的应用程序时,就知道本教程将把您带向何处。当您学习使用 JQM 实现这个解决方案时,我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧,以帮助您的用户在他们的移动设 备上更轻松地访问您的应用程序。 回页首 先决条件 要跟随本教程,您需要以下组件: l 文本编辑器 — 可以使用您喜欢的任何文本编辑器。支持语法高亮功能的编辑器更好用。Notepad++ 是一个很 好用的开源编辑器。 l JQuery Mobile 链接 — 实际上您无需下载任何内容。必要的文件通过 jQuery's Content Delivery Network (CDN) 提供。 l Web 浏览器— 这个浏览器用于查看 jQuery Mobile 帮助和文档。 l WebKit (Safari) 或 Chrome Browser — 这些浏览器支持在桌面机上进行 jQuery Mobile 开发。 l 移动设备 — 可以使用 iPod Touch、Android、BlackBerry Torch 或具有类似功能的移动设备。 l 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 — 最新的 jQuery 家族成员 JQM 的目标是在一个统一的 UI 中交付超级 JavaScript 功能,跨最流行的智能手机和平板电脑设备工作。与 jQuery 一 样,JQM 是一个在 Internet 上直接托管、免费可用的开源代码基。事实上,当 JQM 致力于统一和优化这个代码基时, jQuery 核心库受到了极大关注。这种关注充分说明,移动浏览器技术在极短的时间内取得了多么大的发展。 与 jQuery 核心库一样,您的开发计算机上不需要安装任何东西;只需将各种 *.js 和 *.css 文件直接包含到您的 web 页 面中即可。这样,JQM 的功能就好像被放到了您的指尖,供您随时使用。 页码,2/31 清单 1 展示了将 jQuery Mobile 文件添加到应用程序是多么简单! 清单 1. 将 jQuery Mobile 添加到应用程序 清单 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 样式化表单元素的一个子集。 图 1. JQM 表单元素 IBM JQuery Tutorial 页码,3/31 除便于触摸和样式化 UI 元素外,JQM 的真正魔力在于它管理屏幕过渡的方式。我们来看一看。 回页首 扩展 DOM 在传统 web 应用程序构建中,每个屏幕或页面从服务器获取,屏幕的全部内容被替换。这种方法意味着: 1. 往返服务器 2. 下载 HTML 3. 解析 HTML 4. 呈现 HTML,包括应用层叠样式表 JQM 采用另一种方法。jQuery 核心库的标志是开发人员执行 Ajax 调用的便捷性。Ajax 被浏览器的异步 HTTP 请求功 能包裹。当取回整个页面成本很高时,通常使用 Ajax 来取回部分页面或执行某种内联引用数据查询。通过截获页面请 求并在多数情况下将那些请求转换成特殊的 Ajax 调用,JQM 将 Ajax 提升到下一个水平。这种行为的最终结果是:当 访客导航通过 JQM 构建的 web 应用程序时,页面的 DOM 将被操作,而不是每次替换每个页面。为提供这种行为的 一些上下文,请查看 清单 2 中的 JQM 样板文档。 清单 2. jQuery Mobile 页面结构 IBM jQuery Tutorial
页码,4/31 JQM 随时准备使用 HTML5 data-* 属性。注意,清单 2 广泛使用 div 标记和 data-role 属性。在 HTML5 中,任 何带有 data- 前缀的属性实际上将被验证解析器忽略,应用程序可以随意解释那些属性。这正是 JQM 所做的;事实 上,JQM 特别依赖 data-role 属性来将其核心功能串联到一起。 表 1 展示了 清单 2 中的 data-role 属性的 4 个实例。 表 1. 清单 2 中的 data-role 属性的 4 个实例 当 JQM 应用程序从一个页面切换到下一个页面时,发生的主要行为是 content div 被交换出去以获取新页面的内 容。除此之外,JQM 还有更多魔力。简言之,JQM 换出一个内容集以获取另一个内容集,并有选择地修改 DOM 的 CSS,以便从当前页面过渡到一个新页面,或者 — 同样重要的是 — 过渡到一个页面堆栈(或哈希)中的前一页。图 2 展示了本教程的样例应用程序的主页,该程序列示多个条目,在一个 iPod 上运行。 图 2. 应用程序的主屏幕

jQuery Tutorial

Page content goes here!
Sample code for IBM developerWorks
data-role 属性 注释 page 这是一个应用程序的页面的封装 div。一个 HTML 文件可以包含一个或多个页面级 div 元素。 header JQM 页面的页眉。 content 内容 div 中驻留的内容。 footer JQM 页面的页脚。 页码,5/31 应用程序显示一个列表中的条目。当一个条目被选中时,JQM 载入一个新页面,同时向用户显示一个加载对话框,以便 用户能了解正在进行的操作,如 图 3 所示。 图 3. 载入一个新页面 页码,6/31 加载状态图标旋转一会儿,然后,当页面内容被下载或在现有 DOM 中被定位后,JQM 交换处当前可见的内容并显示新 内容,如 图 4 所示,图 4 展示了 JQM 中的一个对话框。 图 4. 添加新数据的 JQM 对话框 页码,7/31 JQM 大量使用主题和颜色样本。注意,图 4 中的对话框的颜色方案(深灰色,黑色背景)不同于 图 3 中的颜色方案 (蓝色和灰色,浅色背景)。建议您查阅关于 jQuery Mobile web 页面上可以找到的主题的文档,参见 参考资料 中的 链接。 当页面更改发生时,您可以选择以下几种过渡方式: l 滑动 l 向上滑动 l 向下滑动 l 弹出 l 淡出 l 翻页 当用户往回导航时,过渡也可以反向进行。我特别喜欢翻页过渡。要选择一种特定过渡方式,这样使用 data-transition 属性:Go to some page。 与 jQuery Core 类似,JQM 也提供绑定一些 JavaScript 事件的能力。下面是一些事件示例: l 设备朝向更改 l 前一页和后一页创建 l 前一页和后一页显示 l 前一页和后一页隐藏 l 敲击 l 敲击并保持 l 滑指 页码,8/31 l 向左滑指 l 向右滑指 要连接这些事件中的一个,可以使用 清单 3 中的代码。 清单 3. 页面显示之前的通知 jQuery 采用美元符号($)— $ 符号之后的就是 jQuery 语法。我们再看一个连接事件的例子。假设当一个列表条目被 滑指时,您想执行一些操作。清单 4 展示了捕获每个单独的列表项上的 swipeleft 事件的 jQuery 代码。 清单 4. 为列表项目指定一些滑指处理程序 这段代码详细说明如下: 1. 迭代每个 li 元素。一个 li 元素是一个排序列表(ol)或一个无序列表(ul)中的一个列表项。 2. 每个项被连接起来以跟踪 swipeleft 事件。 3. 当一个向左滑指事件被捕获后,将调用一个函数来显示一个警报框。 4. 也可以利用 HTML5 data* 属性功能。注意,在这个示例中,您可以通过 attr 方法获取对一个元素的属性 的访问权。这里,您取回与一个名为 data-ibm-jquery-key 的自定义属性关联的数据。 混合数据和 UI 元素的优点还存在争议;但是,将数据直接存储在 UI 元素中的能力以及可以轻松绑定的函数提供了一些 创造性的编码商机。 事实上,这个讨论只触及 jQuery Mobile 中的功能的皮毛,但现在已经足以说明问题了。现在考虑本教程的样例应用程 序背后的动机。 回页首 销售力量自动化(SFA) 尽管大量的 App Stores 中从来都不缺乏娱乐应用程序,但许多业务应用程序都属于销售力量自动化 类别。这些应用程 $('body').bind('pagebeforeshow',function(event,ui) { alert('beforeshow'); }); $('li').each( function (idx) { $(this).bind ( 'swipeleft', function(event,ui) { alert("swipe left" + $(this).attr('data-ibm-jquery-key')); } ); }); 页码,9/31 序的设计目的是帮助管理单个销售人员或销售人员团队的销售行为的过程。无论何种行业,销售成功都归功于一个简单 原则:“赢得继续下一步的权利”。如果您有一个合乎需要的销售流程,那么您最终会赢得订单。 本教程中创建的应用程序瞄准销售流程的前端,这个前端有时称为商机。您在本教程中创建的应用程序允许用户直接从 他或她的移动电话管理新的机遇。什么原因呢?很简单。当商务人士不在办公室、参加会议或参与网络活动时,他们经 常会遇到可能对他们的产品和服务干兴趣的人士。这个应用程序的目标是向用户提供一种简单的方法来采集三个重要信 息片段: l 潜在客户—他们想跟进的潜在客户的姓名 l 联系信息—电话号码或电子邮件地址 l 注释—关于商机的简单说明 例如,下面是一个可能的条目: l 潜在客户:Joe Bloggs l 联系信息:jbloggs@someorganizationabc.com l 注释:Joe 需要身份管理方面的帮助。 简短、美观、达意。当我返回办公室时,就可以向 Joe 发送一封电子邮件,进一步了解他的痛点,或向他提供一些关于 我的公司的产品和服务的信息,这些信息可能会引起需要身份管理帮助的人士的兴趣。 这个应用程序不可能是一个完整的销售力量自动化应用程序;但是,它足以充当开始采用一些 JQM 功能的用例场景, 而且,如果运用得当,可能会改善某位路途中的销售员的业绩。而且,如果您的销售团队拥有各种设备,比如 iPhone、Android、BlackBerry Torch 和 WebOS,这个应用程序可以任一和所有设备上运行。下面介绍如何构建这个应 用程序。 应用程序架构 本节探索本教程的样例应用程序的架构,逐步演示构建过程的每个主要步骤。您可以逐步跟随本教程的操作,自己重建 应用程序;或者,您也可以从 参考资料 下载完整的项目。 应用程序架构 这个应用程序 — 简单地命名为 jQuery tutorial — 跨两个主要平台实现: l 移动代码,利用 JQM l 服务器端代码,在一个 MySQL 数据库中提供数据持久性 所有服务器端交互通过一些 PHP 文件完成,数据在一个 MySQL 数据库中的一个名为 opportunities 的表中进行管理。 数据库结构非常简单,只有 4 个字段(参见 表 2)。 表 2. 数据库结构的 4 个字段 列名 注释 opp_id 一个条目的数值标识符,这个标识符通过数据库自动递增。 opp_person 潜在客户的姓名或名称。 opp_contact 潜在客户的联系信息。 opp_description简短的商机说明。 页码,10/31 图 5 展示了 phpMyAdmin 中的文件的结构。列标题包括 Field、Type、Collation、Attributes、Null、Default、Extra、 Action。(查看图 5 的 大图。) 图 5. 数据库表结构 您可以看到简单的结构和数据库类型。大部分条目是默认值。在一个生产应用程序中,您可能需要仔细考虑您的数据词 典。 要启动应用程序,我使用 phpMyAdmin 的插入特性向数据库插入一些数据。图 6 显示了与本教程中显示的设备屏幕图 像相关的数据的屏幕快照。列标题包括 opp_id、opp_person、opp_contact、opp_description。(查看图 6 的 大 图。) 图 6. 一些初始数据记录 测试应用程序时,跳转到直接浏览下表是一个有用的健康检查。表 3 显示了应用程序使用的源文件清单。 表 3. 必要的应用程序源文件 文件 注释 header.php 包括 HTML 文档的头部分,包含必要的脚本标记来包含 JQM 文件。这个文件的内容在前面的 清单 1 中已 显示。 包括任何 HTML 页脚信息。对于许多应用程序而言,这个信息包含 Google Analytics JavaScript glue 以帮 页码,11/31 了解这些文件如何协同工作的最好方法是逐步检查每个文件,这是我们下面将介绍的内容。 回页首 构建应用程序 大多数应用程序的关键是创建正确的数据模型。如上节所述,这个应用程序的数据模型非常直观。在代码详解中,可以 从 清单 5 中的数据库定义开始。 清单 5. opportunities SQL 脚本 如果您想通过包含额外的字段来修改应用程序,可以通过两种方法将它们添加到数据库:一是通过 phpMyAdmin 这样 的工具手动添加,如前面的 图 5 所示;二是通过扩展 SQL 脚本。数据库表就绪后,下一步是连接到数据库。可以通 过一些 mysql 函数连接到数据库,如 清单 6 中的 db.php 所示。 清单 6. db.php 显然,您需要使用您自己的环境的数据库名、用户名和密码。如果您不能访问支持 MySQL 和 PHP 的主机帐户但想跟 随本教程操作,则现在是配置您的环境的好时机。参见 参考资料 了解一些可用选项。 数据库就绪后,下一步是切换到一个自上而下的方法,这需要查看这个应用程序的主源文件 index.php,如 清单 7 所 示。 footer.php 助收集关于应用程序的统计数据。 index.php 应用程序用户界面的主页,充当部件控制器、来自一个类 MVC 范式的部件视图、或一个松散配置的 MVC 设计中的控制器的部件。 utils.php 这个文件用于放置所有数据访问例程。 db.php 这个文件用于存储数据库凭证。 utils.js 这个文件用于存储几个表单级验证脚本。 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 ; 页码,12/31 清单 7. 主 UI 源文件 这个 PHP 文件是服务器上的所有交互的入口点。根据一个名为 action 的参数的存在性和值,脚本执行不同的功能。 在深入具体操作之前,请注意这个文档中的 jQuery Mobile 结构,该结构包含多个 div 元素,每个元素都带有相应 data-role,用于页面、页眉、内容和页脚。 这个应用程序架构相当简单 — 页面每次加载时,其内容都将被 content div 中新生成的内容替代。在某种程度上,这 可能带有欺骗性并返回一些旧的 web 应用程序习惯。也许是这样,但本教程的目标是在一个有用的真实世界场景中演

JQuery Tutorial

Sample code for IBM developerWorks
页码,13/31 示 JQM 的一些基本功能,因此,保持这个简单结构有助于实现所有目标。 要理解发生了什么事,我们从上到下仔细查看一下 index.php。 1. db.php 文件被包含进来 — 这个文件向您提供数据库访问权。 2. utils.php 文件被包含进来 — 这个文件提供所有特定于这个应用程序的数据管理功能。 3. header.php 文件被包含进来 — 这个文件包含 jQuery Core 和 jQuery Mobile JavaScript 文件、jQuery Mobile CSS 文件以及一个特定于应用程序的 JavaScript 文件:utils.js。 4. JQM div 元素被定义,页眉包含一个 h1 标记和一个伴随标题文本。 5. 通过从 $_REQUEST 内置数组提取建立 $action 变量。$_REQUEST 变量 coalesces $_GET 和 $_POST 数 据,简化发送到这个页面的各种请求的处理过程。 6. 使用以下选项评估 $action 变量,每个选项都调用 utils.php 中的一个或多个函数: a. addnew — 显示一个空表单以添加一个新条目。当您正在参加商贸展或会见一位新的潜在客户时,这 个特性可能正是您需要的。 b. upsert — 如果记录是新的,您可能想将它插入表中。如果记录已经存在,您需要更新它的列。如果 id 字段的值等于 -1,说明您有一条全新的记录,必须执行插入操作。其他值代表一条有效记录、商 机或标识符。 c. delete — 用户已请求删除这条记录。 d. details — 用户已经选择一个条目,想查看这个商机的细节。 e. 如果 $action 变量为空,则表示只显示一列商机。这是页面首次加载时的默认行为。 7. 页面最后包含 footer.php。在这个应用程序中,页脚包含一些 Google 分析代码,以便跟踪应用程序的使用情 况。 理解这个页面后,下一步是检查 utils.php 中包含的功能。特别是,您需要查看 showOpps 函数,该函数为用户界面生 成一个商机列表,并引入一个新的 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("Add New Opportunity

"); print(""); } } 页码,15/31 当用户输入一个词组时,将检查列表中的每个条目,查看是否存在该词组;如果不存在,将从列表中删除该条 目,只留下匹配的条目。在 图 8 中,单词 “Lego” 只存在于一个条目中。 一个有趣的边注:图 8 中的图像 来自我的 MacBook 上运行的 WebKit (Safari)。Safari 和 Chrome 都是测试以移动为目标的 web 应用程序的 桌面浏览器的不错选择。 3. 当用户选择链接中的一个条目时,他们实际上是使用一个 data-rel 值 dialog 和一个 data- transition 值 pop 激活一个定位。结果是 图 9(同样来自桌面机)中的一个对话框视图中的一个特定条目 的关联细节。这个条目显示 Person、Contact info 和 Comments 字段以及 Save Opportunity 按钮。 图 9. 一条商机记录的细节 注意,不管这个屏幕图像来自那个设备,它都有相似的观感。这个教程在 Android 设备、iPod 和 Safari (WebKit nightly build)上都能很好地运行。可以看出,jQuery Mobile 的一些设计目标取得了成果。 4. 这个代码清单中最后需要注意的项目是使用列表项列示的属性。在本例中,每个列表项都包含一个名为 data-ibm-jquery-contact 的自定义属性,该属性的值来自数据库中的 opp_contact 字段。这个项目存在 的目的为了将来实现以下功能:添加当用户在列表中的一个条目上执行 “敲击并保持(taphold)” 操作时致 电或发送电子邮件的能力。 当一条现有商机记录在对话框中显示(如 图 9 所示)之后,用户可以选择几个选项。这个页面的代码在 utils.php 中的 showOneOpp 函数中提供,如 清单 9 所示: 页码,16/31 清单 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("Delete this entry"); } print("
"); print(""); print(""); print("
"); print("
"); print(""); print(""); print("
"); print("
"); print(""); print(""); print("
"); print("
"); print(""); 页码,17/31 这个 showOneOpp 代码是填充您在其中编写所有表单元素的屏幕的一种强力方法。这个屏幕上的一些需要注意的项目 包括: 1. 如果 $id 等于 -1,那么您将准备这个屏幕以添加一条新的商机记录;否则,您将载入现有商机记录并初始化 一些页级变量:$person、$contact 和 $description。 2. 如果您拥有一条现有记录,那么您将显示一个链接,允许用于删除该商机。 3. 每个字段周围的 data-role="fieldcontain" 帮助 JQM 显示这些字段:将标签和相关输入 HTML 元素 组合在一起,通过细线分隔。 4. 当用户填充这些字段并选择 Save Opportunity 按钮时,那些字段将受到检查,以确保所有字段都已填充,如 果已填充,则保存字段。图 10 显示了警告用户填充所有字段的警报。 图 10. 表单级验证 5. 屏幕上的另一个选项是删除一个现有条目。如果选择该选项,另一个 JavaScript 函数将提示用户确认是否的 确要移除选中的商机记录,如 图 11 所示。 图 11. 确认删除一条商机记录 print(""); print("
"); print("
"); print(""); print("\n"); } 页码,18/31 选择删除提示处的 OK 将使用一个动作 delete 将应用程序发送回 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) { 页码,19/31 这些函数是非常直观的 JavaScript,通过一些 jQuery 选择器辅助。 您已经看到了这个应用程序的大部分功能。现在看看 utils.php 中实现的另外几个函数,如 清单 11 所示。 清单 11. 更多数据管理例程 alert(e); return false; } return true; } 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"; 页码,20/31 可以看到,这些例程实现一些直观的 PHP/MySQL 数据访问功能:插入、更新和删除商机记录。 尽管使用 jQuery Mobile 构建的本教程样例应用程序的代码到此结束,但这应该被视为一个起点,而不是一个终点,因 为还有更多 jQuery Mobile 知识等待您去探索。JQM 项目计划在 2011 年初推出其 1.0 发布。随着时间推移,希望它能 集成到 PhoneGap 这样的框架中,甚至可能集成到 Appcelerator 的 Titanium 这样的替代开发环境中。 最后,本教程检查这个新创建的、由 JQM 驱动的 web 应用程序的安装快捷键。 回页首 安装应用程序 这个应用程序不是原生应用程序,因此不能从传统 App Store 下载,但是,您可以在您的设备的主屏幕上为它创建一个 快捷键。图 12 展示如何在一个 iPod 设备上创建一个快捷键。 图 12. 选择您的屏幕底部的加号(+) iPod 平台允许添加新书签、向主屏幕添加链接、或将链接电邮给朋友。选择 Add to Home Screen 选项。然后,命名 $result = mysql_query($sql,$mysql_link); } 页码,21/31 链接,如 图 13 所示。 图 13. 选择 Add to Home Screen 您提供快捷键名称后,快捷键将出现在您的主屏幕中,正好在您的 “最喜爱的游戏” 旁边,如 图 14 所示。 图 14. iPod 平台的主屏幕上的快捷键 页码,22/31 在 Android 平台上添加快捷键需要更多步骤,首先需要创建一个新书签,如 图 15 所示。 图 15. 在 Android 平台上创建一个新书签 页码,23/31 选中书签,给它提供一个名称,如 图 16 所示。 图 16. 可用书签 页码,24/31 现在您的书签拥有了一个名称,可供后续使用。 下一步是转到主屏幕,按住屏幕上的一个空白区域。这时会出现一个选项,允许向主屏幕添加项目。选择 Shortcuts 选 项,如 图 17 所示。 图 17. 添加一个快捷键 页码,25/31 然后,选择 Bookmark 以查看现有书签,如 图 18 所示。 图 18. 选择查看现有书签 页码,26/31 然后,您将看到一些可用书签。选择您新创建的 jQuery Mobile 应用程序对应的适当条目,如 图 19 所示。 图 19. 选择您的 web 应用程序 页码,27/31 最后,您的快捷键现在应该出现在桌面上,如 图 20 所示。 图 20. Android 主屏幕上的快捷键 页码,28/31 结束语 本教程到此结束。如果您跟随本教程的操作,您应该已经了解 jQuery Mobile 的基本结构及其与 jQuery Core 项目的关 系。您创建了一个销售商机跟踪应用程序,该程序拥有跨平台兼容性,能在多种设备上运行。而且,您能将该应用程序 安装到您最喜欢的智能手机的主屏幕上。 下载 参考资料 学习 l 您可以参阅本文在 developerWorks 全球网站上的 英文原文。 l jQuery Mobile访问一个构建于坚实的 jQuery 和 jQuery UI 基础上的、跨所有流行移动设备平台的统一用户界 面系统的主页。 l jQuery Mobile:演示和文档:访问这个面向智能手机和平板电脑的、经过触摸优化的 web 框架的文章、APIs 和演示代码。 l jQuery.org:访问 jQuery 开源团队的主页。 l 在 Android 上使用 XML(Michael Galpin,developerWorks,2009 年 6 月):了解在 Android 上使用 XML 描述 名字 大小 下载方法 教程源代码 jquery.tutorial.source.zip 3KB HTTP 页码,29/31 的不同选项以及如何使用它们构建自己的 Android 应用程序。 l Android in Action, 2nd edition(W. Frank Ableson、Robi Sen 和 Chris King,Manning Publications,2011 年 1 月):通过一些精心设计的示例展示 Android 开发的所有方面,包括重要的架构概念和实现策略。 l Mobile Design and Development(Brian Fling,O'Reilly Media,2009 年 8 月):探索构建移动产品的实用原 则、标准、技术和最佳实践。 l Android SDK 文档:了解 Android APIs 的细节。 l The Open Handset Alliance:了解 Android 的发起人 — 80 家技术和移动公司,这些公司联合起来,共同推 动创新并改善移动体验。 l Android 开发简介(Frank Ableson,developerWorks,2009 年 5 月):在这个 Android 平台中开始开发 Android 应用程序,学习如何编写一个基本 Android 应用程序。 l 本文作者撰写的更多文章(Frank Ableson,developerWorks,2002 年 4 月至今):阅读关于 Android、 XML、Eclipse、GPS、BlackBerry 应用程序和其他技术的文章。 l developerWorks XML 专区:在 XML 专区获取提高您的专业技能所需的资源。 l 访问 developerWorks 开源专区,获得丰富的 how-to 信息、工具和项目更新,帮助您用开放源码技术进行开 发,并与 IBM 产品结合使用,以及我们 最受欢迎的文章和教程。 l IBM developerWorks Industries:访问这个站点,获取针对开发人员的所有特定于行业的最新技术资源。 l developerWorks 中文社区:个性化您的 developerWorks 体验。 l IBM XML 认证:了解如何才能成为一名 IBM 认证的 XML 和相关技术的开发人员。 l XML 技术库:访问 developerWorks XML 专区,获得广泛的技术文章和技巧、教程、标准和 IBM 红皮书,并 阅读关于 XML 技巧 的更多信息。 l developerWorks 技术活动 和 网络广播:随时关注这些活动中的技术。 l developerWorks 播客:收听面向软件开发人员的有趣访谈和讨论。 l developerWorks 演示中心:观看面向初学者的产品安装和设置演示,以及为经验丰富的开发人员提供的高级功 能。 获得产品和技术 l jQuery Mobile CDN:通过获取经过缩减和压缩的 jQuery Mobile 版本快速获取 jQuery Mobile。 l MAMP: Mac - Apache - MySQL - PHP:获取和安装一个基于 Mac 的 Apache、MySQL & PHP 本地服务器环 境。 l XAMPP:获取一个面向 Linux®、Solaris、Windows 和 Mac OS X 的、非常易于安装的 Apache 页码,30/31 Distribution。这个安装包包含 Apache web 服务器、MySQL、PHP、Perl、一个 FTP 服务器和 phpMyAdmin。 l 官方 Android 开发人员网站:下载 Android SDK,访问 API 参考资料,了解 Android 最新新闻。1.5 版或更 高版本适用本教程。本教程使用 Android SDK 版本 8,它支持标记为 2.2 的 Android 发布(Froyo)。 l Android Open Source Project:获取 Android 的源代码,Android 是一个用于移动设备的开源软件栈。 l Notepad ++:试用一个免费源代码编辑器,它是 Notepad 的替代品,支持多种语言。它在 Microsoft® Windows 环境中运行,在 GPL License 许可下使用。 l IBM 产品评估试用版软件:下载或 在线试用 IBM SOA Sandbox,并开始使用来自 DB2®、Lotus®、 Rational® 、Tivoli® 和 WebSphere® 的应用程序开发工具和中间件产品。 讨论 l jQuery Mobile 论坛:找到您的所有 jQuery Mobile 问题的答案。 l XML 专区讨论论坛:参与任何一个 XML 相关讨论。 l 加入 developerWorks 中文社区。查看开发人员推动的博客、论坛、组和 wikis,并与其他 developerWorks 用 户交流。 页码,31/31
还剩30页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 6 金币 [ 分享pdf获得金币 ] 3 人已下载

下载pdf

pdf贡献者

kingrom

贡献于2013-07-28

下载需要 6 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf