首页 > 代码库 > 翻译 - 【Dojo Tutorials】Getting Started with Dojo Mobile

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

2024-07-30 00:55:07   226人阅读

原文：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的一些实战示例：

  • 浏览所有dojox/mobile的测试用例（1.10.1）

这些移动界面在桌面浏览器中依然运行完美，不管你是使用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 widgets7     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: false14             };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 widgets24                 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系列教程

  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

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


联系
我们