原文：Getting Started with Dojo Mobile
web上的内容更新的飞快，重心很快就转移到移动设备上来了。就像对象web上的其他问题一样，Dojo对此也有解决方案：Dojo Mobile。Dojo Mobile是一个框架，可以让你轻松的构建设备兼容的web应用。这是关于Dojo Mobile系列教程的引导文章。通过对这一系列文章的学习，我们将构建一个叫做FlickView的Dojo Mobile应用。首先，我们应该先学习为什么既如何使用Dojo Mobile。
Dojo Mobile简介
Dojo Mobile是Dojo工具集为解决移动web应用问题而存在的。它有一系列轻量级的，灵活的，及可扩展的类组合而成。Dojo Mobile也可以用于构建大多移动设备的样式界面：Android，iOS，BlackBerry，WindowsPhone，在这些设备上你的应用对用户来说是无缝的。
Dojo Mobile包括的主要功能：
- 完整而统一的移动挂件库（dojox/mobile）——不需要从别处收集挂件
- 轻量，低级依赖
- 原生的控制器与挂件样式
- 桌面与移动设备一直的功能体验
- 对设备放置方向的响应（重力感应）
- 支持大多数设备的CSS主题
- 尽可能的使用基于CSS的动画
Dojo Mobile的一些实战示例：
这些移动界面在桌面浏览器中依然运行完美，不管你是使用iOS还是Android的设备来查看它们。你将会被Dojo Mobile的挂件与CSS主题深深的折服。
移动页面的结构
开始构建你的移动应用时使用的模版如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html;charset=utf-8"/> 5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> 6 <meta name="apple-mobile-web-app-capable" content="yes"/> 7 <!-- stylesheet will go here --> 8 <!-- dojo/javascript will go here --> 9 </head> 10 <body> 11 <!-- application will go here --> 12 </body> 13 </html>
在页面中添加Dojo Mobile需要：
- 一个主题 有很多预定义的主题：iPhone，iPad，Android 2.x，Android Holodark，BlackBerry，WindowsPhone与一个一般自定义主题
- Dojo的启动与配置
- 一个或多个视图 视图在应用中实际作为“页面”而存在
让我们把它们一一装配起来，关于它们的细节我们来一一讲解。
主题
Dojo Mobile可以动态应用视觉主题，为了让应用看起来符合不同浏览器代理的样式。（就是说会根据不同的浏览器设置的http头显示与设备对应的主题）。为了应用原生主题，你只需要在HTML页面中包含下面的代码片段就好了：
1 <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
Dojo启动与配置
使用传统的script标签来包含Dojo：
1 <script type="text/javascript" src="dojo/dojo.js"></script>
Dojo的配置像这样来指定：
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnload: false
};
</script>
- async：true 配置加载器为异步模式
- parseOnload：false 让开发者明确的包含dojo/parser并调用parser.parse()
现在到了require部分：
- 我们明确的包含dojox/mobile/parser并调用parser.parse()，parser将会解析在后面部分定义的Dojo HTML标签
- 兼容模块dojox/mobile/compat是需要的，要确保在不是基于WebKit的客户端上能功能兼容，像有些个人电脑的浏览器就不支持CSS3
- dojo/domReady!是一个比较特别的AMD模块（以叹号结尾的我们一般都称为插件），包含进来是要确保parser是在DOM准备好之后调用的。
1 require([
2 "dojox/mobile/parser",
3 "dojox/mobile/compat",
4 "dojo/domReady!"
5 ], function(parser) {
6 // now parse the page for widgets
7 parser.parse();
8 });
包含dojox/mobile/compat不是必需的但是是最佳实践，且它不会降低移动浏览器的性能。
Dojo Mobile的模版
把我们提到的模版组在一起大概是这个样子的：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
6 <meta name="apple-mobile-web-app-capable" content="yes"/>
7 <!-- stylesheet will go here -->
8 <!-- dojo/javascript will go here -->
9 <script type="text/javascript" src="dojo/mobile/deviceTheme.js"></script>
10 <script type="text/javascript">
11 dojoConfig = {
12 async: true,
13 parseOnload: false
14 };
15 </script>
16 <script type="text/javascript" src="dojo/dojo.js"></script>
17 <script type="text/javascript">
18 require([
19 "dojox/mobile/parser",
20 "dojox/mobile/compat",
21 "dojo/domReady!"
22 ], function(parser) {
23 // now parse the page for widgets
24 parser.parse();
25 });
26 </script>
27 </head>
28 <body style="visibility:hidden;">
29 <!-- application will go here -->
30 </body>
31 </html>
你注意到BODY样式里的visibility=hidden吗？这能确保只有在Dojo mobile的挂件被渲染完成后在会展示出来。
创建视图与挂件
正如你看到的，Dojo Mobile页面只需很少的依赖；添加挂件到页面也没什么不同的。在我们创建挂件之前，我们先看看Dojo Mobile提供的一些挂件：
- View - 在移动应用中一个view就是一个页面
- ScrollableView - 允许固定底部或底部，中间部分可以滚动的页面
- Button - 一个简单的按钮
- Switch - 切换on/off的开关
- Heading - 一个简单的头部
- ListItem - 基础的列表项
- TabBar与TabBarButton - 标签内容管理
- 还有更多！
所有的挂件都已经定义了与设备系统相似的样式。你也许想要制作自己的图标，挂件工作方式及针对不同设备支持的展示方式。
现在你已经熟悉了Dojo Mobile中的一些挂件，让我们创建一个带有头部，列表，和开关的页面：
1 <!-- the view or "page"; select it as the "home" screen --> 2 <div id="settings" data-dojo-type="dojo/mobile/View" data-dojo-props="select:true"> 3 <!-- a sample heading --> 4 <h1 data-dojo-type="dojox/mobile/Heading">"Homeage" View</h1> 5 <!-- a rounded ractangle list container --> 6 <ul data-dojo-type="dojox/mobile/RoundRectList"> 7 <!-- list item with an icon containing a switch --> 8 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="ionc:‘images/icon-1.png‘">Airplane Mode 9 <!-- the switch --> 10 <div data-dojo-type="dojox/mobile/Switch"></div> 11 </li> 12 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:‘images/image-2.png‘,rightText:‘mac‘">Wi-Fi</li> 13 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="icon:‘images/image-3.png‘,rightText:‘AcmePhone‘,moveTo:‘general‘">Carrier</li> 14 </ul> 15 </div>
要让上面的代码工作需要包含一些挂件包：
1 require([
2 //...
3 "dojox/mobile/View",
4 "dojox/mobile/Heading",
5 "dojox/mobile/RoundRectList",
6 "dojox/mobile/ListItem",
7 "dojox/mobile/Switch"
8 ], function(parser) {
9 // ...
10 });
我们创建了一个简单的页面。当然很多移动应用都不止一个页面的，让我们来参考上面的代码创建一个General页面与About页面：
1 <!-- The "General" sub-page --> 2 <div id="general" data-dojo-type="dojox/mobile/View"> 3 <!-- a sample heading --> 4 <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="back:‘Setting‘,moveTo:‘settings‘">General View</h1> 5 <!-- a rounded rectangle list container --> 6 <ul data-dojo-type="dojox/mobile/RoundRectList"> 7 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="moveTo:‘about‘">About</li> 8 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText: ‘2h 40m‘,moveTo:‘about‘">Usage</li> 9 </ul> 10 </div> 11 12 <!-- And let‘s add another view "About" --> 13 <div id="about" data-dojo-type="dojox/mobile/View"> 14 <!-- Main view heading --> 15 <h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="back:‘General‘,moveTo:‘general‘">About</h1> 16 <!-- subheading --> 17 <h2 data-dojo-type="dojox/mobile/RoundRectCategory">Generic Mobile Device</h2> 18 <!-- a rounded rectangle list container --> 19 <ul data-dojo-type="dojox/mobile/RoundRectList"> 20 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:‘AcmePhone‘">Network</li> 21 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:‘AcmePhone‘">Line</li> 22 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:‘1024‘">Songs</li> 23 <li data-dojo-type="dojox/mobile/ListItem" data-dojo-props="rightText:‘10‘">Videos</li> 24 </ul> 25 </div>
你需要包含一个新的挂件包dojox/mobile/RoundRectCategory。
恭喜你，你已创建了第一个Dojo Mobile应用。
Dojo Mobile让创建移动应用的基本元素变得简单！当你的应用比我们的例子更复杂的时候，明白为创建多视图应用Dojo Mobile提供了基本的主题，挂件，方法是很重要的。
继续
现在我们已经学习了Dojo Mobile的基本用法，该系列的下一讲将会专注于创建动态的，数据驱动的移动应用，叫做FlickrView。它将用到更多的挂件，并且各种设备上运行良好。
下载源码
Download Part 1 - Getting Started with Dojo Mobile。
资源与参考
- Dojo Mobile Reference Guide
- The Dojo Toolkit API
- dojox/mobile deviceTheme
- Themes currently available
- Configuring Dojo
- Dojo HTML5 Data-Attribute Support
FlickrView系列教程
- Part 1 - Getting Started with Dojo Mobile
- Part 2 - Developing a Dojo Mobile Application: FlickrView
- Part 3 - FlickrView: Implementing FeedView
- Part 4 - FlickrView: Implementing SettingsView
- Part 5 - Build FlickrView for production