1
回答
使用 Dojo Mobile 为 iOS 智能终端开发 Native-like Web 应用
华为云实践训练营,热门技术免费实践!>>>   

简介

iOS 是 Apple 公司为 iPhone、iPod Touch、iPad 以及 iTV 等系列数码产品推出的一套基于 Mac OS X 并高度定制化的操作系统。随着这些数码产品的日益普及,越来越多的开发者加入到为其编写应用的队伍中来,iOS 应用数量也在以井喷似的速度增长着。

目前,iOS 主要提供了两种应用程序开发范式:原生应用(Native Application)和 Web 应用(Web Application)。两种方式的主要区别在于所基于的运行平台不同。原生应用是基于 iOS 系统之上开发的,因此这类程序直接调用系统提供的众多功能丰富的 API,可以利用诸如多点触摸(Multi-touch)、传感器感知(Sensing)等多种 iOS 特性,并享受其带来的功能和性能上好处。而 Web 应用则是完全基于 iOS 系统的 Mobile Safari 浏览器进行开发的,同样可以享受 iOS 的一些系统特性(但相对原生应用要少一些),并可以充分利用浏览器和 Web 所带来的诸多独特优势(无客户端、随时更新、安全沙箱运行等)。

尽管目前在最流行的 AppStore 上全部是原生应用(据说已经突破 30 万个),但以 Google、Facebook 等为代表的 Web 2.0 厂商已经开始努力尝试将他们的流行应用(如:Google Reader,Gmail,Facebook 等)以 Web 应用的形式在智能终端上发布,而且这种趋势正在快速发展着(见图 1)。


图 1. 左图是桌面版 Google Reader,右图是 iPhone 版 Google Reader
图 1. 左图是桌面版 Google Reader,右图是 iPhone 版 Google Reader

对比图 1 的两个应用,我们可以看出 Google、Facebook 为这些应用提供了类似桌面版但又针对终端设备特点优化的 UI 风格,使得原有这些的用户可以比较平滑地过渡到移动版应用上来。但这种风格毕竟与 iOS 应用的原生风格有较大区别,且由于各厂商风格并不统一,不便于一般用户学习和使用。我们希望在 iOS 的浏览器中开发出类似原生应用观感(Look & Feel)的 Web 应用,并借助 iOS 的 UI 最佳实践,实现两种应用用户体验的平滑过渡,使 Web 应用用户可以获得和原生应用类似的操作体验。我们称这种风格的应用为 Native-like Web 应用。

开发 Native-like Web 应用的特点及难点

Native-like Web 应用本质上仍然是 Web 应用,所以开发门槛很低,不需要了解复杂的 Objective-C 语言及相关开发工具,只需要使用 HTML/CSS/JavaScript 再加上自己喜欢的编辑器(甚至是记事本程序或 vi 编辑器)就可以编写应用了。但是由于 Mobile Safari 以及 iOS 设备操作的特殊性,开发 Native-like Web 应用与开发传统 Web 应用相比还是有许多不同之处。

视区(Viewport)、翻转与缩放

视区是开发 iOS 下 Web 应用需要了解的基本概念。它指的是呈现网页的一个“虚拟窗口”。视区有一些自己的属性:

  1. width

    指定视区的宽度(单位:像素)。默认值为 980。最小值为 200,最大值为 10000。如果设置为 device-width 这个常量,则将视区宽度限定为与访问设备的显示宽度相同。

  2. height

    指定视区的宽度(单位:像素)。默认值为页面的高度。最小值为 223,最大值为 10000。如果设置为 device-height 这个常量,则视区宽度指定为与访问设备的显示高度相同。

  3. initial-scale

    指定初始的页面缩放比例。默认值为 1.0。最小值为 minimum-scale 设置的值,最大值为 maximum-scale 设置的值。

  4. minimum-scale

    指定最小的页面缩放比例。默认值为 0.25。最小值为某个大于 0 的值,最大值为 10.0。

  5. maximum-scale

    指定最大的页面缩放比例。默认值为 1.6。最小值为某个大于 0 的值,最大值为 10.0。

  6. user-scalable

    指定是否允许用户进行页面缩放操作。默认值为 yes。

