JavaScript ソース・ファイルおよびレイヤー・ファイル

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 レイヤー以外のレイヤーも、モバイル・デバイスで使用することができます。