Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门

作者：David Walsh

Web技术飞速更新，而现在Web的趋势也是逐渐向移动设备上迁移。如同其他Web存在的问题一样，Dojo Toolkit已经为你提供了解决方案——dojox.mobile。dojox.mobile是一个由controllers、基于CSS3的主题以及一些外观与你的移动设备契合的widgets组成的。有了dojox.mobile，你可以轻松的创建智能、灵活、跨平台的移动Web应用程序。本文是dojox.mobile系列教程的第一篇。在这个系列中，我们将创建一个很棒的基于Twitter的web应用程序“TweetView”。在我们开始之前，先让我们学习一下怎么使用dojox.mobile。

难度：初学者

版本：1.6

系列：TweetView

dojox.mobile简介

dojox.mobile是Dojo Toolkit根据用户对移动Web应用程序的需要而量身定制的。dojox.mobile的架构特点是轻量、灵活以及可扩展。同时dojox.mobile也模仿了iOS和Andriod设备的界面，因此你用dojo.mobile创建出的应用程序将带给你的用户无缝的体验。dojox.mobile的核心特点包括：

轻量、最小化互相依赖性
提供iOS以及Andriod的CSS主题。
提供iOS以及Andriod样式的空间。
使用基于CSS3的动画（如果设备支持CSS3的话）
为不支持CSS3的设备提供JavaScript动画
可响应移动设备的位置变化
dojox.mobile是一套完整的移动widget框架——不需要再从很多地方寻找widget东拼西凑。

下面你可以看到dojox.mobile在不同平台大致的样子：

有了dojox.mobile，我们将创建一个简单的移动web应用程序：TweetView。

！这些界面也可以在桌面浏览器使用，但还是推荐花点时间在你的iOS和Andriod设备上试一下每一个样例。你会对dojox.mobile的widgets和CSS主题感到映像深刻的。

构建你的移动页面

像任何其他移动应用程序一样，页面结构的设计是很重要的。而dojox.mobile基本不需要任何特殊的页面结构，你只需要加入几项关键的东西就可以了：

合适的DOCTYPE
针对Mobile的META标签
一个用来包含视图（views）的BODY元素

！你可以参考Mobile Safari Supported Meta Tags 来学习更多关于META标签的知识。

你可以使用下面的模板开始创建你的应用程序：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>Your Application Name</title> <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" mce_href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"></link>   </head> <body>  </body></html>

有了上面的HTML模板，我们现在可以向页面添加Dojo和dojox.mobile了！

将dojox.mobile加入你的移动页面

dojox.mobile看上去就像一个简化、定制版的Dijit。添加dojox.mobile到你的页面，你需要：

一个主题：现在有两种主题可供选择：iPhone和Andriod
带有dojox.mobile的Dojo库：你将用到的JavaScript代码
一个或多个视图（views）：视图（views）将在你的应用程序中起到“页面”的作用。

接下来我们将对每一部分分别进行讲解。

主题

像前面提到的，dojox.mobile提供了两种主题：iPhone和Andriod。iPhone主题提供适用于iPhone/iPod和iPad设备的样式表。dojo.mobile引入了一个兼容层来使得这两种iOS设备最大限度地兼容。同时针对非Webkit内核的设备，dojox.mobile 也提供了一套特殊的样式表。为了简化我们的页面，我们将使用iPhone主题：

！dojox.mobile不会侦测设备的种类来导入设备对应的主题。一个很好的做法是在服务器端侦测设备的种类从而向页面写入对应的样式表。HTML页面仅仅用来创建widgets，这样页面就不会受到设备种类的影响了。

导入Dojo和dojox.mobile

使用传荣的SCRIPT标签导入Dojo

<mce:script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" mce_src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" djConfig="isDebug:true, parseOnLoad:true"></mce:script>

dojox.mobile和dojox.mobile.parser可以通过传荣的dojo.require方法来导入。

// 加载widget parserdojo.require("dojox.mobile.parser");// 加载基本库dojo.require("dojox.mobile")

还记得我说过dojox.mobile与Dijit很相似么？另外一个相似之处就是dojox.mobile也有自己的parser来找出那些需要被转换成widget的节点。dojox.mobile下的widget也将和Dijit的widget一样在标签中使用dojoType(或是其他自定义)属性。

导入dojox.mobile的最后一步是使用一个requireIf语句来确保当你的客户端不是WebKit内核时为你提供良好的兼容。（比如说你在使用Firefox浏览站点）：

// 如果不是Webkit客户端，加载compat模块dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");

！dojox.mobile暂不支持data-dojo-type和data-dojo-props这些Dojo 1.6中新的widget声明属性。期待在将来的把本中这些属性在dojox.mobile中得到支持。当前版本中，请暂时使用dojoType和其他内联属性。

dojox.mobile.compat加载额外的样式表和JavaScript来确保dojox.mobile可以使用基于JavaScript的动画效果来解决无法使用Webkit内核提供的CSS3动画效果导致widget无法工作的问题。

