Dieser Abschnitt enthält nicht alle Details zur Verwendung des AMD-Ladeprogramms und der neuen
Dojo-Module. Weitere Informationen zu diesen Themen finden Sie in der Dojo-Onlinedokumentation.
Die Absicht ist die Ersetzung aller dojo.require-Aufrufe, d. h.
Aufrufe der traditionellen Ladeprogramm-API, durch einen Aufruf der globalen Funktion
require mit Abhängigkeiten von den erforderlichen Modulen.
Die globale Funktion require
ist Teil der API des AMD-Ladeprogramms.
Das folgende Codebeispiel zeigt eine Basisanwendung der Dojo Diagrammer
Version 1.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>
Im Folgenden sehen Sie dieselbe Anwendung, die für die Verwendung von AMD konvertiert wurde.
Der geänderte Code ist in Fettdruck hervorgehoben.
<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>
Wichtige Informationen zu den Abschnitten des Codes, die geändert wurden und in Fettschrift hervorgehoben sind:
- Das djConfig-Objekt heißt jetzt dojoConfig. (djConfig wird weiterhin unterstützt, ist aber veraltet.)
- Die Konfigurationsvariable modulePaths wird durch paths ersetzt, und die Punkte in den Modul-IDs werden durch einen Schrägstrich (/) ersetzt. Aus ibm_ilog.diagram wird beispielsweise ibm_ilog/diagram.
- Die neue Konfigurationsvariable async weist das AMD-Ladeprogramm an, Module asynchron zu laden. Diese asynchrone Einstellung ist optional. In Dojo 1.7 lädt das AMD-Ladeprogramm Module synchron.
- Die Aufrufe von dojo.require werden durch einen Aufruf der globalen Funktion require ersetzt.Das erste Argument der Funktion require ist ein Array, das die Module enthält, die früher von dojo.require importiert wurden. (Die Punkte in Modulnamen werden durch Schrägstriche (/) ersetzt.) Das zweite Argument von require ist eine Funktion, die - unter Umständen asynchron - aufgerufen wird, wenn alle Module geladen wurden. Die Argumente der Funktion sind die Modulwerte, die den erforderlichen Modulen entsprechen. Das Argument parser ist der Wert des Moduls "dojo/parser", das Argument ready ist der Wert des Moduls "dojo/ready" das Argument Diagram ist der Wert des Moduls "ibm_ilog/diagram/widget/Diagram" usw. Für ein Modul, das eine Klasse enthält, ist der Modulwert gewöhnlich die Klasse selbst. Das Argument HierarchicalLayout, das dem Modul "ibm_ilog/graphlayout/hierarchical/HierarchicalLayout" entspricht, ist beispielsweise die Klasse ibm_ilog.graphlayout.hierarchical.HierarchicalLayout.
- Der gesamte Code, der Modulwerte verwendet, muss in den Hauptteil der Funktion eingefügt werden, die als zweites Argument von require übergeben wird.
- Der Aufruf ready ersetzt dojo.addOnLoad und ist der Wert des Moduls "dojo/ready" in den Abhängigkeiten.
- In diesem Beispiel wurde die globale Referenz auf die Klasse ibm_ilog.graphlayout.hierarchical.HierarchicalLayout durch eine Referenz auf das Argument HierarchicalLayout ersetzt. (Sie können die globalen Referenzen weiterhin verwenden.)
- Die Funktion nodeClicked ist eine globale Callback-Funktion. Diese Funktion muss sich auf der linken Seite außerhalb des Hauptteils der Funktion require befinden.
- Das Attribut dojoType wird durch data-dojo-type ersetzt. Diese Änderung steht in keinem direkten Zusammenhang zu AMD, wird aber für die HTML5-Konformität empfohlen.