因为我们知道,iOS 的设备一般的分辨率都比较低(远远低于目前主流的桌面显示器),以 iPhone 为例,典型的分辨率为 320x480 像素(Portrait 模式)。所以,Native-like Web 应用需要通过 HTML 的 meta 标记设置视区各个属性:

 <!-- 设置应用的视图属性,禁止缩放和滚动 --> 
 <metaname="viewport" content="width=device-width,initial-scale=1,
 maximum-scale=1,minimum-scale=1,user-scalable=no"/> 

上述设置保证在任何情况下,用户无法缩放页面(通过 scale 相关属性),也不会横向滚动(通过 width=device-width),并且如果发生了翻转(从 Portrait 模式变为 Landscape 模式),Mobile Safari 会自动刷新页面,此时 device-width 和 device-height 的值交换,视区的宽度也随之变化。

面向手指的事件(Finger-oriented Events)

iOS 的输入方式是面向手指而不是面向鼠标,两者虽然有许多相同事件(如:onclick),但由于 iOS 设备交互方式的特殊性,许多事件都是手指操作所特有的(如:Touch,Gesture 等事件),另外还有一些常见的事件或不支持(如:ondblclick),或发生了改变 (如:onmousedown,onmousemove,onmouseup)。因此,常见的拖拽操作在 iOS 上就不能通过以往 onmousedown+onmousemove+onmouseup 来实现,而要改用 Touch 事件。在开发 Native-like Web 应用时这些变化需要格外注意。

Touch 事件指单个手指触摸屏幕的事件。Touch 事件的顺序依次为 ontouchstart, ontouchmove,ontouchend,ontouchcancel。在 DOM 结点上按如下方式注册 Touch 事件:

<div ontouchstart="touchStart(event);" ontouchmove="touchMove(event);" 
 ontouchend="touchEnd(event);" ontouchcancel="touchCancel(event);"></div> 
也可以通过 JavaScript 的 addEventListener 来注册 Touch 事件:
element.addEventListener("touchstart", touchStart, false);// 注册接收 touchstart 事件
element.addEventListener("touchmove", touchMove, false); // 注册接收 touchmove 事件
element.addEventListener("touchend", touchEnd, false); // 注册接收 touchend 事件
element.addEventListener("touchcancel", touchCancel, false); // 注册接收 touchcancel 事件

Gesture 事件指由两个或多个 Touch 事件形成的组合事件。Gesture 事件的顺序依次为 ongesturestart, ongesturechange, ongestureend。事件的注册方式与 Touch 类似。

在为 Touch/Gesture 事件编写自己的代码时,一般需要使用下面的代码关闭 Mobile Safari 的默认行为,以阻止诸如屏幕滚动、缩放等系统内置默认的动作。

 function touchStart(e) { 
	 e.preventDefault();// 阻止默认运作
 } 

动画(Animation)与效果(Effect)

原生应用中大量运用了动画。动画运用的好处绝不仅仅是为了使应用显得酷,更重要的是能在画面变化时提供必要的上下文信息,从而使用户体验更加 自然流畅。所以,开发 Native-like Web 应用时适当地运用动画必不可少。此外,iOS 应用了大量细腻的 UI 效果,比如:圆角框(round rect),渐进(gradient),阴影(shadow)等等。幸运的是,这些效果在 Mobile Safari 上都有很好地支持。

浏览器

原生应用是可以直接打开运行的,但 Web 应用都是要从浏览器中输入网址打开后运行,而且顶部和底部还会分别显示着地址栏和工具栏。这对于 Native-like Web 应用来说其实是多余的,因为 Native-like Web 应用是需要自包含的,不会借助浏览器地址栏的导航功能,更不会需要工具栏中的其他功能。因此我们希望可以像原生应用那样在主屏幕上为 Web 应用生成一个图标直接运行,没有地址栏和工具栏。其实这方面 Mobile Safari 已经提供了相应的支持。只要在我们的页面中加入下面的 meta 标签,并在第一次访问应用时将其“添加到主屏幕”(见图 2),就可以通过点击主屏幕上的图标以全屏模式启动应用。

