Convertendo um aplicativo Dojo Diagrammer para usar o carregador AMD

Esta seção não cobre todos os detalhes do uso do carregador AMD e os novos módulos do Dojo. Consulte a documentação on-line do Dojo para obter maiores informações sobre esses tópicos.
A intenção é substituir todas as chamadas dojo.require, isto é, chamadas de API do carregador de legado, por uma chamada à função require global com dependências nos módulos necessários. A função global require é parte da API do carregador AMD.
O código de exemplo a seguir mostra um aplicativo básico do 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>
Aqui, está o mesmo aplicativo convertido para AMD, com o código modificado mostrado em negrito.
<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>
Informações a se observar sobre as partes do código que foram modificadas e mostradas em negrito:
  • O objeto djConfig agora é chamado de dojoConfig; (djConfig ainda é suportado, mas está descontinuado).
  • A variável de configuração modulePaths está substituída pela paths e os pontos nos IDS do módulo são substituídos pela barra (/). Por exemplo, ibm_ilog.diagram se torna ibm_ilog/diagram.
  • A nova variável de configuração async diz ao carregador AMD para carregar módulos de forma assíncrona. Esta configuração assíncrona é opcional; o carregador AMD carrega módulos sincronamente por padrão no Dojo 1.7.
  • As chamadas para dojo.require são substituídas por uma chamada para a função global require.
    O primeiro argumento da função require é uma matriz que contém os módulos que foram importados anteriormente por dojo.require. (Os pontos nos nomes de módulo são substituídos por caracteres de barra (/).) O segundo argumento de require é uma função que é chamada, possivelmente de forma assíncrona, quando todos os módulos forem carregados. Os argumentos da função são valores de módulo correspondentes aos módulos necessários: o argumento parser é o valor do módulo"dojo/parser", o argumento ready é o valor do módulo "dojo/ready", o argumento Diagram é o valor do módulo "ibm_ilog/diagram/widget/Diagram" e assim por diante. Para um módulo que contém uma classe, o valor do módulo é geralmente a própria classe. Por exemplo, o argumento HierarchicalLayout que corresponde ao módulo "ibm_ilog/graphlayout/hierarchical/HierarchicalLayout" é a classe ibm_ilog.graphlayout.hierarchical.HierarchicalLayout.
  • Todo o código que usou valores de módulo deve ser posicionado no corpo da função passada como o segundo argumento require.
  • A chamada ready: substitui dojo.addOnLoad e é o valor do módulo "dojo/ready" nas dependências.
  • Neste exemplo, a referência global à classe ibm_ilog.graphlayout.hierarchical.HierarchicalLayout foi substituída por uma referência ao argumento HierarchicalLayout. (Ainda é possível usar referências globais.)
  • A função nodeClicked é uma função de retorno de chamada global. Essa função deve ser deixada fora do corpo da função require.
  • O atributo dojoType é substituído por data-dojo-type. Esta mudança não está diretamente relacionada ao AMD, mas é recomendada para conformidade de HTML5.