你有想过在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\