为支持触摸操作的移动设备创建 ILOG Dojo Diagrammer 应用程序4
- UID
- 1066743
|
为支持触摸操作的移动设备创建 ILOG Dojo Diagrammer 应用程序4
- 配置 Dojo由于您使用 HTML 标签静态地定义了 widget,因此在载入 HTML 页面时必须使用 djConfig.parseOnLoad 启用 Dojo 解析器。清单 6 给出了配置 Dojo 的代码。
清单 6. Dojo 配置1
| <script type="text/javascript"> var djConfig = { parseOnLoad :true }; </script>
|
- 加载模块在这个步骤中,您需要将 Dojo Mobile 模块、Dodjo 模块、移动设备主题 amnd 加载到应用程序之中。为了加载 Dojo Mobile 模块,请包含如清单 7 所示的代码。
清单 7. 加载 Dojo Mobile 模块1
2
3
4
5
6
7
8
9
10
11
12
| <script type="text/javascript">
// Load the lightweight Dojo Mobile parser
dojo.require("dojox.mobile.parser");
// Load the Dojo Mobile lib
dojo.require("dojox.mobile");
// Load the Dojo Mobile Tab Bar
dojo.require("dojox.mobile.TabBar");
// Load the modules for non webkit browsers
dojo.requireIf(!dojo.isWebKit, "dojox.mobile.compat");
dojo.requireIf(!dojo.isWebKit, "dojo.fx");
dojo.requireIf(!dojo.isWebKit, "dojo.fx.easing");
</script>
|
清单 8 的代码中所列的模块是组织图示例必不可少的。
清单 8. 加载 Dojo 模块1
2
3
4
5
| <script type="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("ibm_ilog.diagram.widget.Diagram");
dojo.require('ibm_ilog.graphlayout.tree.TreeLayout');
</script>
|
将来,Dojo Mobile 很有可能能够自动检测适合为您的设备加载的 CSS。但在这个目标实现之前,您需要将清单 9 所示的 JavaScript 代码添加到应用程序。这段代码将检查用户代理,确定设备类型并添加相应的 CSS。
清单 9. 为移动设备加载 CSS 主题1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script type="text/javascript">
var loadCSS = function(theme){
var addcss = function(path) {
var e = document.createElement("link");
e.setAttribute("href", path);
e.setAttribute("rel", "stylesheet");
e.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(e);
};
if (theme == "auto"){
var device = navigator.userAgent.toLowerCase();
if (device.search("android") > -1) {
addcss("../../../dojox/mobile/themes/android/android.css");
} else {
addcss("../../../dojox/mobile/themes/iphone/iphone.css");
}
}
else if (theme == "iphone"){
addcss("../../../dojox/mobile/themes/iphone/iphone.css");
}
else if (theme == "android"){
addcss("../../../dojox/mobile/themes/android/android.css");
}
}
loadCSS("auto");
</script>
|
|
|
|
|
|
|