Dojo Diagrammer コードを HTML ファイルで使用するには、dojo.require 呼び出し (または AMD require 呼び出し) を使用して ibm_ilog.diagram モジュールおよび ibm_ilog.graphlayout モジュールの個々の JavaScript ソース・ファイルをロードするか、またはレイヤー・ファイルを使用します。
レイヤー・ファイルは、Dojo ビルドに類似しており、
Dojo Diagrammer フィーチャーの圧縮サブセットが含まれています。
Dojo Diagrammer JavaScript ソース・ファイルの使用
Dojo Diagrammer Web アプリケーションの作成時に、dojo.require 呼び出しを使用して、個々の JavaScript ソース・ファイルをロードします。個々のソース・ファイルを使用する方が、圧縮された Dojo レイヤー・ファイルを使用するよりも、アプリケーションのデバッグを容易に行えます。ただし、アプリケーションのロードに時間がかかることがあります。
メモ
このセクションでは、dojo.require API の使用方法について説明しますが、
Dojo Diagrammer は、AMD ローダーの構文もサポートしています。AMD ローダーの API の使用法については、非同期モジュール定義 (AMD) ローダーのサポートにある説明を参照してください。
以下の例は、JavaScript ソース・ファイルを使用して Diagram ウィジェットを作成する
アプリケーションのスケルトンを示しています。
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <title>Dojo Diagrammer Test Page - Skeleton</title> <script type="text/javascript"> var dojoConfig = { modulePaths: { 'ibm_ilog.diagram': '../ibm_ilog/diagram', 'ibm_ilog.graphlayout': '../ibm_ilog/graphlayout' }, parseOnLoad: true, useGfxLayout: true }; </script> <script type="text/javascript" src="../../dojo/dojo.js"> </script> <script type="text/javascript"> dojo.require("ibm_ilog.diagram.widget.Diagram"); </script> <style type="text/css"> @import "../../dojo/resources/dojo.css"; @import "../../dijit/themes/tundra/tundra.css"; </style> </head> <body class='tundra'> <h1>Dojo Diagrammer - Skeleton Application</h1> <div id="diagram" dojoType="ibm_ilog.diagram.widget.Diagram"/> </body> </html>
この例では、Dojo ディストリビューションが、アプリケーション・ディレクトリー
より 2 つ上のレベル (../..) の上位ディレクトリーに含まれています。
dojoConfig
オブジェクトの modulePaths プロパティーは、
ibm_ilog.diagram モジュールおよび ibm_ilog.graphlayout モジュールのロケーション
をアプリケーションのロケーションに相対的に表しています。この例では、modulePaths プロパティーの設定はオプションです。
これらのモジュールは dojo ディレクトリーの親ディレクトリーにあり、
これは dojo がモジュールを探すデフォルトのロケーションであるためです。
Dojo Diagrammer レイヤー・ファイルの使用
Dojo Diagrammer Web アプリケーションの実動バージョンでは、
ソース・ファイルの代わりにレイヤー・ファイルを使用できます。レイヤー・ファイルには、
迅速にロードできるように、Dojo Diagrammer フィーチャーのグループ化されたサブセットが含まれています。
レイヤー・ファイルは、Dojo Diagrammer コードの Dojo ビルドと同等の役割を果たします。
以下の例は、ソース・ファイルの代わりに Dojo Diagrammer レイヤー・ファイルをロードする
アプリケーションのスケルトンを示しています。
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Dojo Diagrammer Test Page - Skeleton</title>
<script type="text/javascript">
var dojoConfig = {
modulePaths: {
'ibm_ilog.diagram': '../ibm_ilog/diagram',
'ibm_ilog.graphlayout': '../ibm_ilog/graphlayout'
},
parseOnLoad: true,
useGfxLayout: true
};
</script>
<script type="text/javascript" src="../../dojo/dojo.js"> </script>
<script type="text/javascript">
dojo.require("ibm_ilog.diagram.ibm_diagram_base");
dojo.require("ibm_ilog.diagram.widget.Diagram");
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../../dijit/themes/tundra/tundra.css";
</style>
</head>
<body class='tundra'>
<h1>Dojo Diagrammer - Skeleton Application (Layers)</h1>
<div id="diagram" dojoType="ibm_ilog.diagram.widget.Diagram"/>
</body>
</html>
この例で、ibm_ilog.graphlayout_base.js レイヤー・ファイルは、
追加の dojo.require 呼び出しを使用してロードされます。
以下の表に、Dojo Diagrammer で使用可能なレイヤー・ファイルをリストします。
レイヤー | ファイル名 | 説明 | 他のレイヤーへの依存 |
---|---|---|---|
ibm_diagram_base | ibm_ilog/diagram/ibm_diagram_base.js (ibm_diagram_base .js.uncompressed.js も使用可能) | 編集機能を除く基本ダイアグラム・コードが含まれています (ibm_diagram.editor クラスは含まれていません) | なし |
ibm_diagram_base_mobile | ibm_ilog/diagram/ibm_diagram_base_mobile.js | モバイル・プラットフォームで使用するための、編集機能を除く基本ダイアグラム・コードが含まれています (ibm_diagram.editor クラスは含まれていません) | なし |
ibm_diagram_editing | ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js も 使用可能) | ダイアグラム編集機能 | ibm_diagram_base |
ibm_graphlayout_base | ibm_ilog/graphlayout/ibm_graphlayout_base.js | グラフ・レイアウトの基本コード (グリッド・レイアウト、再帰レイアウト、マルチレイアウト、 およびランダム・レイアウトを含む) | ibm_diagram_base |
ibm_graphlayout_base_mobile | ibm_ilog/graphlayout/ibm_graphlayout_base_mobile.js | モバイル・プラットフォームで使用するためのグラフ・レイアウトの基本コード (グリッド・レイアウト、 再帰レイアウト、マルチレイアウトを含む) | ibm_diagram_base |
ibm_graphlayout_basiclinkstyle | ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js | BasicLinkStyleLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_base |
ibm_graphlayout_random | ibm_ilog/graphlayout/ibm_graphlayout_random.js | RandomLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_basiclinkstyle、ibm_graphlayout_base |
ibm_graphlayout_tree | ibm_ilog/graphlayout/ibm_graphlayout_tree.js | TreeLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_base |
ibm_graphlayout_hierarchical | ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js | HierarchicalLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_base |
ibm_graphlayout_link | ibm_ilog/graphlayout/ibm_graphlayout_link.js | LinkLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_base |
ibm_graphlayout_forcedirected | ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js | ForceDirectedLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_basiclinkstyle、ibm_graphlayout_base、 ibm_graphlayout_tree、および ibm_graphlayout_hierarchical |
ibm_graphlayout_circular | ibm_ilog/graphlayout/ibm_graphlayout_circular.js | CircularLayout 機能が含まれています | ibm_diagram_base、ibm_graphlayout_basiclinkstyle、ibm_graphlayout_base、 および ibm_graphlayout_tree |
_mobile レイヤーは、
モバイル・デバイス用に特別に設計されています。モバイル・デバイスに最適なダウンロード・サイズ
にするために、一部の機能が除去されています。mobile レイヤー以外のレイヤーも、モバイル・デバイスで使用することができます。