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

look_w

• 配置 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>