搜索
jQueryMobile和JSON学习如何创建由jQueryMobile驱动的移动web应用程序AblesonFrank,企业家,Navitend简介：今天，jQuery驱动着Internet上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序逐渐减少。现在，主要移动平台上的浏览器的功能都赶上了桌面浏览器，因此jQuery团队引入了jQueryMobile（或JQM）。JQM的使命是向所有主要移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富—不管使用哪种查看设备。本教程在一个面向销售力量自动化的应用程序背景下介绍jQueryMobile的基本设计概念。您可以创建一个直观形象的移动web应用程序，与一个Internet承载的网站进行交互，存储和管理销售机会。标记本文！发布日期：2011年4月11日级别：中级访问情况144次浏览建议：0(添加评论)平均分（共0个评分）开始之前常用缩略词lAjax：异步JavaScript+XMLlASP：活动服务器页lCSS：层叠样式表lDOM：文档对象模型lFTP：文件传输协议lGPL：GNU通用公共许可lHTML：超文本标记语言lHTTP：超文本传输协议lMIT：麻省理工学院lSQL：结构化查询语言lUI：用户界面lXML：可扩展标记语言为了使本教发挥最大作用，您应该熟悉使用HTML、JavaScript和CSS构建web应用程序。另外，这个移动web应用程序附带的服务器端代码是用PHP和MySQL编写的。熟悉服务器端编程也有助于您跟随本教程的操作。如果您熟悉其他服务器端平台，比如ASPClassic、ASP.Net或Java™ServerPages，那么您可能会发现，服务器端代码很容易理解。熟悉jQuery并不是必须的，当然，熟悉它不会有坏处。事实上，本教程的目标读者是致力于探索新框架的移动程序员，而不是启动到移动空间中的jQuery专业人员。学习完本教程后，您将了解如何构建一个基本jQueryMobile应用程序和如何在移动浏览器和后端服务器之间管理数据。这个应用程序演示如何在销售相关数据上执行基本记录操作（比如insert、update、delete）。当您从多个浏览器运行您的移动web应用程序时，您将注意到它有多么通用。最后，您将您的移动web应用程序的快捷键安装到iPod和Android设备的主屏幕上，展示如何部署web应用程序。关于本教程页码，1/31本教程介绍jQueryMobile(JQM)框架，该框架用于编写针对移动行业的领先浏览器的移动web应用程序。JQM用于向一些移动设备（比如iPhone、iPad、Android、WebOS、BlackBerryVersion6(Torch,Playbook)等等）上运行的基于web的应用程序提供直观统一的用户体验。本教程首先简要介绍JQM项目，以及JQM与HTML5的关系及其对后者的依赖。然后，本教程介绍构建一个JQM应用程序的众多方法中的一种，以及JQM增强基本webUI元素的一些方法。最后，本教程检查一个基本销售力量自动化需求。针对这个问题，本教程制定一个计划来实现一个针对移动设备用户的解决方案，无需进行本地移动开发。完成后的应用程序将被演示，这样当您跟随本教程逐步构建自己的应用程序时，就知道本教程将把您带向何处。当您学习使用JQM实现这个解决方案时，我们将逐一检查源文件中的函数。本教程最后将介绍几个技巧，以帮助您的用户在他们的移动设备上更轻松地访问您的应用程序。回页首先决条件要跟随本教程，您需要以下组件：l文本编辑器—可以使用您喜欢的任何文本编辑器。支持语法高亮功能的编辑器更好用。Notepad++是一个很好用的开源编辑器。lJQueryMobile链接—实际上您无需下载任何内容。必要的文件通过jQuery'sContentDeliveryNetwork(CDN)提供。lWeb浏览器—这个浏览器用于查看jQueryMobile帮助和文档。lWebKit(Safari)或ChromeBrowser—这些浏览器支持在桌面机上进行jQueryMobile开发。l移动设备—可以使用iPodTouch、Android、BlackBerryTorch或具有类似功能的移动设备。lPHP和MySQL托管环境—用于应用程序的服务器端。我在一个MacBookPro上创建本教程的代码样例，通过VMWareFusion运行Windows®7。我使用Notepad++编辑文件，因为它不仅拥有不错的语法高亮显示功能，还有安全的FTP，可以使与基于服务器的PHP文件交互变得非常直观。您也可以在vi中编辑文件，但谁想这样做呢？为了使用MySQL数据库，我使用我的主机帐户可用的phpMyAdmin。为了在一个物理设备上进行测试，我使用一个运行Android2.2的NexusOne和一个运行iOS4.1的iPodTouch。请参见参考资料获取帮助链接；下载样例应用程序的源代码。jQueryMobile我们首先检查JQM以及如何使用它改进移动web应用程序开发体验。尽管jQueryCore有一个大型已安装基，JQM仍然处于婴儿期，在本文撰写之时还处于alpha模式。我们看看JQM项目希望实现的目标。JQM—最新的jQuery家族成员JQM的目标是在一个统一的UI中交付超级JavaScript功能，跨最流行的智能手机和平板电脑设备工作。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码基。事实上，当JQM致力于统一和优化这个代码基时，jQuery核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了多么大的发展。与jQuery核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js和*.css文件直接包含到您的web页面中即可。这样，JQM的功能就好像被放到了您的指尖，供您随时使用。页码，2/31清单1展示了将jQueryMobile文件添加到应用程序是多么简单！清单1.将jQueryMobile添加到应用程序清单1中的代码实际上是本教程的样例代码中的一个潜在高峰（sneakpeak），本教程稍后还将讨论它。注意，现在一个样式表已经直接从jQuery的ContentDeliveryNetwork(CDN)下载下来。CDN用于分发跨Internet分发经常使用的文件，使得下载速度尽可能快。CDN通常部署在一些大型基础架构上，通过在Internet上的一些战略位置放置文件，将这些文件需要传输的路径减小到最小距离。jQueryCDN和其他类似CDN通常托管在一些世界级大型基础架构上，比如amazon.com和其他Internet巨头提供的基础架构。除CSS文件外，这个头部还包含三个JavaScript文件。第一个JavaScript文件对缩减形式的jQuery核心库的引用，然后是JQM库的缩减形式，最后是一个特定于应用程序的JavaScript文件utils.js。缩减意味着代码针对快速下载和解析进行过优化。记住，每个应用程序页面都需要下载这些文件，因此，应使它们的大小绝对最小（并依赖缓存！）来大幅提高应用程序性能。清单1中的版本实际上是jQueryMobilealpha发布1。alpha发布2已经可用，但由于存在一些bug行为，本教程依赖该代码的第一个alpha发布。您阅读本教程之时，这些JQM文件的一个更新版本可能已经可以下载。参见参考资料中jQuery的CDN链接，获取这些库文件的最新版本。JQM受到MIT和GPL许可的双重许可；基本上，这意味着如果您保持这个jQuery属性，就能在您的应用程序中使用这些文件。注意，也可以下载这些jQuery文件的一个副本并直接从您自己的web服务器托管它们。这种方法不是个坏主意，特别是当您正在发布一个依赖这个框架的商业应用程序时。这些框架可能会而且的确会发生更改，有时会损害依赖特定行为的应用程序。商业企业通常对可预测的行为更感兴趣，因为这种行为更容易支持；而不是总是追赶时髦。回页首面向触摸JQM是一个经过触摸优化的框架，用于为基于浏览器的移动web应用程序构建统一和理想的用户体验。您所知道的关于编写web应用程序的大部分知识仍然适用；但是，使应用程序看起来更统一这个目标是JQM方法的真正关键部分。JQM采用一种特殊方式样式化标准表单元素，使其在视觉上更美观并更容易操作。请您仔细查看图1中的图像，它们展示了JQM样式化表单元素的一个子集。图1.JQM表单元素headtitleIBMJQueryTutorial/titlelinkrel=stylesheethref====页码，3/31除便于触摸和样式化UI元素外，JQM的真正魔力在于它管理屏幕过渡的方式。我们来看一看。回页首扩展DOM在传统web应用程序构建中，每个屏幕或页面从服务器获取，屏幕的全部内容被替换。这种方法意味着：1.往返服务器2.下载HTML3.解析HTML4.呈现HTML，包括应用层叠样式表JQM采用另一种方法。jQuery核心库的标志是开发人员执行Ajax调用的便捷性。Ajax被浏览器的异步HTTP请求功能包裹。当取回整个页面成本很高时，通常使用Ajax来取回部分页面或执行某种内联引用数据查询。通过截获页面请求并在多数情况下将那些请求转换成特殊的Ajax调用，JQM将Ajax提升到下一个水平。这种行为的最终结果是：当访客导航通过JQM构建的web应用程序时，页面的DOM将被操作，而不是每次替换每个页面。为提供这种行为的一些上下文，请查看清单2中的JQM样板文档。清单2.jQueryMobile页面结构!DOCTYPEhtmlhtmlheadtitleIBMjQueryTutorial/titlelinkrel=stylesheethref=====page页码，4/31JQM随时准备使用HTML5data-*属性。注意，清单2广泛使用div标记和data-role属性。在HTML5中，任何带有data-前缀的属性实际上将被验证解析器忽略，应用程序可以随意解释那些属性。这正是JQM所做的；事实上，JQM特别依赖data-role属性来将其核心功能串联到一起。表1展示了清单2中的data-role属性的4个实例。表1.清单2中的data-role属性的4个实例当JQM应用程序从一个页面切换到下一个页面时，发生的主要行为是contentdiv被交换出去以获取新页面的内容。除此之外，JQM还有更多魔力。简言之，JQM换出一个内容集以获取另一个内容集，并有选择地修改DOM的CSS，以便从当前页面过渡到一个新页面，或者—同样重要的