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 的界面风格：

 
<style> 
   <link rel="stylesheet" type="text/css" href="dojox/mobile/themes/iphone/iphone.css"> 
</style>

View

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

关键代码如下：

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

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

Heading

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

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

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

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

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

iPhone：

Android：

Switch

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

代码示例如下：

 
<div id="switch" dojoType="dojox.mobile.Switch" value="on" leftLabel="Start" rightLabel="Stop"></div> 
... 
<script> 
   dojo.addOnLoad(function(){ 
       dojo.connect(dijit.byId("switch"),"onStateChanged",function(state){ 
           // "Switch is now on/off" 
           console.log("Switch is now " + state); 
       } 
   }); 
</script> 

根据手机 UI 的设计模式，一般来说 Switch 控件和 Check Box 在列表中使用比较得当。

List

在 手机屏幕尺寸的限制下，列表已经成为手机应用中最常见的布局方式，dojo mobile 框架中当然也引入了列表控件：EdgeToEdge List 和 RoundRect List。两种列表控件都使用想同的列表项（dojox.mobile.ListItem）, 可能大家看到这两种列表的名称感觉有点诧异，不过相信看了下面的例子就容易理解了。

EdgeToEdget List： 每条列表项都是从左到右占满了屏幕

EdgeToEdge List 声明方式：

 
<ul dojoType="dojox.mobile.EdgeToEdgeList"> 
   <li dojoType="dojox.mobile.ListItem">......</li> 
   <li dojoType="dojox.mobile.ListItem">......</li> 
   ...... 
</ul>

RoundRect List： 一组列表项被包含在一个圆角矩形容器中

RoundRect List 的声明方法也与 EdgeToEdge List 如出一辙：

 
<ul dojoType="dojox.mobile.RoundRectList"> 
   <li dojoType="dojox.mobile.ListItem">......</li> 
   <li dojoType="dojox.mobile.ListItem">......</li> 
   ...... 
</ul>

ListItem

作为列表的单位，声明方式已在上文提及，这里主要介绍一下 ListItem 的比较重要的属性：

• rightText：在列表项的右侧显示文字也属于 iPhone 应用程序的风格，rightText 一般与跳转箭头同是出现，表示该列表项的子列表或者下一个视图。
• btnClass：列表项中不同的 Button 是由 btnClass 来决定的，在 dojox/mobile/themes/buttons.css 中，声明了添加按钮 (mblPlusButton)、删除按钮 (mblMinusButton)，以及勾选框按钮 (mblCheckButton).

Category

Category(目录) 也是手机应用中十分常见的内容分类控件，在同一个视图包含多个列表， 在手机本地应用中的联系人列表、手机功能设置等视图都用到了目录控件。下面是 dojo mobile 框架中的列表目录控件：

Category 作为列表的标题， 用法也很简单，只需要在列表之前声明即可：

 
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List One</h2> 
<ul dojoType="dojox.mobile.EdgeToEdgeList">......</ul> 
<h2 dojoType="dojox.mobile.EdgeToEdgeCategory">List Two</h2> 
<ul dojoType="dojox.mobile.EdgeToEdgeList">......</ul> 

TabContainer，TabPane 与 TabBar

TabContainer(选 项卡容器) 我们应该已经很熟悉了，与列表的搭配使用成为了手机应用程序的主流布局方式，不过在最新的 dojo1.6 中 TabBar 取代了 TabContainer 与 TabPane 的组合， dojo mobile 的开发者不建议继续使用 TabContainer 与 TabPane。当然，在界面和行为上来看 TabBar 与 TabContainer 并无二 致，如下图所示：

那么来看看两者的声明结构：

TabContainer：

 
<div dojoType="dojox.mobile.View" id="general" selected="true"> 
   <div dojoType="dojox.mobile.TabContainer"> 
       <div dojoType="dojox.mobile.TabPane" label="New"> 
           <ul dojoType="dojox.mobile.EdgeToEdgeList" id="list1"> 
       </div> 
       <div dojoType="dojox.mobile.TabPane" label="What's Hot"> 
       <ul dojoType="dojox.mobile.EdgeToEdgeList" id="list2"> 
       </div> 
       <div dojoType="dojox.mobile.TabPane" label="Genius"> 
           <ul dojoType="dojox.mobile.EdgeToEdgeList" id="list3"> 
       </div> 
   </div> 
</div> 

原先的 TabContainer 的结构与 dojo 控件库 dijit 中的 TabContainer 如出一辙：TabContainer 下包含多个 TabPane，在 TabPane 中包含列表，。而在手机中，这些列表作为内容主体被 TabContainer 所封闭，不能被 TabContainer 以 外的控件连接导航。这与 dojo mobile 提倡的视图切换思想不符，再来看看 TabBar 的声明结构：

 
<ul dojoType="dojox.mobile.TabBar" barType="segmentedControl"> 
   <li dojoType="dojox.mobile.TabBarButton" moveTo="view1" selected="true">New</li> 
   <li dojoType="dojox.mobile.TabBarButton" moveTo="view2">What's Hot</li> 
   <li dojoType="dojox.mobile.TabBarButton" moveTo="view3">Genius</li> 
</ul> 
<div id="view1" dojoType="dojox.mobile.View" selected="true"> 
   <ul dojoType="dojox.mobile.EdgeToEdgeList" id="list1">......</ul> 
</div> 
<div id="view2" dojoType="dojox.mobile.View"> 
   <ul dojoType="dojox.mobile.EdgeToEdgeList" id="list2">......</ul> 
</div>
<div id="view3" dojoType="dojox.mobile.View"> 
   <ul dojoType="dojox.mobile.EdgeToEdgeList" id="list3">......</ul> 
</div> 

各个列表都被放在视图之中，TabBar 仅仅作为一个导航栏放在页面顶端，使用 moveTo 来切换对应的视图，外部的控件仍然可以导航到这些视图。从控件间松耦合的角度，来看 TabBar 的确是更适合 dojo mobile 设计风格的控件。

结语

移动网络正处在一个高速发展的时期，Web 应用也开始在手持设备上占据主流。开发者需要一个提供标准界面、兼容大部分移动浏览器的开发框架来加速开发工 作，Dojo Mobile 是一个很好的选择，而且 Dojo Mobile 正在不断地完善，在最新发布的 Dojo1.6 中，Mobile 框架又有了大幅改进： 增强了对于手机触摸事件支持，添加加了新的控件。本文介绍了 Dojo Mobile 框架中比较常用的控件，更多的内容有待大家深入挖掘发现。

参考资料：

• Dojo 中文博客
• Dojo 开发文档