为支持触摸操作的移动设备创建 ILOG Dojo Diagrammer 应用程序3
|
- UID
- 1066743
|
为支持触摸操作的移动设备创建 ILOG Dojo Diagrammer 应用程序3
创建示例应用程序 这一部分解释了如何编写一个基于 Dojo Diagrammer 的基本组织图应用程序。图 1 展示了本文中使用的示例应用程序的简要架构。
图 1. 使用 Dojo Mobile 和 IBM ILOG Dojo diagrammer 的应用程序的整体架构 在这个示例应用程序中：
- IBM ILOG Dojo Diagrammer 显示组织图的节点和链接。
- 数据存储中的每个项都表示为一个图形节点。数据存储中定义的项之间的层次关系将表示为链接。
- Dojo Mobile 所显示的视图具有其运行的移动设备的原生外观。
这个组织图应用程序将提供两个不同的视图：
- 组织图视图：仅显示给定员工、他的经理和他的直接下属（如果有）。
- 详情视图：显示选定员工的具体信息，例如电子邮件地址、职位和位置
一个按钮栏支持在不同的视图之间切换。完成之后，示例应用程序应如图 2 所示。
图 2. 组织图应用程序 通过触摸按钮栏上的信息按钮，即可切换到详情视图（图 3）。
图 3. 详情视图 要构建此示例应用程序，请执行如下步骤。
配置 HTML 页面开始构建应用程序时，应首先配置 HTML 页面。
- 选择 DOCTYPE。HTML 页面的 DOCTYPE 应为 HTML 5（如清单 2 所示），以便触发标准 HTML 呈现模式（而非旧式的 “怪异” 模式）。
清单 2. HTML5 DOCTYPE
- 配置视区 (viewport)。iOS Safari 或 Android 默认浏览器等大多数移动浏览器均支持 <meta name=”viewport”> 标签。此标签的用途是什么？在桌面浏览器上，视区是 HTML 页面的可见部分，宽度和高度与浏览器窗口相同。视区的宽度决定了 HTML 页面的布局。用户可以通过调整浏览器窗口的大小来调整视区的大小。
在移动设备上，浏览器的大小是固定的。用户可以拖动页面或者缩放。大多数网站都是为 1024 x 768 或 800 x 600 的屏幕尺寸而优化的，而典型的移动设备的大小是 320 x 480 或 640 x 960。因此，如果 HTML 布局使用移动设备的大小，那么大多数网站在移动设备上都无法正确显示。反之，HTML 布局应该使用更大的区域，并伸缩页面来适应设备屏幕。此时，元视区标签即可提供帮助。您可以定义用于 HTML 布局的宽度和初始尺寸。
Dojo Mobile widget 专门为移动设备而优化，旨在以类似于原生移动应用程序的方式操作。因此，应该在网页的标头中添加清单 3 所示的元素，禁用默认移动浏览器行为。
清单 3. 视区配置1
2
| <meta name="viewport" content="width=device-width,initial-scale=1,
maximum-scale=1,minimum-scale=1,user-scalable=no"/>
|
- 隐藏 Safari UI 组件。iOS Safari 提供了一个特殊的元标签，用于使用全屏模式运行您的应用程序；即不显示占用 60 个像素的空间的地址栏，也不显示屏幕底部占用 44 个像素的空间的按钮栏。Web-app-capable 模式（如清单 4 所示）使您的 Web 应用程序能够从 iOS 设备的 Home 屏幕上启动。
清单 4. Webapp 模式1
| <meta name="apple-mobile-web-app-capable" content="yes" />
|
设置了 DOCTYPE 和元标签之后，即得到如清单 5 所示的 HTML 页面。
清单 5. 组织图应用程序的 HTML 标头1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html">
<html lang="en">
<head>
<title>Dojo Diagrammer Demos</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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" />
</head>
</html>
|
|
|
|
|
|
|