<!-- 设置应用以 WebApp 全屏模式启动 -->

<meta name="apple-mobile-web-app-capable" content="yes" />

而添加下面的 link 标签后,图标会自动用 href 指定的图标替代。iOS 会缺省认为图标的大小为 57x57 像素,并自动为图标加上光影效果。如果要禁止 iOS 自动加光影效果,rel 可以用 apple-touch-icon-precomposed 替代。

 <!-- 设置应用的图标 --> 
 <link rel=”apple-touch-icon”href=”myicon.png” /> 

如果需要支持不同屏幕分辨率(如 iPhone 4 或 iPad)的图标,可以添加并指定 sizes,这样 iOS 会根据屏幕的大小自动选择最合适的图标。
 <!-- 设置应用 72x72 尺寸图标 --> 
 <link rel="apple-touch-icon" sizes="72x72" href="myicon-ipad.png" /> 
 <!-- 设置应用 114x114 尺寸图标 --> 
 <link rel="apple-touch-icon" sizes="114x114" href="myicon-iphone4.png" />

图 2. 将 Web 应用添加到 iOS 桌面
Figure xxx. Requires a heading

iOS 内置的 UI 组件

iOS 为原生应用的开发提供了一套风格独特的内置 UI 组件,其直观、易用、功能强大的特点吸引了一大批用户的喜爱。图 3 以 iPhone 为例,展示了几种常见的 UI 组件。

图 3. iOS 特色 UI 组件:Tab, Switch, List 等
图 3. iOS 特色 UI 组件:Tab, Switch, List 等

Figure xxx. Requires a heading

遗憾的是,这些优秀的 UI 组件在 iOS 下的 Mobile Safari 浏览器中是无法使用的。为了实现这种仿真的效果,我们当然可以自己实现,但更好的方法是借助第三方的 UI 开发框架。Dojo Mobile 为我们提供了这方面良好支持和实现。

Dojo Mobile:Dojo 提供的解决方案

Dojo Mobile 是从 Dojo Toolkit 1.5 开始提供的一套用于开发智能终端上 Web 应用程序的 UI 组件库。Dojo Mobile 是由两个移动 Web 开发框架(Embeded JS & Wink Toolkit)整合而成的,是一套集大成之作。

Dojo Mobile 不但能提供对 iOS 的支持,而且可以通过更换 CSS 主题(Theme),较好地支持 Android,在未来还可能会支持诸如 Blackberry, Palm Pre 等多种设备。Dojo Mobile 提供了良好地浏览器探测能力,可以识别并最大限度的应用 iOS 中 Safari 的特性(如 HTML5, CSS3 等),从而提供了较好的图形显示性能和效果。Dojo Mobile 完全基于 Dojo 的架构设计,易用性非常好,只要对稍稍掌握一些 Dojo 开发的基础知识,就可以很容易使用 Dojo Mobile 进行开发。

设置页面视区、图标、主题及组件引用

首先按本文上面所介绍的,在 <head> 中定义视区和图标并指定 iPhone CSS 主题。接着,添加所需的 dojox.mobile 的组件引用。

