使用使用 Dojo Mobile 为为 iOS 智能终端开发智能终端开发 Native- like Web 应用应用 杨 扬, 软件工程师, IBM 简介：简介： 随着 iOS 智能终端的流行，基于 iOS 开发 Native- like Web 应用变得越来越流行。本文着重介绍基于 Dojo Mobile 开发 Native- like Web 应用的 方法，并分享一些开发经验和技巧。 标记本文！ 发布日期：发布日期： 2011 年 9 月 14 日 级别：级别： 中级 访问情况访问情况 370 次浏览 简介 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、Facebook 为这些应用提供了类似桌面版但又针对终端设备特点优化的 UI 风格，使得原有这些的用户可以比较平滑地过渡到移动版应用上来。但这种风格毕竟与 iOS 应用的原生风格有较大区别，且由于各厂商风格并不统一，不便于一般用户学习和使用。 我们希望在 iOS 的浏览器中开发出类似原生应用观感（Look / 注册接收 touchstart 事件 element.addEventListener(“touchmove“, touchMove, false); / 注册接收 touchmove 事件 element.addEventListener(“touchend“, touchEnd, false); / 注册接收 touchend 事件 element.addEventListener(“touchcancel“, touchCancel, false); / 注册接收 touchcancel 事件 function touchStart(e) e.preventDefault();/ 阻止默认运作 页码，2/14自然流畅。所以，开发 Native- like Web 应用时适当地运用动画必不可少。此外，iOS 应用了大量细腻的 UI 效果，比如：圆角框（round rect），渐进 （gradient），阴影（shadow）等等。幸运的是，这些效果在 Mobile Safari 上都有很好地支持。 浏览器浏览器 原生应用是可以直接打开运行的，但 Web 应用都是要从浏览器中输入网址打开后运行，而且顶部和底部还会分别显示着地址栏和工具栏。这对于 Native- like Web 应用来说其实是多余的，因为 Native- like Web 应用是需要自包含的，不会借助浏览器地址栏的导航功能，更不会需要工具栏中的其他 功能。因此我们希望可以像原生应用那样在主屏幕上为 Web 应用生成一个图标直接运行，没有地址栏和工具栏。其实这方面 Mobile Safari 已经提供了相应的支持。只要在我们的页面中加入下面的 meta 标签，并在第一次访问应用时将其“添加到主屏幕”（见图 2），就可以通过点击主屏幕上的图标 以全屏模式启动应用。 而添加下面的 link 标签后，图标会自动用 href 指定的图标替代。iOS 会缺省认为图标的大小为 57x57 像素，并自动为图标加上光影效果。如果要禁止 iOS 自动加光影效果，rel 可以用 apple- touch- icon- precomposed 替代。 如果需要支持不同屏幕分辨率（如 iPhone 4 或 iPad）的图标，可以添加并指定 sizes，这样 iOS 会根据屏幕的大小自动选择最合适的图标。 图图 2. 将将 Web 应用添加到应用添加到 iOS 桌面桌面 回页首 iOS 内置的 UI 组件 iOS 为原生应用的开发提供了一套风格独特的内置 UI 组件，其直观、易用、功能强大的特点吸引了一大批用户的喜爱。图 3 以 iPhone 为例，展示了几种常见的 UI 组件。 图图 3. iOS 特色特色 UI 组件：组件：Tab, Switch, List 等等 页码，3/14遗憾的是，这些优秀的 UI 组件在 iOS 下的 Mobile Safari 浏览器中是无法使用的。为了实现这种仿真的效果，我们当然可以自己实现，但更好的方法是 借助第三方的 UI 开发框架。Dojo Mobile 为我们提供了这方面良好支持和实现。 回页首 Dojo Mobile：Dojo 提供的解决方案 Dojo Mobile 是从 Dojo Toolkit 1.5 开始提供的一套用于开发智能终端上 Web 应用程序的 UI 组件库。Dojo Mobile 是由两个移动 Web 开发框架 （Embeded JS / 引用 Dojo Mobile 优化的 Parser dojo.require(“dojox.mobile“);/ 引用 Dojo Mobile 属性属性 类型类型 描述描述 默认值默认值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 My First View 页码，5/14ScrollableView 是 View 的一个子类，在 View 的基础上加上了“滚动（Scroll）”的支持。用户可以通过手指向上 / 下滑动 ScrollableView，从而在一 个 View 之中滚动显示多于一屏的内容。ScrollableView 除了 View 自身的属性以外，还有下列几个属性： 表表 2.ScrollableView 属性和事件属性和事件 下面代码可以显示一个 ScrollableView（见图 5）： 清单清单 3. 图图 5.ScrollableView 的示例的示例 图图 5.ScrollableView 的示例的示例 需要指出的是，ScrollableView 的滚动是发生在其内部（ScrollableView 针对这个进行了特殊处理），而不是浏览器对网页的滚动。当 ScrollableView 的内容不足以发生滚动时，其效果与 View 相似。 FlippableView 也是 View 的一个子类，在 View 的基础上加上了“拉动（Flip）”的支持。用户可以通过手指向左 / 右滑动 FlippableView，从而在不同 FlippableView 之间水平切换。FlippableView 除了 View 自身的属性以外，没有特殊的属性。需要指出的是，当水平拉动 FlippableView 后，其邻近的 FlippableView 会被自动选择并显示为可见。 下面代码展现了两个 FlippableView，通过“拉动”进行切换（见图 6）： 属性属性 类型类型 描述描述 默认值默认值scrollBar 布尔型 表示是否显示滚动条 true scrollDir 字符串型 表示显示哪几个方向的滚动条（v 代表垂直方向，h 代表水平方向，vh 代表两者都显示）v fadeScrollBar 布尔型 表示是否动画显示 / 隐藏滚动条 true disableFlashScrollBar 布尔型 表示是否禁止滚动条在 View 显示出来后闪烁 false My First ScrollableView The 1st Line The 2nd Line The 3rd Line The 4th Line The 5th Line The 6th Line The 7th Line The 8th Line The 9th Line 页码，6/14清单清单 4. FlippableView 的示例的示例 图图 6.FlippableView 的示例的示例 Heading 和和 ToolBarButton Heading 是一种负责显示 iOS 风格标题和工具栏的 UI 组件。Heading 有几个常用属性： 表表 3.Heading 属性属性 下面代码可以显示两个 View，他们各有一个 Heading，通过 Heading 上的回退按钮进行切换（见图 7）： 清单清单 5. Heading 的示例的示例 1 My First FlippableView My Second FlippableView 属性属性 类型类型 描述描述 默认默认值值back 字符串型 表示显示在回退按钮上的标签 无 label 字符串型表示显示在 Heading 中的标题，如果未指定，Heading 则自动取 innerHTML 的值无 moveTo 字符串型表示点击回退按钮后跳转到的 View 的 id 无 href 字符串型 表示点击回退按钮后跳转到的 URL（一般较少使用） 无 transition 字符串型表示动画的显示类型，目前支持“slide”，“fade”，“flip”或“none”几种类型 slide This is the First View This is the Second View 页码，7/14图图 7.Heading 的示例的示例 1 Heading 作为工具栏容器，还可以包含多个其他 UI 组件，最常见的有 ToolBarButton。ToolBarButton 有如下的常用属性： 表表 4.ToolbarButton 的属性的属性 下面代码生成两个 View，在 Heading 中添加两个 ToolBarButton，其中一个点击 Info 图标后以 slide 的动画方式跳转到另一个 view2，点击 Done 后 停留在 view1（见图 8）： 清单清单 6. Heading 的示例的示例 2 图图 8.Heading 的示例的示例 2 TabBar 和和 TabBarButton TabBar 是 Doj