Mobile 进行时： Dojo Mobile控件初探

你有想过在iPhone或是Android设备浏览器上运行与手机原生程序界面相同的Web程序吗？ 你有想过让你的Web应用更适合在手持设备上交互使用吗？如果是，那么你有必要读一下这篇文章。

\

移动开发是时下最炙手可热的话题，各种应用程序如雨后春笋出现在应用商店里。大家的智能手机里也多多少少安装了各种应用，然而问题也随之出现：手机的储存空间限制，手机应用的升级维护成本以及多处访问的需求，曾经桌面应用程序也遇到过类似问题，最终导致了Web应用的崛起。这是不是预示着手持设备上基于移动浏览器的Web应用的发展前景呢？事实上，基于移动浏览器的Web应用正在快速的发展，来自RWW的调查结果如下图所示，移动浏览器的Web应用（Mobile Touch Web sties）的增长速度远高于iPhone与Android应用。

\

\

基于移动浏览器的Web应用的迅猛发展也给Web开发者带来了不小的难题， 首先就是桌面浏览器与移动浏览器的事件机制的巨大区别——事件机制： 触摸事件与鼠标事件，单点事件与多点事件等等， 开发者需要针对手持设备浏览器设计的开发包。 同时，开发者也需要针对手机的小屏幕量身定制的界面控件库，搭建适合在手机上交互的Web应用。

\

针对开发者的这些需求，针对移动浏览器的Javascript开发包纷纷登场， 比如jQuery的jQTouch、Sencha（原Ext）的Sencha Touch。 Dojo也在1.5版本中推出了Dojox.mobile模块，Dojo Mobile框架是一套移动终端的Web应用开发框架，主要面向手持设备上的Web富客服端应用开发，提供了iPhone和Android两套主题，使得基于iPhone或者Android的Web应用具有手机本地应用的外观和效果，而同时也给了开发者更多的主导权，下面将基于dojo1.5版本，重点介绍dojo mobile框架。

\

Dojo Mobile功能结构介绍

\

以功能性来说，Dojo Mobile开发框架包含以下内容：

\

• 一个非常轻量级的控件解释器，仅针对mobile控件.\
• 在以WebKit为内核的浏览器上，大量使用CSS3实现与iPhone和Android本地程序类似的特效;同时也支持非WebKit内核的手机浏览器，使用dojo自带的dojo.animateProperty与dojox.gfx代替CSS3动画模拟特效.\
• 模拟iPhone和Android本地程序外观的CSS主题.\
• 一系列模拟iPhone或Android界面控件行为的控件， 移动设备上的界面控件外观和行为与传 统控件具有很大的不同，下一节会着重介绍Dojo Mobile中的控件库。\

Dojo Mobile控件库

\

在使用控件库之前，首先需要载入Dojo Mobile代码环境和相应的CSS主题。

\

加载Javascript

\

