Converting a Dojo Diagrammer application to use the AMD loader

This section does not cover all the details of using the AMD loader and the new Dojo modules. See the Dojo online documentation for more information about these topics.
The intention is to replace all the dojo.require calls, that is, legacy loader API calls, by a call to the global require function with dependencies on the required modules. The global require function is part of the AMD loader API.
The following code example shows a basic Dojo Diagrammer V1.1 application.
<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>
Here is the same application converted to AMD, with the modified code shown in 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>
Information to note about the parts of the code that have been modified and shown in bold:
  • The djConfig object is now called dojoConfig; (djConfig is still supported, but is deprecated).
  • The modulePaths configuration variable is replaced by paths and the dots in the module IDs are replaced by forward slash (/). For example, ibm_ilog.diagram becomes ibm_ilog/diagram.
  • The new async configuration variable tells the AMD loader to load modules asynchronously. This asynchronous setting is optional; the AMD loader loads modules synchronously by default in Dojo 1.7.
  • The calls to dojo.require are replaced by a call to the global require function.
    The first argument of the require function is an array containing the modules that were previously imported by dojo.require. (The dots in module names are replaced by forward slash (/) characters.) The second argument of require is a function that is called, possibly asynchronously, when all the modules have been loaded. The arguments of the function are the module values corresponding to the required modules: the parser argument is the value of the "dojo/parser" module, the ready argument is the value of the "dojo/ready" module, the Diagram argument is the value of the "ibm_ilog/diagram/widget/Diagram" module, and so on. For a module that contains a class, the module value is generally the class itself. For example, the HierarchicalLayout argument that corresponds to the "ibm_ilog/graphlayout/hierarchical/HierarchicalLayout" module is the ibm_ilog.graphlayout.hierarchical.HierarchicalLayout class.
  • All the code that used module values must be placed in the body of the function passed as the second argument of require.
  • The ready call: replaces dojo.addOnLoad and is the value of the "dojo/ready" module in the dependencies.
  • In this example, the global reference to the ibm_ilog.graphlayout.hierarchical.HierarchicalLayout class has been replaced by a reference to the HierarchicalLayout argument. (You can still use the global references.)
  • The nodeClicked function is a global callback function. This function must be left outside the body of the require function.
  • The dojoType attribute is replaced by data-dojo-type. This change is not directly related to AMD, but is recommended for HTML5 compliance.