最新版的移动 Web 开发框架 Dojo Mobile 1.7，是 Dojo Toolkit 的一个扩展。本文将使您了解如何从主干网址下载 Dojo 1.7，以及如何在您的应用程序中使用 Dojo Mobile。您还将探索它提供的各种小部件和组件，学习如何使用 PhoneGap 将 Web 应用程序包装在原生应用程序中。
@H_404_3@简介
移动 Web 使用量正呈指数型增长。随着更多的人习惯于使用智能手机或其他移动设备浏览 Web，针对那些为了实现移动版本而进行优化的网站和 Web 应用程序的需求在增加。由于平台数量越来越多（iOS、Android、Blackberry OS、webOS、Windows Phone、Symbian、Bada 等），很难开发针对多个移动操作系统的原生应用程序。
因此，人们迫切需要开发移动 Web 应用程序的工具包。几个主要的 JavaScript 框架（Dojo、jQuery 和 Sencha）很快提供了完全感知触摸屏的框架。通过与 PhoneGap 等原生编译工具包相结合使用，这些框架可以为原生开发提供出色的替代方法。Web 开发人员可以使用他们已熟悉的语言和框架构建原生应用程序，然后相对容易地将这些应用程序部署到许多平台上。
在本文中，我们将了解 Dojo Mobile，它是 Dojo Toolkit 的扩展。我们会先研究移动 Web 与原生应用程序之间的区别，然后通过示例了解如何在应用程序中包含和使用 Dojo Mobile 小部件。还要了解如何使用 PhoneGap 构建原生应用程序。您可以 下载 本文中使用的源代码。
@H_404_3@移动 Web 与原生应用程序
关于使用原生平台还是使用 Web 平台开发移动应用程序的争论可能会持续很长一段时间。这两种方法各有优缺点。在许多情况下，应该根据应用程序需求和个人偏好来选择。
为什么要编写原生应用程序而不是使用移动 Web ？表 1 总结了编写原生应用程序的一些优点和缺点。
| 优点 | 缺点 |
|---|---|
|
|
表 2 总结了移动 Web 应用程序的优点和缺点。
| 优点 | 缺点 |
|---|---|
|
|
幸运的是，有一个折中方法可以同时提供移动 Web 和原生方式的优势。可以使用 PhoneGap 等平台将移动 Web 应用程序包装在原生包装器中，这提供了 JavaScript API，使您能够访问原生设备 API。还可以将 Web 应用程序作为原生应用程序部署到各个应用程序商店。有关的详细信息，请参阅 用 PhoneGap 进行原生部署。
@H_404_3@Dojo Mobile 概述
Dojo Mobile 是 Dojo Toolkit 的扩展，它提供了一系列在移动设备（比如智能手机或平板电脑）上使用而优化的小部件或组件。这些组件基于相应的原生组件，为熟悉智能手机应用程序的用户提 供了熟悉的界面。可以使用主题定制这些组件，例如可以向 iOS 用户而不是 Android 用户提供不同的样式集。
Dojo Mobile 的使用方式与 Dijit 组件库类似。要想在应用程序中使用某种小部件，首先需要在应用程序的主 JavaScript 块中使用dojo.require加载相关的类。然后可以在应用程序中添加这种小部件，既可以使用带dojoType属性的常规 HTML 标记以声明的方式添加小部件，也可以使用 JavaScript 代码通过程序添加小部件。
Dojo Mobile 在 iOS、Android 和 BlackBerry OS 6 设备上表现很好，这主要是因为在这些平台上有 WebKit 浏览器。这一优势在提供了比较完善的 WebKit 浏览器的其他平台（比如 HP webOS 及其他设备）上也能发挥很好的效果。在非 WebKit 浏览器上，Dojo Mobile 应用程序会优雅地使用替代方法，它们甚至可以在老式的桌面浏览器中运行（包括 Microsoft® Internet Explorer）。在默认情况下，只提供了 CSS3 样式，但是，只需使用一行代码，就可以为非 WebKit 浏览器添加兼容性模块：
Dojo Mobile 的关键特性包括：由于使用 Dojo Mobile 解析器，实现了小部件的轻量加载。
CSS3 动画和渐变，可以在高端 iOS 和 Android 设备上产生与原生应用程序相似的体验。
包含提供 iOS、Android 和 BlackBerry 外观的主题。
能够与非 CSS3 兼容的设备和浏览器进行兼容。
完全声明式的语法，便于学习。
一个庞大的 UI 小部件和组件套件，提供了针对移动友好的界面的丰富内容
下一节通过构建 “Hello,World” 应用程序解释如何开始使用 Dojo Mobile。
@H_404_3@Dojo Mobile 1.7 入门在编写本文时，Dojo 的最新的稳定版本是 1.6.1。要立即开始使用 Dojo Mobile 1.7，则需要从一个 Subversion 存储库中下载 Dojo Toolkit 最新的版本。svn 命令行工具通常已预先安装在 Mac OS X 和 Linux® 操作系统上。如果使用 Windows®，那么您可能需要先下载和安装这些工具。有关的更多信息，请访问 Subversion 站点。
假设您已经安装了 Subversion，并且正在使用基于命令行的工具，那么您可使用以下命令迁出最新的 Dojo 版本。该命令会下载完整的 Dojo Toolkit 源代码，所以预计会花一段时间。
当完成迁出后，您将在一个名为 dojo-toolkit-readonly 的新目录中拥有 Dojo Toolkit 的完整源代码。将此目录复制或移动到您 Web 服务器上的一个位置，以便您能够在 HTML 文档中使用它。将它重命名为更短的名称，比如 dojo-toolkit，然后就可以开始使用 Dojo 了。
如果愿意的话，可以仅下载您想要的 Dojo Toolkit 部分。一些人发现首先下载完整版本，然后丢弃不需要的部分更容易一些。Dojo 的源代码没有压缩且比较大，所以不建议在生产应用程序中使用它。
清单 1 给出了 Dojo 应用程序的基本结构。Dojo Mobile 1.7 中新增了deviceTheme类，它将自动确定要为您使用的设备加载的准确主题。您无需检测用户的浏览器并提供相关的 CSS 文件。
当完成迁出后，您将在一个名为 dojo-toolkit-readonly 的新目录中拥有 Dojo Toolkit 的完整源代码。将此目录复制或移动到您 Web 服务器上的一个位置，以便您能够在 HTML 文档中使用它。将它重命名为更短的名称，比如 dojo-toolkit，然后就可以开始使用 Dojo 了。 如果愿意的话，可以仅下载您想要的 Dojo Toolkit 部分。一些人发现首先下载完整版本，然后丢弃不需要的部分更容易一些。Dojo 的源代码没有压缩且比较大，所以不建议在生产应用程序中使用它。请参阅 参考资料，了解有关创建自定义 Dojo 构建版本来提升 Dojo 应用程序性能的信息。清单 1 给出了 Dojo 应用程序的基本结构。
如果将清单 1 中的代码保存到文件中，在 Web 浏览器中打开此文件，将会看到一个灰色背景，再没有任何内容。这没什么用，所以让我们在应用程序中添加一些内容。本文中的示例使用了非标准的 Dojo Mobile 类，所以需要用dojo.require加载它们。在dojo.require("dojox.mobile");行的后面，添加清单 2 所示的代码。人工加载 Dojo Mobile 类
现在，可以添加 "Hello World" 应用程序的主要代码。本文中的示例使用了 Dojo Mobile 的声明式语法，这意味着要使用带特殊 Dojo Mobile 属性的常规 HTML 标记，在运行时解析 Dojo Mobile 属性。在代码的<body>部分中，添加清单 3 中的代码。上述代码定义了一个ScrollableView，它构成主要的应用程序界面。标准的View类与ScrollableView类之间的主要差异是：标准的View使用标准的浏览器机制来滚动页面。ScrollableView类有自己的滚动机制，可以像原生应用程序一样固定应用程序中的页眉和页脚，滚动它们之间的内容。
在ScrollableView中有一个Heading，它是包含文本 “Hello,World” 的标题栏。通过在这个对象上设置属性fixed="top"，Dojo Mobile 会将这个标题一直留在屏幕顶部，滚动它下面的其他内容。RoundRectCategory对象为圆形的列表或单一列表项定义了一个组标题。第一个类别后面是一个RoundRect框，其中包含一些静态文本。然后是另一个类别标题和RoundRectList对象，该对象包含一系列ListItem对象。最终结果应该像图 1 这样。
@H_404_3@图 1. Hello World 应用程序
下一节将讨论可以在 Dojo Mobile 1.7 中使用各种小部件和组件。
@H_404_3@小部件
Dojo Mobile 附带了许多小部件，它们是专门针对移动设备而设计和优化的。这些小部件包括布局组件（视图）、列表、导航栏、标签栏、按钮和表单。本节将介绍许多小部件的 作用并提供基本代码示例。本节中的屏幕图取自使用 iPhone 主题的 iOS 设备，如果使用 Android 主题，屏幕会有差异。
View
View是一个容器小部件，它占据设备屏幕上的所有可用空间。应用程序的页面可以包含多个View对象，但只有其中的一个对象在任何时候都处于活跃状态。用户通常可以使用工具栏按钮和标签栏按钮在不同的视图之间切换，在视图之间移动时，可以获得各种渐变效果。图 2 显示了一个空的View示例。
使用 Dojo 基本 SDK 中的dojox.mobile.View类创建View对象。不需要使用dojo.require加载它。在使用View对象时，可以使用 selected 属性决定是否在启动应用程序时显示这个视图（启动视图）。以声明方式创建以上 View 需要使用以下代码。
也可以使用 JavaScript 以程序方式创建View。清单 4 给出使用这种方法创建图 2 中的View的代码。清单 4 假设在 HTML 中有一个块元素，其id属性值是myView。它在 DOM 中将一个View对象绑定到这个元素。
后面对小部件的讨论涉及如何仅以声明方式使用它们。关于如何用程序语法使用 Dojo Mobile 小部件的更多信息，请查阅 Dojo API。
ScrollableView
ScrollableView小部件与View小部件相似：被用作放置其他小部件的容器。主要区别是，对于ScrollableView，如果内容超过屏幕的高度，用户可以通过触摸屏幕并上下滚动内容（如果使用水平滚动，就是左右移动），而页眉和页脚对象保持不动。如果使用标准的View对象，会滚动整个屏幕，页眉和页脚不会留在固定的位置。图 3 显示了一个示例。
创建空的ScrollableView对象与创建空的View对象非常相似。创建空的ScrollableView的代码是：
建议希望在视图中添加固定的页眉或页脚时使用ScrollableView，否则，应该使用常规的View类。
与常规的View类不同，基本类中不包含ScrollableView，所以需要使用dojo.require加载它。
SwapView（以前为FlippableView）
SwapView小部件以前名为FlippableView，在 Dojo Mobile 1.7 中已不推荐使用。SwapView可以创建一个容器对象，可以通过触碰屏幕左右边切换为其他SwapView对象。视图的次序取决于它们在代码中的次序。图 4 显示一个SwapView小部件。
如果希望创建一个包含两个视图的示例FlippableView，可以使用清单 5 中的代码。如果使用了 Dojo 1.7，则需要将FlippableView更改为SwapView。
基本类中不包含SwapView，需要使用dojo.require加载它。
Heading
Heading小部件可以创建导航栏，导航栏出现在应用程序的顶部。Heading对象通常包含一个标题。您还可以在导航栏中添加导航元素（比如 Back 按钮）或工具栏按钮，以便提供简便的应用程序导航。
如果在ScrollableView容器中使用Heading，Heading小部件会固定在应用程序的顶部，而应用程序的其余部分会滚动。这让用户一直可以使用导航元素。图 5 显示了一个Heading对象示例，该示例包括标题、Back 按钮和工具栏按钮。
清单 6 给出了创建图 5 中的Heading小部件的代码。
您可能会注意到，Back 按钮实际上是在Heading元素中定义的。back属性定义了应该在按钮中显示的文本。moveTo属性应该包含当用户按 Back 按钮时激活的View对象的 ID。还可以使用 transition 属性定义以这种方式导航到另一个视图时产生的渐变效果。默认设置是 slide，其他选项包括 fade、flip 和 none。
可以使用ToolBarButton小部件定义其他导航按钮。如果希望获得采用与左边的 Back 按钮样式不同的按钮，或者希望在右边显示按钮，只需在Heading元素中添加ToolBarButton对象。
RoundRect
RoundRect类可以创建简单的圆角容器，可以在其中放置静态 HTML 或其他 Dojo Mobile 小部件。图 6 显示了RoundRect小部件的示例。
要想创建图 6 中的RoundRect对象，可以使用清单 7 所示的语法。
RoundRect类非常简单。它只接受一个属性shadow，默认情况下被设置为 false。这个属性只定义容器是否应有阴影。
RoundRectCategory和RoundRectList
在移动设备上显示数据时，列表非常重要。可以使用垂直的表格结构显示一系列列表项。可以使用列表项显示导航或其他信息。Dojo Mobile 允许创建两种列表，它们都有相关联的类别小部件。RoundRectList创建列表的两边有间隙，在第一个和最后一个列表项上有圆角。图 7 显示在 iPhone 上看到的RoundRectCategory和RoundRectList。
这个示例定义了一个RoundRectCategory，其中包含标签 “List Heading” 以及一个包含三个ListItem对象的RoundRectList对象。清单 8 给出创建这些小部件的代码。
EdgeToEdgeCategory和EdgeToEdgeList
EdgeToEdgeList与RoundRectList很相似。可以采用完全相同的方式使用EdgeToEdgeList，但是它创建的列表会占据视图的整个宽度。图 8 给出一个示例。
EdgeToEdgeList的代码几乎与前一个示例完全相同，只是RoundRect的引用替换成了EdgeToEdge，参见清单 9。
通常使用上面的列表显示人名列表，人名一般按姓氏的第一个字母分组。
IconContainer
可以使用IconContainer小部件定义一系列图标，每当触碰图标时，都会打开一个单独的容器。IconItem对象可以从嵌套在自身中的容器（在同一视图上）中滑出，也可以把当前使用的View切换为具有特定 ID 的视图。图 9 显示一个包含三个图标的IconContainer。
使用清单 10 所示的代码创建上面的IconContainer。
in _base.js 中不包含IconContainer类，所以需要使用dojo.require加载它。但是，IconItem不是这样，所以不需要人工加载它，否则在运行应用程序时会出现错误。
还有更多关于这些小部件的详细信息，但它们超出了本文的讨论范围。请通过 参考资料 中的链接进一步了解 Dojo Mobile Showcase 和 API。
Button
可以使用Button类创建简单的按钮对象。然后，可以使用dojo.connect在这个小部件上创建处理 “click" 等事件的代码。图 10 给出一个示例。
创建这个按钮的代码很简单，参见清单 11。
可以使用 CSS 自行创建新的按钮风格，使用 class 属性把类名分配给按钮。如果使用过 Dojo Mobile 1.6，请注意 1.7 版本中对Button类进行的以下更改。
它不再包含在 _base.js 中，因此您需要使用dojo.require明确加载Button类（本文前面的示例就是这么做的）。
使用 class 属性把一个类名分配给按钮，而不是像以前一样使用btnClass属性。如果尝试在 1.7 版本中使用btnClass，您可能会发现按钮的外观与预期不符。
Switch
Switch对象是一个开关控件，可以在两个值之间切换对象的值。在默认情况下，该值是 ON 或 OFF。改变开关值的方法是，触碰希望切换到的值，或者将开关滑动到目标值。图 11 给出Switch小部件的示例，其中有两个开关：一个在 OFF 位置上，另一个在 ON 位置上。
下面的代码创建一个Switch对象。
Switch小部件还接受另外两个属性leftLabel和rightLabel，它们分别定义在开和关状态下应显示的值。在默认情况下，标签是 ON 和 OFF。当改变Switch的值时，会触发onStateChanged事件。可以使用dojo.connect处理这个事件。
TabBar
TabBar小部件用于在触碰TabBarButton时激活或取消激活视图，从而将View对象换入或换出应用程序。TabBar小部件可以使用iconBase属性定义图像 sprite，在每个TabBarButton中显示不同的图标。当使用TabBar作为应用程序底部的导航组件时，这样做的效果很好，参见图 12。
还可以使用TabBar组件和segmentedControl的barType属性。这样创建的标签栏通常适合放在应用程序顶部的主Heading小部件下面。图 13 给出这种TabBar的示例。
您必须使用dojo.require明确加载TabBar类，否则会获得一些令人费解的错误消息。但是，TabBarButton类不需要明确加载。
TabBarButton类有许多配置选项，可以用它们定制按钮的外观。可以指定图标的位置、应该使用的图标、改变视图时使用的渐变、完成渐变时触发的回调函数等。有关的更多信息，请参见 Dojo API。
Carousel
Carousel小部件是 Dojo 1.7 中新增的部件，可用于创建旋转式图像库，您可以滑动手指或使用导航控制小部件来旋转它。图 14 显示了Carousel小部件的一个示例。
要使用Carousel组件，必须定义一个ItemFileReadStore对象作为存储器，其中包含一系列图像。例如，清单 13 给出了在您的 JavaScript 代码块中定义的一个 JSON 对象。
然后可以定义一个ItemFileReadStore对象和 carousel 本身，如清单 14 所示。清单 14 中的代码可用来创建一个类似于 图 14 的相册Carousel。numVisible属性定义了一次显示多少幅图像。
SpinWheel
SpinWheel组件是一个小部件，可使用它从旋转界面中选择值。iPhone 用户应对自旋式日期选取器组件和类似的控件很熟悉。SpinWheel组件可用于创建自定义的转轮。或者可以分别使用SpinWheelDatePicker或SpinWheelTimePicker创建日期和时间选取器。图 15 显示了这两个小部件。
创建SpinWheelDatePicker和SpinWheelTimePicker很简单。这两个小部件默认情况下均未包含在基础框架中，所以必须明确加载相关的类dojox.mobile.SpinWheelDatePicker和dojox.mobile.SpinWheelTimePicker。没有比实际创建选取器更简单的方法了。清单 15 中的代码将分别使用 ID spin1 和 spin2 创建一个日期选取器和时间选取器。
当然，除非可以读取每个转轮上的值，否则SpinWheels没有多大用处。要获取日期选取器中第一个转轮的当前值，只需使用 slots 属性和getValue函数，如下所示。
可使用SpinWheel和SpinWheelslot 类创建一个自定义主题。轮槽 (wheel slot) 可包含文本和图像，所以它们是高度可定制的。有关的更多信息，请参阅 Dojo Mobile 开发人员测试。@H_404_3@用 PhoneGap 进行原生部署
通过移动 Web 部署应用程序变得越来越流行。随着移动浏览器的改进和 HTML5 的发展，移动 Web 会成为移动应用程序的更强大的分发方式。但是，在许多情况下，人们希望将应用程序以原生方式部署到相关平台的应用程序商店。现在，不必使用每个平台的原生 SDK 开发应用程序的不同版本，而是可以使用 PhoneGap 将移动 Web 应用程序包装在原生包中。
PhoneGap 是一个开源项目，可以在任何应用程序中免费使用，无论应用程序采用什么分发模型（免费、商业、开源或混合式许可证）。PhoneGap 本身采用的是 MIT 和 BSD 开源许可证。您可以选择最适合自己的许可证。
PhoneGap 包含为六种平台构建原生应用程序的 SDK：iOS、Android、Blackberry、webOS、Windows Mobile 和 Symbian。开始使用 PhoneGap 的步骤因平台而异。这一节会介绍如何将它部署到 iOS 上。
我们来创建一个非常基础的 Dojo 应用程序，使用 PhoneGap 在 iOS 设备上以原生方式运行。为了构建原生的 iOS 应用程序，需要包含 OS X 10.6 Snow Leopard 和 Xcode 的 Mac 计算机。可以从 Apple 的 Developer Center 或 Mac App Store 下载 Xcode。一定要下载 iOS SDK，否则无法构建 iOS 应用程序。
假设已经安装了 Xcode 和 iOS SDK：
启动 PhoneGapLibInstaller.pkg，将 PhoneGap 安装到 Xcode 中。
安装程序运行结束时，启动 Xcode 并创建一个新项目。
在左边的项目类型组中，选择 User Templates 组下面的 @H_404_3@PhoneGap（参见图 16），然后在右边选择 @H_404_3@PhoneGap-based Application。
在 Xcode 中的 Groups & Files 部分，通常在窗口的左侧展开 “www” 文件夹。在该文件夹中，需要放入在本文开头从 Subversion 迁出 Dojo 1.7 时创建的 dojo-toolkit 目录。在开发应用程序过程中，通常会构建一个自定义的 Dojo 包并仅包含所需的文件。
在 Dojo 1.7 中不能删除 dijit 子目录（像 Dojo 1.6 中一样），因为最新版本中有一些 Dijit 类的依赖关系。如果希望精减应用程序的大小，则应该创建一个自定义的 Dojo 构建版本，这可以确保您不会删除任何依赖关系。
如果尝试将 dojo-toolkit 文件夹拖放到 www 文件夹中，您会发现这不起作用。您需要在 Finder 中双击 www 文件夹来打开它，然后将 dojo-toolkit 文件夹复制到 www 文件夹中。该文件夹可能不会立即显示在 Xcode 中，所以可以折叠并展开 www 文件夹来刷新视图。借助 PhoneGap 中包含的 Dojo 1.7，您可以继续构建应用程序本身。
打开 index.html 文件。该文件中的代码应该类似于清单 16。
现在，我们要构建与 “Hello,World” 应用程序功能相同的原生应用程序。第一步是包含 Dojo 本身。在 index.html 中找到以下行： 在这一行下面，添加清单 17 中的以下代码。清单 17 中的代码会根据需要加载 Dojo 的 CSS 和 JavaScript 文件。在此代码下方，应该有一个内联的<script>代码块。在这里添加清单 18 中的代码，以加载相关的 Dojo 类。
清单 18 中的代码会加载 Dojo Mobile 解析器和基类，以及ScrollableView容器小部件。在本例中无需兼容层，因为目标设备 iOS 肯定会使用 WebKit。
找到 JavaScript 函数onDeviceReady。在注释 “do your thing!” 下方，删除以下代码，确保不会在每次运行应用程序时获得一个警告对话框：
最后需要加载的代码（如清单 19 所示）是小部件本身。将以下代码添加到 index.html 中的开始和结束<body>元素之间，删除 PhoneGap 添加的默认代码。 保存 index.html 文件 ( @H_404_3@File -> @H_404_3@Save)，确保将 Xcode 左上角的 Overview 工具栏选项设置为 Simulator 目标。现在可以使用 Build and Run ( @H_404_3@Build -> @H_404_3@Build and Run) 来启动应用程序。Xcode 会花费一些时间来启动 iOS Simulator 应用程序。在此之后，您的原生 Dojo 应用程序应该会启动。您可能会注意到，在屏幕的底部没有 Safari 工具栏，而且应用程序占据了整个设备屏幕，参见图 17。
如果通过在模拟的 iPhone 上选择 @H_404_3@Home 退出应用程序，应用程序在设备的主屏幕上显示为默认的 PhoneGap 应用程序图标和名称HelloNative，参见图 18。
如果在模拟器中打开另一个应用程序（比如 Safari 或 Contacts），两次触碰 Home 按钮，会打开 iOS Multi-tasking 菜单。您会再次看到自己的应用程序的图标，可以在其他应用程序和自己的应用程序之间快速轻松地切换。
部署到其他平台的过程通常与这里描述的一样简单，但是将应用程序部署到 Android 可能需要做一些调整。可以在 PhoneGap 网站上找到您需要的所有信息。如果计划分发应用程序，或者您应用程序二进制文件偏大，请记得创建一个自定义 Dojo 构建版本。
@H_404_3@结束语
移动 Web 应用程序正在快速发展，它会成为原生移动应用程序开发的合理的、强大的替代方法。在本文中，我们了解了 Dojo Mobile 这样的移动 HTML5 框架如何提高开发过程的价值，简化为移动设备设计 UI 组件和小部件的繁琐工作。Dojo Mobile 甚至为不同类型的设备提供了不同的主题。
构建移动 Web 应用程序之后，可以使用表现出色的 PhoneGap SDK 将应用程序以原生方式部署到多个目标平台上。甚至可以利用相机和麦克风等原生设备特性。移动 Web 的未来不仅非常光明，而且就在眼前。
转自：http://www.open-open.com/lib/view/open1355831701916.html
原文链接：https://www.f2er.com/dojo/291397.html