翻译 - 【Dojo Tutorials】Part 1 - Getting Started with Dojo Mobile

原文：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。

资源与参考

FlickrView系列教程

  1. Part 1 - Getting Started with Dojo Mobile
  2. Part 2 - Developing a Dojo Mobile Application: FlickrView
  3. Part 3 - FlickrView: Implementing FeedView
  4. Part 4 - FlickrView: Implementing SettingsView
  5. Part 5 - Build FlickrView for production

posted on 2014-10-29 17:08  古道倦马  阅读(248)  评论(0)  编辑  收藏  举报

导航