AMD ローダーを使用するように Dojo Diagrammer アプリケーションを変換する

このセクションは、AMD ローダーと新しい Dojo モジュールの使用について詳細をすべてカバーするものではありません。 これらのトピックについて詳しくは、Dojo オンライン資料を参照してください。
ここでの目的は、dojo.require 呼び出し、すなわち既存のローダー API 呼び出しのすべてを、必要なモジュールに対する依存関係を持つ グローバル require 関数の呼び出しで置換することです。 グローバル require 関数は、AMD ローダー API の一部分です。
以下のコード例は、基本的な Dojo Diagrammer V1.1 アプリケーションを示しています。
<html>
  <head>
    <title>Dojo Diagrammer Test Page - Simple Diagram</title>
    <script type="text/javascript">
      var djConfig = {
        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");
      dojo.require("ibm_ilog.graphlayout.hierarchical.HierarchicalLayout");
      dojo.require("dojo.data.ItemFileReadStore");
      
      dojo.addOnLoad(function(){
        var layout = diagram.nodeLayout;
        layout.setPosition({ x: 20, y: 20 });
        layout.setGlobalLinkStyle(      ibm_ilog.graphlayout.hierarchical.HierarchicalLayout.ORTHOGONAL_STYLE);
      });
      
      function nodeClicked(node, e){
        alert("You clicked on " + node.getLabel());
      }
    </script>
  </head>
  <body>
    <h1>Dojo Diagrammer - Simple Diagram Sample</h1>
    <p>
    <div dojoType="dojo.data.ItemFileReadStore"
         url="nodes.json"
         jsId="nodestore">
    </div>
    <div dojoType="ibm_ilog.graphlayout.hierarchical.HierarchicalLayout"
         jsId="layout">
    </div>
    <div dojoType="ibm_ilog.diagram.widget.Diagram"
         jsId="diagram"
         style="width: 500px; height: 250px;"
         nodesStore="nodestore" nodesQuery="{id:'*'}"
         xBinding="x" yBinding="y" successorsBinding="successors"
         onNodeClick="nodeClicked"
         nodeLayout="layout" automaticNodeLayout="true">
    </div>
  </body>
</html>
以下は、同じアプリケーションを AMD に変換したもので、変更したコードは Bold (太字) で示しています。
<html>
  <head>
    <title>Dojo Diagrammer Test Page - Simple Diagram (AMD)</title>
    <script type="text/javascript">
      var dojoConfig = {
        paths: {
          'ibm_ilog/diagram': '../ibm_ilog/diagram',
          'ibm_ilog/graphlayout': '../ibm_ilog/graphlayout'
        },
        parseOnLoad: true,
        useGfxLayout: true,
        async: true
      }
    </script>
    <script type="text/javascript" src="../../dojo/dojo.js">
    </script>
    <script type="text/javascript">
      require([
          "dojo/parser",
          "dojo/ready",
        "ibm_ilog/diagram/widget/Diagram",
        "ibm_ilog/graphlayout/hierarchical/HierarchicalLayout",
        "dojo/data/ItemFileReadStore"
      ],
      function(
        parser, ready, Diagram, HierarchicalLayout, ItemFileReadStore){
      
        ready(function(){
          var layout = diagram.nodeLayout;
          layout.setPosition({ x: 20, y: 20 });
          layout.setGlobalLinkStyle(HierarchicalLayout.ORTHOGONAL_STYLE);
        });
        
      });
      
      function nodeClicked(node, e){
        alert("You clicked on " + node.getLabel());
      }
    </script>
  </head>
  <body>
    <h1>Dojo Diagrammer - Simple Diagram Sample (AMD)</h1>
    <p>
    <div data-dojo-type="dojo.data.ItemFileReadStore"
         url="nodes.json"
         jsId="nodestore">
    </div>
    <div data-dojo-type=
		"ibm_ilog.graphlayout.hierarchical.HierarchicalLayout"
         jsId="layout">
    </div>
    <div data-dojo-type="ibm_ilog.diagram.widget.Diagram"
         jsId="diagram" style="width: 500px; height: 250px;"
         nodesStore="nodestore" nodesQuery="{id:'*'}"
         xBinding="x" yBinding="y" successorsBinding="successors"
         onNodeClick="nodeClicked"
         nodeLayout="layout" automaticNodeLayout="true">
    </div>
  </body>
</html>
コードの変更されている、太字で示した部分に関して注意するべき情報は以下のとおりです。
  • djConfig オブジェクトは、 dojoConfig と呼ばれるようになりました (djConfig は、現在もサポートされていますが、使用は推奨されません)。
  • modulePaths 構成変数は、 paths で置換されて、モジュール ID に使用されるドットは、スラッシュ (/) で置換されます。 例えば、ibm_ilog.diagramibm_ilog/diagram になります。
  • 新しい async 構成変数は、AMD ローダーにモジュールの非同期ロードを指示します。 この非同期設定はオプションです。すなわち、Dojo 1.7 のデフォルトでは AMD ローダーは、モジュールを同期ロードします。
  • dojo.require の呼び出しは、グローバル require 関数の呼び出しで置換されます。
    require 関数の最初の引数は、以前、dojo.require によってインポートされていたモジュールを含む配列です。 (モジュール名のドットは、スラッシュ文字 (/) で置換されます。) require の 2 番目の引数は、すべてのモジュールがロードされたときに、おそらく非同期で呼び出される関数です。 関数の引数は、必要なモジュールに対応するモジュールの値です。parser 引数は、 "dojo/parser" モジュールの値で、 ready 引数は、"dojo/ready" モジュールの値で、Diagram 引数は、"ibm_ilog/diagram/widget/Diagram" モジュールの値といった具合です。 クラスを含むモジュールの場合、モジュール値は一般にそのクラス自体になります。 例えば、"ibm_ilog/graphlayout/hierarchical/HierarchicalLayout" モジュールに対応する HierarchicalLayout 引数は ibm_ilog.graphlayout.hierarchical.HierarchicalLayout クラスです。
  • モジュール値を使用したコードはすべて、require の 2 番目の引数で渡される関数の本体に 入れる必要があります。
  • ready 呼び出しが、 dojo.addOnLoad にとって代わり、依存関係の "dojo/ready" モジュールの値になります。
  • この例では、ibm_ilog.graphlayout.hierarchical.HierarchicalLayout クラスのグローバル参照が、 HierarchicalLayout 引数の参照によって置換されています。 (現在もまだグローバル参照を使用することはできます。)
  • nodeClicked 関数は、グローバル・コールバック関数です。 この関数は、require 関数の本体の外部に置かれている必要があります。
  • dojoType 属性は、 data-dojo-type で置き換えられます。この変更は、AMD に直接関係するものではありませんが、HTML5 準拠のために推奨します。