Dojo Mobile 概述Dojo Mobile 是 Dojo Toolkit 的扩展，它提供一系列针对在移动设备（比如智能手机或平板电脑）上使用而优化的小部件或组件。这些组件基于相应的原生组件，为熟悉智能手机应用程序的用户提供熟悉的外观和感觉。可以使用主题定制这些组件，例如可以向 iOS 用户而不是 Android 用户提供不同的样式集。
Dojo Mobile 的使用方式与 Dijit 组件库相似。要想在应用程序中使用某种小部件，首先要在应用程序的主 JavaScript 块中使用 dojo.require 装载相关的类。然后可以在应用程序中添加这种小部件，既可以使用带 dojoType 属性的常规 HTML 标记以声明方式添加小部件，也可以使用 JavaScript 代码通过程序添加小部件。
Dojo Mobile 在 iOS 和 Android 设备上效果很好，这主要是因为在这些平台上有 WebKit 浏览器。这一优势在提供了比较完善的 WebKit 浏览器的其他平台（比如 BlackBerry OS 6、HP webOS 等）上也能发挥很好的效果。在非 WebKit 浏览器上，Dojo Mobile 应用程序会优雅地使用替代方法，它们甚至可以在老式的桌面浏览器中运行（包括 Microsoft Internet Explorer）。在默认情况下，只包含 CSS3 样式，但是只需使用一行代码，就可以为非 WebKit 浏览器添加兼容性模块：
1
| dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
|
Dojo Mobile 的关键特性包括：
- 由于使用 Dojo Mobile 解析器，实现了小部件的轻量加载。
- CSS3 动画和渐变，可以在高端 iOS 和 Android 设备上产生与原生应用程序相似的体验。
- 包含提供 iOS 和 Android 外观和感觉的主题。
- 与非 CSS3 兼容的设备和浏览器的兼容性。
- 完全声明式的语法，便于学习。
- 提供许多小部件，在即将发布的 Dojo Mobile 1.7 中还会增加。
下一节通过构建 "Hello, World" 应用程序解释如何开始使用 Dojo Mobile。
开始使用 Dojo Mobile开始进行 Dojo Mobile 开发非常简单。甚至不需要下载任何东西；可以使用 Google 的 Content Delivery Network (CDN) 远程地装载需要的所有东西。关于 Dojo 应用程序的基本结构，请参见清单 1。
清单 1. Dojo Mobile HTML 文档的基本结构1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!doctype html>
<html>
<head>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,
user-scalable=no">
<meta name="apple-mobie-web-app-capable" content="yes">
<title>My Dojo Mobile App</title>
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes
/iphone/iphone.css">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
</script>
</head>
<body>
<!-- Dojo Widgets Go Here -->
</body>
</html>
|
如果将清单 1 中的代码保存在文件中，在 Web 浏览器中打开此文件，将会看到一个灰色背景，其中没有内容。这没什么用，所以让我们在应用程序中添加一些内容。本文中的示例使用非标准的 Dojo Mobile 类，所以需要用 dojo.require 人工地装载它们。在 dojo.require("dojox.mobile"); 行后面，添加清单 2 所示的代码。
清单 2. 人工装载 Dojo Mobile 类1
2
3
| dojo.require("dojox.mobile.ScrollableView");
dojo.require("dojox.mobile.FlippableView");
dojo.require("dojox.mobile.IconContainer");
|
现在，可以添加 "Hello World" 应用程序的主要代码。本文中的示例使用 Dojo Mobile 的声明式语法，这意味着使用带特殊 Dojo Mobile 属性的常规 HTML 标记，在运行时解析 Dojo Mobile 属性。在代码的 <body> 部分中，添加清单 3 中的代码。
清单 3. 使用 Dojo Mobile 小部件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <div dojoType="dojox.mobile.ScrollableView" selected="true">
<h1 dojoType="dojox.mobile.Heading" fixed="top">Hello, World!</h1>
<h2 dojoType="dojox.mobile.RoundRectCategory">First Section</h2>
<div dojoType="dojox.mobile.RoundRect">
This is a nice standard rounded rectangular label.
</div>
<h2 dojoType="dojox.mobile.RoundRectCategory">Second Section</h2>
<ul dojoType="dojox.mobile.RoundRectList">
<li dojoType="dojox.mobile.ListItem">List Item 1</li>
<li dojoType="dojox.mobile.ListItem">List Item 2</li>
<li dojoType="dojox.mobile.ListItem">List Item 3</li>
<li dojoType="dojox.mobile.ListItem">List Item 4</li>
<li dojoType="dojox.mobile.ListItem">List Item 5</li>
</ul>
</div>
|
清单 2 定义一个 ScrollableView，它构成主要的应用程序界面。标准的 View 类与 ScrollableView 类之间的主要差异是，标准的 View 使用标准的浏览器机制滚动页面。ScrollableView 类有自己的滚动机制，可以像原生应用程序一样固定应用程序中的页眉和页脚，滚动它们之间的内容。
在 ScrollableView 内是一个 Heading，它是包含文本 "Hello, World" 的标题栏。通过在这个对象上设置属性 fixed="top"，Dojo Mobile 会把这个标题一直留在屏幕顶部，滚动它下面的其他内容。RoundRectCategory 对象为圆角列表或单一列表项定义组标题。第一个类别后面是一个 RoundRect 框，其中有一些静态文本。然后是另一个类别标题和 RoundRectList 对象，这个对象包含一系列 ListItem 对象。最终结果应该像图 1 这样。
图 1. Hello World 应用程序 下一节讨论在 Dojo Mobile 中可以使用各种小部件和组件。 |
