このセクションは、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.diagram は ibm_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 準拠のために推奨します。