为支持触摸操作的移动设备创建 ILOG Dojo Diagrammer 应用程序1

look_w

简介IBM ILOG Dojo Diagrammer 提供了一组服务和用户界面组件，用这些组件为 Web 和移动设备编写交互图。为了提供演示，本文将描述如何利用 IBM ILOG Dojo Diagrammer 库为支持触摸操作的移动设备创建简单的组织图应用程序。为了简化内容，以便集中精力关注流程，本文中开发的应用程序非常简单，仅提供一个显示员工及其管理关系的组织图。
本文中的练习将使用 IBM WebSphere® Application Server Feature Pack for Web 2.0 and Mobile V1.1。该特性包由一组组件、库和工具组成，可帮助您为这些平台构建应用程序。该特性包中还包括 Dojo 1.7 和 IBM ILOG Dojo Diagrammer 的抢先版。
Dojo Mobile为移动设备编写应用程序的主要方法有三种。一种可行的方法是使用移动设备专有的工具包。另外一种方法是使用 Web 标准。如今的主流智能手机均支持 Web 2.0 体系（HTML5/CSS3 和 Ajax）。这种做法使得设备上无需安装任何程序。第三种混合方法（例如 PhoneGap）结合了 Web 开发与 SDK 编程，使用一种框架支持您利用 Web 技术创作原生应用程序并访问原生 API。这些方法都有着自己的优缺点。
Dojo Mobile 属于第二种方法。它是一种 JavaScript™ 框架，属于 Dojo Toolkit 的一部分，使您能够轻松编写具有 iPhone、iPad 和 Android 原生外观的应用程序。它提供了为使用动画和变形等高级 CSS3 特性的移动设备而优化的轻量级 widget。这种方法仅需要 Web 编程知识，无需部署。您可以通过移动设备上提供的浏览器访问您的应用程序。
视图和 widgetDojo Mobile 提供了创建类似于设备的应用程序的 widget。本例使用：

• dojox.mobile.View：一个容器 widget，可填满设备的整个屏幕。它是一个 “虚拟页面”，因为可以在相同的 HTML 页面中定义多个视图。
• dojox.mobile.Heading：典型的移动应用程序导航栏，显示在屏幕顶端，紧邻设备状态栏下方。它可以包含一个返回按钮，用于返回上一个视图。
• dojox.mobile.TabBar：屏幕底端的典型工具栏，是一个包含按钮的容器 widget。
• dojox.mobile.TabBarButton： 一个按钮 widget，专为 Tab Bar widget 而设计。
• dojox.mobile.RoundRectList：一个包含项目的 widget 容器。
• dojox.mobile.ListItem：  列表容器 widget 的项目。

CSS3 动画Dojo Mobile 广泛利用 CSS3，并利用 Safari 或 Chrome 等浏览器内实现的所有最新的 CSS3 特性，例如变形、过渡和动画等。它提供了一个兼容性模块，以便在不支持 CSS3 的情况下完美地降级到旧浏览器版本。
移动主题在本文编写之时（最新版本的 Dojo 为 6.1 版本），Dojo Mobile 提供了 iOS（iPhone 和 iPad）以及 Android 主题。其他主题，如 Blackberry 6 和 WebOS 等，正在开发之中。只需更改 CSS，即可从 iOS 外观更改为 Android 外观。