Conversión de una aplicación de Dojo Diagrammer para utilizar el cargador AMD

En este apartado no se ofrecen todos los detalles de utilizar el cargador AMD y los nuevos módulos de Dojo. Consulte la documentación en línea de Dojo para obtener más información sobre estos temas.
La intención es sustituir todas las llamadas de dojo.require, es decir, las llamadas de API del cargador heredado, mediante una llamada a la función require global con dependencias en los módulos necesarios. La función require global forma parte de la API del cargador AMD.
El siguiente ejemplo de código muestra una aplicación básica de 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>
A continuación se muestra la misma aplicación convertida a AMD, con el código modificado que se muestra en negrita.
<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>
Información a tener en cuenta acerca de la partes del código que se han modificado y que se muestra en negrita:
  • El objeto djConfig se denomina ahora dojoConfig; (djConfig está todavía recibe soporte, pero está en desuso).
  • La variable de configuración modulePaths se ha sustituido por paths y los puntos de los ID de módulo se han sustituido por la barra inclinada (/). Por ejemplo, ibm_ilog.diagram se convierte en ibm_ilog/diagram.
  • La nueva variable de configuración async indica el cargador AMD que cargue módulos de forma asíncrona. Este valor asíncrono es opcional; de forma predeterminada, el cargador AMD carga módulos de manera síncrona en Dojo 1,7.
  • Las llamadas a dojo.require se sustituyen por una llamada a la funciónrequire global.
    El primer argumento de la función require es una matriz que contiene los módulos que dojo.require ha importado previamente. (Los puntos en los nombres de módulo se sustituyen por barras inclinadas (/).) El segundo argumento de require es una función que se invoca, posiblemente de forma asíncrona, cuando todos los módulos se han cargado. Los argumentos de la función son los valores de módulo correspondiente a los módulos necesarios: el argumento parser es el valor del módulo "dojo/parser", el argumento ready es el valor del módulo "dojo/ready", el argumento Diagram es el valor del módulo "ibm_ilog/diagram/widget/Diagram", etcétera. En el caso de un módulo que contiene una clase, el valor del módulo es generalmente la propia clase. Por ejemplo, el argumento HierarchicalLayout que corresponde al módulo "ibm_ilog/graphlayout/hierarchical/HierarchicalLayout" es la clase ibm_ilog.graphlayout.hierarchical.HierarchicalLayout.
  • Todo el código que ha utilizado valores de módulos debe desplazarse en el cuerpo de la función que se ha pasado como segundo argumento de require.
  • La llamada ready: sustituye la dojo.addOnLoad y es el valor del módulo "dojo/ready" en las dependencias.
  • En este ejemplo, la referencia global a la clase ibm_ilog.graphlayout.hierarchical.HierarchicalLayout se ha sustituido por una referencia al argumento HierarchicalLayout. (Puede seguir utilizando referencias globales.)
  • La función nodeClicked es una función de devolución de llamada global. Esta función debe quedar fuera del cuerpo de la función require.
  • El atributo dojoType se sustituye por data-dojo-type. Este cambio no está directamente relacionado con AMD, pero es aconsejable para la conformidad HTML5.