清单 1.Dojo Mobile 组件引用和 CSS 主题设置

 <meta name="viewport" content="width=device-width,initial-scale=1,
 maximum-scale=1,minimum-scale=1,user-scalable=no"/> 
 <meta name="apple-mobile-web-app-capable" content="yes" /> 
 <link href="../themes/iphone/iphone.css" rel="stylesheet"></link> 
 <link rel=”apple-touch-icon”href=”myicon.png” /> 
 <link rel="apple-touch-icon" sizes="72x72" href="myicon-ipad.png" /> 
 <link rel="apple-touch-icon" sizes="114x114" href="myicon-iphone4.png" /> 

 <script type="text/JavaScript" src="../dojo/dojo.js" 
 djConfig="parseOnLoad: true"></script> 
 <script language="JavaScript" type="text/JavaScript"> 
	 dojo.require("dojox.mobile.parser");// 引用 Dojo Mobile 优化的 Parser 
	 dojo.require("dojox.mobile");// 引用 Dojo Mobile 
 </script> 

主要提供的 UI 组件

View、ScrollableView 和 FlippableView

View 是 dojox.mobile 中最基本的 UI 容器,其作用是包含并表现某个可见 UI 视图区域的内容。View 也可以嵌套使用,一个 HTML 页面中一般会包含一个或多个 View,每一个 View 包含一些 UI 子组件(包括 View)以构成一个相对完整的 UI 功能。同一时刻同一层次只能有一个 View 是可见的(Visible)。需要指出的是,HTML 标签自身的 id 属性是 View 的唯一标识,接下来的许多 UI 组件都用 id 属性来操纵 View。View 有下列几个属性和事件:


表 1. View 属性和事件
属性 类型 描述 默认值
selected 布尔型 表示当前 View 是否为可见的 false
keepScrollPos 布尔型 表示当前 View 的滚动位置在切换之后是否保持不变 true
onStartView 事件 当前 View 选中并变为可见时触发该事件 N/A
onBeforeTransitionIn 事件 当前 View 被切换为可见之前触发该事件 N/A
onAfterTransitionIn 事件 当前 View 被切换为可见之后触发该事件 N/A
onBeforeTransitionOut 事件 当前 View 被切换为非可见之前触发该事件 N/A
onAfterTransitionOut 事件 当前 View 被切换为非可见之后触发该事件 N/A

下面代码可以显示一个 View(见图 4):

清单 2. View 的示例

 <!-- 显示一个 View,并设置为可见 --> 
 <div id=”view1”dojoType=”dojox.mobile.View” selected=”true”> 
	 <span>My First View</span> 
 </div> 

图 4.View 的示例
图 4.View 的示例

ScrollableView 是 View 的一个子类,在 View 的基础上加上了“滚动(Scroll)”的支持。用户可以通过手指向上 / 下滑动 ScrollableView,从而在一个 View 之中滚动显示多于一屏的内容。ScrollableView 除了 View 自身的属性以外,还有下列几个属性:


表 2.ScrollableView 属性和事件
属性 类型 描述 默认值
scrollBar 布尔型 表示是否显示滚动条 true
scrollDir 字符串型 表示显示哪几个方向的滚动条(v 代表垂直方向,h 代表水平方向,vh 代表两者都显示) v
fadeScrollBar 布尔型 表示是否动画显示 / 隐藏滚动条 true
disableFlashScrollBar 布尔型 表示是否禁止滚动条在 View 显示出来后闪烁 false

下面代码可以显示一个 ScrollableView(见图 5):

清单 3. 图 5.ScrollableView 的示例

 <!-- 显示一个 ScrollableView,并设置为可见 --> 
 <div id=”view1”dojoType=”dojox.mobile.ScrollableView” selected=”true”> 
	 <span>My First ScrollableView</span> 
	 <ul style="font-size: 40px;"> 
		 <li>The 1st Line</li> 
		 <li>The 2nd Line</li> 
		 <li>The 3rd Line</li> 
		 <li>The 4th Line</li> 
		 <li>The 5th Line</li> 
		 <li>The 6th Line</li> 
		 <li>The 7th Line</li> 
		 <li>The 8th Line</li> 
		 <li>The 9th Line</li> 
	 </ul> 
 </div> 

图 5.ScrollableView 的示例
Figure xxx. Requires a heading

需要指出的是,ScrollableView 的滚动是发生在其内部(ScrollableView 针对这个进行了特殊处理),而不是浏览器对网页的滚动。当 ScrollableView 的内容不足以发生滚动时,其效果与 View 相似。

