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.