\dojo.require(\"dojox.mobile\"); \//加载为dojox.mobile定制的解析器，这里也可以载入dojo.parser，不过后者会载入更多的代码，所以在这里推荐使用dojox.mobile.parser. \dojo.require(\"dojox.mobile.parser\"); \//为内核不是WebKit的浏览器，加载兼容代码，使用Javascript代替实现CSS3的动画特效。 \dojo.requireIf(!dojo.isWebKit, \"dojox.mobile.compat\");

\

选择模拟手机平台外观的CSS主题，这里选择的是iPhone的界面风格：

\

\\u0026lt;style\u0026gt; \    \u0026lt;link rel=\"stylesheet\" type=\"text/css\" href=\"dojox/mobile/themes/iphone/iphone.css\"\u0026gt; \\u0026lt;/style\u0026gt;

\

View

\

View(视 图)是占据手机全屏页面的容器控件，一个HTML页面可以包含多个View，但是只有被标记为selected的View才会被显示。各个View之间的 导航只需要通过moveTo参数就可以实现。请看下面的“setting”视图与“hello”视图建立导航的例子:

\

\

关键代码如下：

\

\\u0026lt;!-- \"setting\"视图, 当前为被选中显示状态 --\u0026gt; \\u0026lt;div id=\"settings\" dojoType=\"dojox.mobile.View\" selected=\"true\"\u0026gt; \    \u0026lt;h1 dojoType=\"dojox.mobile.Heading\"\u0026gt;Settings\u0026lt;/h1\u0026gt; \    \u0026lt;ul dojoType=\"dojox.mobile.EdgeToEdgeList\"\u0026gt; \        \u0026lt;li dojoType=\"dojox.mobile.ListItem\"\u0026gt;Airplane Mode\u0026lt;/li\u0026gt; \        \u0026lt;li dojoType=\"dojox.mobile.ListItem\" moveTo=\"hello\"\u0026gt;Wi-Fi\u0026lt;/li\u0026gt; \    \u0026lt;/ul\u0026gt; \\u0026lt;/div\u0026gt; \\u0026lt;!-- \"hello\"视图，当前为隐藏视图 --\u0026gt; \\u0026lt;div id=\"hello\" dojoType=\"dojox.mobile.View\"\u0026gt; \    \u0026lt;h1 dojoType=\"dojox.mobile.Heading\"\u0026gt;Hello\u0026lt;/h1\u0026gt; \    \u0026lt;ul dojoType=\"dojox.mobile.EdgeToEdgeList\"\u0026gt; \        \u0026lt;li dojoType=\"dojox.mobile.ListItem\" moveTo=\"settings\"\u0026gt;Hello\u0026lt;/li\u0026gt; \        \u0026lt;li dojoType=\"dojox.mobile.ListItem\" moveTo=\"settings\"\u0026gt;Carrier\u0026lt;/li\u0026gt; \    \u0026lt;/ul\u0026gt; \\u0026lt;/div\u0026gt; \

\

同一个HTML中的View之间，通过moveTo参数建立了导航链接，十分方便直观。

\

Heading

\

Heading(标 题栏)是移动应用中非常典型的导航栏控件，一般来说，Heading位于当前视图的上方，显示视图的名称，在iPhone应用中还常常带有 ToolBarButton（工具栏按钮）. 下面的例子是一个包含导航键和工具栏按钮的典型iPhone风格的Heading：

\

\

代码如下，点击Bookmarks将导航到id为bookmarks的视图：

\

\\u0026lt;h1 dojoType=\"dojox.mobile.Heading\" label=\"News\" back=\"Bookmarks\" moveTo=\"bookmarks\"\u0026gt; \    \u0026lt;div dojoType=\"dojox.mobile.ToolBarButton\" label=\"Done\" class=\"mblColorBlue\" style=\"width:45px;float:right;\"\u0026gt;\u0026lt;/div\u0026gt; \\u0026lt;/h1\u0026gt; 

\

除了moveTo属性可以完成同一HTML中不同视图的跳转，Heading还提供了goTo(moveTo, href) 控制视图的跳转，goTo不但可以在本HTML页面中完成???图间的切换，而且还可以在不同的页面间进行跳转。

\

这里特别需要指出的是iPhone与Android应用中的标题栏是有比较大的区别的：iPhone应用中的Heading跟接近于工具栏, 会包含很多按钮；而传统的Android应用中Heading一般只包含当前视图的标题。下图是两者的区别：

\

iPhone：

\

\

Android：

\

\

Switch

\

Switch(开关)也是一个在iPhone应用中常见的控件，而在Android应用中一般使用Check Box来表示开关状态。在状态改变时将触发onClick与onStateChanged事件。

\

\

代码示例如下：

\

\\u0026lt;div id=\"switch\" dojoType=\"dojox.mobile.Switch\" value=\"on\" leftLabel=\"Start\" rightLabel=\"Stop\"\u0026gt;\u0026lt;/div\u0026gt; \... \\u0026lt;script\u0026gt; \    dojo.addOnLoad(function(){ \        dojo.connect(dijit.byId(\"switch\"),\"onStateChanged\