FlippableView 也是 View 的一个子类,在 View 的基础上加上了“拉动(Flip)”的支持。用户可以通过手指向左 / 右滑动 FlippableView,从而在不同 FlippableView 之间水平切换。FlippableView 除了 View 自身的属性以外,没有特殊的属性。需要指出的是,当水平拉动 FlippableView 后,其邻近的 FlippableView 会被自动选择并显示为可见。

下面代码展现了两个 FlippableView,通过“拉动”进行切换(见图 6):

清单 4. FlippableView 的示例

 <!-- 显示两个 FlippableView,第一个设置为可见,第二个背景设置为白色以示区别 --> 
 <div id="view1" dojoType="dojox.mobile.FlippableView" selected="true"> 
	 <span>My First FlippableView</span> 
 </div> 
 <div id="view2" dojoType="dojox.mobile.FlippableView" style="background: white;"> 
	 <span>My Second FlippableView</span> 
 </div> 

图 6.FlippableView 的示例
图 6.FlippableView 的示例

Heading 和 ToolBarButton

Heading 是一种负责显示 iOS 风格标题和工具栏的 UI 组件。Heading 有几个常用属性:


表 3.Heading 属性
属性 类型 描述 默认值
back 字符串型 表示显示在回退按钮上的标签
label 字符串型 表示显示在 Heading 中的标题,如果未指定,Heading 则自动取 innerHTML 的值
moveTo 字符串型 表示点击回退按钮后跳转到的 View 的 id
href 字符串型 表示点击回退按钮后跳转到的 URL(一般较少使用)
transition 字符串型 表示动画的显示类型,目前支持“slide”,“fade”,“flip”或“none”几种类型 slide

下面代码可以显示两个 View,他们各有一个 Heading,通过 Heading 上的回退按钮进行切换(见图 7):

清单 5. Heading 的示例 1

 <!-- 显示两个 View 和 Heading,每个 Heading 上都有回退按钮 --> 
 <div id="view1" dojoType="dojox.mobile.View" selected="true"> 
	 <div dojoType="dojox.mobile.Heading" back="View 2"
 label="View 1" moveTo="view2"></div> 
	 <span style="font-size: 24px;">This is the First View</span> 
 </div> 
 <div id="view2" dojoType="dojox.mobile.View"> 
	 <div dojoType="dojox.mobile.Heading" back="View 1"
 label="View 2" moveTo="view1"></div> 
	 <span style="font-size: 24px;">This is the Second View</span> 
 </div> 

图 7.Heading 的示例 1
图 7.Heading 的示例 1

Heading 作为工具栏容器,还可以包含多个其他 UI 组件,最常见的有 ToolBarButton。ToolBarButton 有如下的常用属性:


表 4.ToolbarButton 的属性
属性 类型 描述 默认值
moveTo 字符串型 表示点击按钮后跳转到的 View 的 id
transition 字符串型 表示动画的显示类型,目前支持“slide”,“fade”,“flip”或“none”几种类型 slide

下面代码生成两个 View,在 Heading 中添加两个 ToolBarButton,其中一个点击 Info 图标后以 slide 的动画方式跳转到另一个 view2,点击 Done 后停留在 view1(见图 8):

清单 6. Heading 的示例 2

 <!-- 显示一个 Heading,Heading 上设置有两个 ToolBarButton,点击可以切换显示不同的 View --> 
 <div dojoType="dojox.mobile.Heading" label="Header"> 
	 <div dojoType="dojox.mobile.ToolBarButton" icon="images/a-icon-12.png" 
 transition="slide" moveTo="view2"></div> 
	 <div dojoType="dojox.mobile.ToolBarButton" label="Done" 
 class="mblColorBlue" transition="fade" style="width:45px;float:right;" 
 moveTo="view1"></div> 
 </div> 
 <div id="view1" dojoType="dojox.mobile.View" selected="true"> 
	 <span style="font-size: 36px;">This is the First View</span> 
 </div> 
 <div id="view2" dojoType="dojox.mobile.View"> 
	 <span style="font-size: 36px;">This is the Second View</span> 
 </div> 

