dojo mobile 学习1

近来学习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设计风格的控件。

原文链接：http://www.infoq.com/cn/articles/dojo-mobile