Dojo Mobile 控件初探

红薯 发布于 2011/08/23 23:01
阅读 2K+
收藏 10

你有想过在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的界面风格:

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

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框架中比较常用的控件,更多的内容有待大家深入挖掘发现。

原文转自:InfoQ

加载中
0
超级奶爸老谭
超级奶爸老谭
好东西,收藏了!
0
0
l
libinqq
现在流行的 UC浏览器 和 QQ 浏览器都不支持 Javascript ,web应用 甚是担忧!
0
国士无双
国士无双
支持, dojo确实比较强大
0
Junv
Junv

引用来自“libinqq”的答案

现在流行的 UC浏览器 和 QQ 浏览器都不支持 Javascript ,web应用 甚是担忧!
UC Mobile都支持这些。。
返回顶部
顶部