图 8.Heading 的示例 2
图 8.Heading 的示例 2

TabBar 和 TabBarButton

TabBar 是 Dojo Mobile 中非常酷的一套 UI 组件,可以非常容易地实现 iOS 风格的两种 Tab 界面。TabBar 作为 UI 组件的容器,其中可以包含多个 TabBarButton。需要指出的是,在旧的 Dojo Mobile 版本中还提供一种 TabContainer 和 TabPane 的 UI 组件,但现在已经不推荐使用了,而是用 TabBar 和 TabBarButton 相应代替。TabBar 有如下的常用属性:


表 5.TabBar 的属性
属性 类型 描述 默认值
barType 字符串型 表示 TabBar 的类型,目前支持“tabBar”和“segmentedControl”两种类型 tabBar
inHeading 布尔型 表示是否包含在 Heading 组件中显示,如果是 (true),那么自动进行一些 UI 细节的调整 false
iconBase 字符串型 表示包含的 TabBarButton 缺省图标文件
iconPos 字符串型 表示缺省的子图标所在的子图(Sprite)位置,格式为“x,y,width,height”

TabBarButton 有如下的常用属性:


表 6.TabBarButton 的属性
属性 类型 描述 默认值
selected 布尔型 表示当前 TabBarButton 是否是“选中”状态 false
selectOne 布尔型 表示当前 TabBarButton 选中后是否处于“按压”状态 true
icon1 字符串型 表示 TabBarButton 中“正常”状态的图标文件 TabBar 的 iconBase 值
icon2 字符串型 表示 TabBarButton 中“选中”状态的图标文件 TabBar 的 iconBase 值
iconPos1 字符串型 表示“正常”图标所在的子图(Sprite)位置,格式为“x,y,width,height” TabBar 的 iconPos 值
iconPos2 字符串型 表示“选中”图标所在的子图(Sprite)位置,格式为“x,y,width,height” TabBar 的 iconPos 值

下面的代码显示了一个 barType 为“segmentedControl”的 TabBar,其中有 3 个 Tab,点击 Tab 会自动切换到相应的 View(见图 9):

清单 7:TabBar 的示例 1(segmentedControl 类型)

 <!-- 显示一个 TabBar,其中包含 3 个 segmentedControl 类型的 Tab --> 
 <ul dojoType="dojox.mobile.TabBar" barType="segmentedControl"> 
	 <li dojoType="dojox.mobile.TabBarButton" selected="true" moveTo="new">New</li> 
	 <li dojoType="dojox.mobile.TabBarButton" moveTo="hot">What's Hot</li> 
	 <li dojoType="dojox.mobile.TabBarButton" moveTo="genius">Genius</li> 
 </ul> 
 <div id="new" dojoType="dojox.mobile.ScrollableView" selected="true"> 
	 This is New View 
 </div> 
 <div id="hot" dojoType="dojox.mobile.ScrollableView"> 
	 This is What's Hot View 
 </div> 
 <div id="genius" dojoType="dojox.mobile.ScrollableView"> 
	 This is Genius View 
 </div> 

图 9.TabBar 的示例 1(segmentedControl 类型)
图 9.TabBar 的示例 1(segmentedControl 类型)

下面的代码显示了一个 barType 为“tabBar”的 TabBar,其中有 4 个 Tab,点击 Tab 会自动切换到相应的 View(见图 10):

