Conversion d'une application Dojo Diagrammer pour l'utilisation du chargeur AMD

Cette section ne traite pas des détails d'utilisation du chargeur AMD et des nouveaux modules Dojo. Consultez la documentation en ligne de Dojo pour plus d'informations sur ces sujets.
L'intention est de remplacer tous les appels dojo.require, c'est-à-dire les appels d'API de chargeur existants, par un appel à la fonction require globale avec des dépendances aux modules requis. La fonction require globale fait partie de l'API du chargeur AMD.
L'exemple de code ci-dessous illustre une application Dojo Diagrammer version 1.1 de base.
<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>
Voici la même application convertie pour AMD, le code modifié apparaissant en gras.
<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>
Informations à retenir sur les parties du code qui ont été modifiées et qui apparaissent en gras :
  • L'objet djConfig est désormais appelé dojoConfig ; (djConfig est toujours pris en charge mais a été déprécié).
  • La variable de configuration modulePaths est remplacée par paths et les points composant les ID de module sont remplacés par des barres obliques (/). Par exemple, ibm_ilog.diagram devient ibm_ilog/diagram.
  • La nouvelle variable de configuration async indique au chargeur AMD qu'il doit charger les modules de façon asynchrone. Ce paramètre asynchrone est facultatif ; le chargeur AMD charge les modules de façon synchrone par défaut dans Dojo 1.7.
  • Les appels de dojo.require sont remplacés par un appel à la fonction require globale.
    Le premier argument de la fonction require est un tableau contenant les modules précédemment importés par dojo.require. (Les points composant les noms de module sont remplacés par des barres obliques (/)). Le deuxième argument de require est une fonction qui est appelée, de façon asynchrone en général, lorsque tous les modules ont été chargés. Les arguments de la fonction sont les valeurs de module qui correspondent aux modules requis : l'argument parser est la valeur du module "dojo/parser", l'argument ready est la valeur du module "dojo/ready", l'argument Diagram est la valeur du module "ibm_ilog/diagram/widget/Diagram", etc. Dans le cas d'un module contenant une classe, la valeur du module est généralement la classe elle-même. Par exemple, l'argument HierarchicalLayout qui correspond au module "ibm_ilog/graphlayout/hierarchical/HierarchicalLayout" est la classe ibm_ilog.graphlayout.hierarchical.HierarchicalLayout.
  • L'intégralité du code utilisant des valeurs de module doit être placée dans le corps de la fonction transmise comme deuxième argument de require.
  • L'appel de ready remplace dojo.addOnLoad et est la valeur du module "dojo/ready" dans les dépendances.
  • Dans cet exemple, la référence globale à la classe ibm_ilog.graphlayout.hierarchical.HierarchicalLayout a été remplacée par une référence à l'argument HierarchicalLayout. (Vous pouvez encore utiliser les références globales.)
  • La fonction nodeClicked est une fonction de rappel globale. Elle doit se trouver hors du corps de la fonction require.
  • L'attribut dojoType est remplacé par data-dojo-type. Cette modification n'est pas directement liée à AMD mais est recommandée pour la conformité HTML5.