标签：android style blog http io color os ar 使用
原文：Getting Started with Dojo Mobile
web上的内容更新的飞快，重心很快就转移到移动设备上来了。就像对象web上的其他问题一样，Dojo对此也有解决方案：Dojo Mobile。Dojo Mobile是一个框架，可以让你轻松的构建设备兼容的web应用。这是关于Dojo Mobile系列教程的引导文章。通过对这一系列文章的学习，我们将构建一个叫做FlickView的Dojo Mobile应用。首先，我们应该先学习为什么既如何使用Dojo Mobile。
Dojo Mobile是Dojo工具集为解决移动web应用问题而存在的。它有一系列轻量级的，灵活的，及可扩展的类组合而成。Dojo Mobile也可以用于构建大多移动设备的样式界面：Android，iOS，BlackBerry，WindowsPhone，在这些设备上你的应用对用户来说是无缝的。
Dojo Mobile包括的主要功能：
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需要：
让我们把它们一一装配起来，关于它们的细节我们来一一讲解。
Dojo Mobile可以动态应用视觉主题，为了让应用看起来符合不同浏览器代理的样式。（就是说会根据不同的浏览器设置的http头显示与设备对应的主题）。为了应用原生主题，你只需要在HTML页面中包含下面的代码片段就好了：
1 <script type="text/javascript" src="dojox/mobile/deviceTheme.js"></script>
使用传统的script标签来包含Dojo：
1 <script type="text/javascript" src="dojo/dojo.js"></script>
Dojo的配置像这样来指定：
<script type="text/javascript"> dojoConfig = { async: true, parseOnload: false }; </script>
现在到了require部分：
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不是必需的但是是最佳实践，且它不会降低移动浏览器的性能。
把我们提到的模版组在一起大概是这个样子的：
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提供的一些挂件：
所有的挂件都已经定义了与设备系统相似的样式。你也许想要制作自己的图标，挂件工作方式及针对不同设备支持的展示方式。
现在你已经熟悉了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 Tutorials】Getting Started with Dojo Mobile
标签：android style blog http io color os ar 使用
原文地址：http://www.cnblogs.com/gudaojuanma/p/4059998.html