清单 8:TabBar 的示例 2(tabBar 类型)

 <!-- 显示一个 TabBar,其中包含 4 个 tabBar 类型的 Tab --> 
 <div id="message" dojoType="dojox.mobile.ScrollableView" selected="true"> 
	 This is Message View 
 </div> 
 <div id="mail" dojoType="dojox.mobile.ScrollableView"> 
	 This is Mail View 
 </div> 
 <div id="contact" dojoType="dojox.mobile.ScrollableView"> 
	 This is Contact View 
 </div> 
 <div id="about" dojoType="dojox.mobile.ScrollableView"> 
	 This is About View 
 </div> 
 <ul dojoType="dojox.mobile.TabBar" fixed="bottom"> 
	 <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-16.png" 
 icon2="images/tab-icon-16h.png" selected="true" moveTo="message">Message</li> 
	 <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-14.png" 
 icon2="images/tab-icon-14h.png" moveTo="mail">Mail</li> 
	 <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-13.png" 
 icon2="images/tab-icon-13h.png" moveTo="contact">Contact</li> 
	 <li dojoType="dojox.mobile.TabBarButton" icon1="images/tab-icon-12.png" 
 icon2="images/tab-icon-12h.png" moveTo="about">About</li> 
 </ul> 

图 10.TabBar 的示例 2(tabBar 类型)
图 10.TabBar 的示例 2(tabBar 类型)

RoundRect,RoundRectCategory,RoundRectList

RoundRect 提供了一种 iOS 风格的列表 UI 组件(支持圆角、阴影等)。RoundRectCategory 可以显示分类组的名称。RoundRect 只有一个属性:


表 7. RoundRect 的属性
属性 类型 描述 默认值
shadow 布尔型 表示是否在区域周围显示阴影 false

RoundRectCategory 也只有一个属性:


表 8. RoundRectCategory 的属性
属性 类型 描述 默认值
label 字符串型 表示 RoundRectCategory 显示的标题,如果未指定,则自动取 innerHTML 的值

下面代码用一个简单的 RoundRect 显示一段文字以及标题,周围加上了阴影效果(见图 10):

清单 9:RoundRect 的示例 1

 <!-- 显示一个 RoundRectCategory 和 RoundRect --> 
 <h1 dojoType="dojox.mobile.RoundRectCategory">My RoundRect Demo - Single</h1> 
 <div dojoType="dojox.mobile.RoundRect" shadow="true"> 
	 This is a demo which shows how to use RoundRect widget. 
 </div> 

图 10.RoundRect 的示例 1
图 10:RoundRect 的示例 1

RoundRectList 提供了一种类似 iOS“设置”中那种 UI 风格的功能。RoundRectList 本身是一种特殊的容器,里面包含多个 ListItem 组件。ListItem 组件不仅可以用于 RoundRectList,还可以用于后面介绍的 EdgeToEdgeList。ListItem 提供了一些属性和事件:


表 8. ListItem 的属性
属性 类型 描述 默认值
selected 布尔型 表示当前 ListItem 是否为“选中”状态 false
rightText 字符串型 表示在右侧显示的文字
anchorLabel 布尔型 表示是否支持标签锚点的 Click 事件 false
onAnchorLabelClicked 事件 当标签锚点被 Click 时触发该事件

此外,ListItem 自身也可以作为容器,包含其他一些组件。常见的可以包含一个 Switch 组件,用于在两个值(如:On/Off)之间进行切换。Switch 提供了一些属性和事件:


表 9. Switch 的属性
属性 类型 描述 默认值
value 字符串型 表示当前 Switch 的状态,左侧为 on,右侧为 off on
leftLabel 字符串型 表示在左侧显示的文字 ON
rightLabel 字符串型 表示在右侧显示的文字 OFF
onStateChanged 事件 当 Switch 状态发生改变时触发该事件,参数为改变后的状态

下面的代码综合了上面的内容,展现了 RoundRectList 有趣的用法(见图 11):