！dojox.mobile.compat并不是必须的。但是使用它是一个很好的习惯。它没有被加入到dojox.mobile的核心是为了尽可能的保持dojo.mobile核心的紧凑。

现在我们加载了iPhone主题和dojox.mobile资源，接下来我们就可以往页面上添加widget啦！

创建视图(views)和widgets

如你所见，创建一个可以使用dojox.mobile的页面就是那么简单。而向页面添加dojox.mobile的widget也一点不难。在我们开始创建widgets之前，让我们先看一下dojox.mobile提供哪些widget：

View（视图）- 视图是移动应用程序中一个虚拟的“页（page）”。它可以通过左右滚动切换到前一个或是后一个视图。一个页面可以有任意数量的视图。
ScrollingView（滚动视图）- 具有一个固定的页眉（header）和页脚（footer），中间的内容可以被滚动。
Button（按钮）- 一个简单的的按钮
Switch（开关）- 一个简单的开关
Heading（标题）- 一个简单的标题
ListItem（列表）- 一个基础列表
TabBar & TabBarButton（选项卡栏&选项卡栏按钮）- 选项卡内容管理，可以用以下两种形式：导航控件（蓝色，通常在页面顶端），选项卡栏（黑色，通常在页面底部）
...还有其他的！

！记住所有widgets的样式都和设备上的控件相似（在你提供的样式表中定制了）。你肯定会想要让你的widget和图标与你将要支持的设备风格一致。

现在你已经知道了一些dojox.mobile内置的widget了，我们这就创建一个带有标题栏，一些列表和一个开关的视图：

<div id="settings" dojoType="dojox.mobile.View" selected="true">  <h1 dojoType="dojox.mobile.Heading">"Homepage" View</h1>  <ul dojoType="dojox.mobile.RoundRectList">  <li dojoType="dojox.mobile.ListItem" icon="images/icon-1.png"> Airplane Mode  <div class="mblItemSwitch" dojoType="dojox.mobile.Switch"></div> </li>  <li dojoType="dojox.mobile.ListItem" icon="images/icon-2.png" rightText="mac"> Wi-Fi </li>  <li dojoType="dojox.mobile.ListItem" icon="images/icon-3.png" rightText="AcmePhone" moveTo="general"> Carrier </li> </ul></div>

！当用户点击“Carrier”元素并切换到“General”视图（或除了主页外任何其他视图），一个iPhone风格的“back”按钮将显示在左上角。而你并不需要在你的视图中添加一个“Back”按钮，你只需要在子视图的Heading（标题栏） widget中设置“back”属性即可。

上面我们创建了一个简单的视图。当然，大多数应用程序需要更多的视图。现在就让我们为上面的列子创建“general”视图和“about”视图。

<div id="general" dojoType="dojox.mobile.View">  <h1 dojoType="dojox.mobile.Heading" back="Settings" moveTo="settings">General View</h1>  <ul dojoType="dojox.mobile.RoundRectList"> <li dojoType="dojox.mobile.ListItem" moveTo="about"> About </li> <li dojoType="dojox.mobile.ListItem" rightText="2h 40m" moveTo="about"> Usage </li> </ul></div> <div id="about" dojoType="dojox.mobile.View">  <h1 dojoType="dojox.mobile.Heading" back="General" moveTo="general">About</h1>  <h2 dojoType="dojox.mobile.RoundRectCategory">Generic Mobile Device</h2>  <ul dojoType="dojox.mobile.RoundRectList"> <li dojoType="dojox.mobile.ListItem" rightText="AcmePhone"> Network </li> <li dojoType="dojox.mobile.ListItem" rightText="AcmePhone"> Line </li> <li dojoType="dojox.mobile.ListItem" rightText="1024"> Songs </li> <li dojoType="dojox.mobile.ListItem" rightText="10"> Videos </li> </ul></div>

演示

！请注意widget使用的自定义属性。完整的自定义属性列表可以参见dojox.mobile API docs for each widget 。同时请注意，标签形式的widget对搜索引擎更友好。

恭喜，你已经创建了你第一个dojox.mobile web应用程序！dojox.mobile让创建移动应用程序中的基本元素变得轻而易举！以后你的移动应用程序变得更加复杂，请记住dojox.mobile提供基本的主题，widgets和创建多视图应用程序的方法。

dojox.mobile相关资源

继续学习！

现在我们已经学习了dojox.mobile的基础，本系列的下面几篇教程将介绍如何创建一个动态的，数据驱动的移动应用程序“TweetView”。TweetView将会用到很多dojox.mobile widget，并且将兼容Android和iOS设备。该应用程序将从Twitter获取微博信息并格式化后漂亮地输出给用户。

TweetView系列中文教程

Dojo mobile TweetView 系列教程之一 —— dojox.mobile入门

Dojo mobile TweetView 系列教程之二 —— TweetView 启程

Dojo mobile TweetView 系列教程之三 —— Tweets和Mentions视图

Dojo mobile TweetView 系列教程之四 —— 创建Setting视图

posted on 2011-04-13 19:04 springside5 阅读(318) 评论(0) 编辑收藏举报