清单 10. RoundRect 的示例 2

 <!-- 显示一个 RoundRectList,每个 ListItem 都有不同的风格 --> 
 <div id="mainView" dojoType="dojox.mobile.View" selected="true"> 
	 <h1 dojoType="dojox.mobile.Heading">My RoundRect Demo</h1> 
	 <h2 dojoType="dojox.mobile.RoundRectCategory">RoundRect</h2> 
	 <ul dojoType="dojox.mobile.RoundRectList"> 
		 <li id="item1" dojoType="dojox.mobile.ListItem" 
		 icon="images/i-icon-1.png" 
		 rightText="Text 1" moveTo="subView">Entry 1</li> 
		 <li id="item2" dojoType="dojox.mobile.ListItem" 
		 icon="images/i-icon-2.png"> 
			 Entry 2 
			 <div class="mblItemSwitch" 
			 dojoType="dojox.mobile.Switch" value="on" 
			 leftLabel="On" rightLabel="Off"></div> 
		 </li> 
		 <li id="item3" dojoType="dojox.mobile.ListItem" 
		 icon="images/i-icon-3.png" 
		 moveTo="subView">Entry 3</li> 
		 <li id="item4" dojoType="dojox.mobile.ListItem" 
		 class="mblVariableHeight"> 
			 <h2>Entry 4</h2> 
			 <span>This is some description</span> 
			 <br /> 
			 <a href="JavaScript:alert('Entry 4')">Click here</a> 
		 </li> 
	 </ul> 
 </div> 
 <div id="subView" dojoType="dojox.mobile.View"> 
	 <h1 dojoType="dojox.mobile.Heading" back="Back" moveTo="mainView">Entry</h1> 
	 <span>This is a sub entry</span> 
 </div> 

图 12. RoundRect 的示例 2
图 12. RoundRect 的示例 2

EdgeToEdgeList 和 EdgeToEdgeCategory

EdgeToEdgeList 也提供一种特殊的列表展现方式。不同的是,风格类似于 iOS 中“联系人”列表(无圆角或阴影,宽度与屏幕宽度相等)。EdgeToEdgeCategory 用来显示分类组的名称。EdgeToEdgeList 中可以包含多个 ListItem,ListItem 会自动按照 EdgeToEdgeList 的风格显示。一般来说,将 EdgeToEdgeList 放到一个 ScrollableView 中一个不错的选择。下面的代码一个 EdgeToEdgeList 应用的示例(见图 12):

清单 11. EdgeToEdgeList 的示例

 <!-- 显示一个 EdgeToEdgeList,用 EdgeToEdgeCategory 显示两个组别,每个组别中包含几个 ListItem--> 
 <h1 dojoType="dojox.mobile.Heading">My EdgeToEdge List</h1> 
 <div id="mainView" dojoType="dojox.mobile.ScrollableView" selected="true"> 
	 <h2 dojoType="dojox.mobile.EdgeToEdgeCategory">Family</h2> 
	 <ul dojoType="dojox.mobile.EdgeToEdgeList"> 
		 <li dojoType="dojox.mobile.ListItem">Darling</li> 
		 <li dojoType="dojox.mobile.ListItem">Mum</li> 
		 <li dojoType="dojox.mobile.ListItem">Dad</li> 
	 </ul> 
	 <h2 dojoType="dojox.mobile.EdgeToEdgeCategory">Friends</h2> 
	 <ul dojoType="dojox.mobile.EdgeToEdgeList"> 
		 <li dojoType="dojox.mobile.ListItem">Tom</li> 
		 <li dojoType="dojox.mobile.ListItem">Jerry</li> 
	 </ul> 
 </div> 

图 13.EdgeToEdgeList 的示例
图 13.EdgeToEdgeList 的示例

结束语

Dojo Mobile 为基于 iOS 之上开发 Native-like 的 Web 应用提供了许多的 UI 组件,可以帮助我们开发出与原生应用风格统一的 Web 应用。Dojo Mobile 作为 DojoX 系列组件中的一部分,其本身也在不断完善和发展着,相信随着版本的不断增加,会为 Web 开发人员越来越多好用实用的 iOS 风格 UI 组件。

文章转自:IBM developerWorks

举报
IBMdW
发帖于6年前 1回/1K+阅
顶部