Vous pouvez utiliser le code Dojo Diagrammer dans un fichier HTML en chargeant les fichiers source JavaScript individuels des modules ibm_ilog.diagram et ibm_ilog.graphlayout à l'aide d'appels dojo.require (ou d'appels AMD require), ou en utilisant des fichiers de couche.
Les fichiers de couche sont semblables aux constructions Dojo et contiennent un sous-ensemble compressé de fonctions Dojo Diagrammer.
Utilisation des fichiers source JavaScript Dojo Diagrammer
Utilisez les appels dojo.require pour charger des fichiers source JavaScript individuels durant le développement de vos applications Web Dojo Diagrammer. Le débogage d'applications est plus facile lorsque vous utilisez des fichiers source individuels que lorsque vous utilisez des fichiers de couche Dojo compressés. Toutefois, ces fichiers peuvent provoquer le ralentissement du chargement de vos applications.
Note
Cette section décrit l'utilisation de l'API dojo.require ; toutefois, Dojo Diagrammer prend également en charge la syntaxe du chargeur AMD.
Voir Support du chargeur ADM (Asynchronous Module Definition) pour des explications sur l'utilisation de l' API du chargeur AMD.
L'exemple suivant illustre le squelette d'une application qui crée un widget Diagramme à l'aide de fichiers source JavaScript :
<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <title>Dojo Diagrammer Test Page - Skeleton</title> <script type="text/javascript"> var dojoConfig = { 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"); </script> <style type="text/css"> @import "../../dojo/resources/dojo.css"; @import "../../dijit/themes/tundra/tundra.css"; </style> </head> <body class='tundra'> <h1>Dojo Diagrammer - Skeleton Application</h1> <div id="diagram" dojoType="ibm_ilog.diagram.widget.Diagram"/> </body> </html>
Pour cet exemple, la distribution Dojo est incluse dans le répertoire ancêtre situé deux niveaux plus haut (../..) que le répertoire de l'application. La propriété modulePaths des objets
dojoConfig
pointe vers l'emplacement des modules ibm_ilog.diagram et ibm_ilog.graphlayout par rapport à l'emplacement de l'application. La propriété modulePaths est facultative dans cet exemple, car les modules figurent dans le répertoire parent du répertoire dojo, lequel est l'emplacement par défaut utilisé par Dojo pour rechercher des modules.Utilisation des fichiers de couche Dojo Diagrammer
Dans les versions de production de vos applications Web Dojo Diagrammer, vous pouvez utiliser des fichiers de couche au lieu de fichiers source. Les fichiers de couche contiennent des sous-ensembles groupés de fonctions Dojo Diagrammer afin d'accélérer le chargement. Ils fournissent l'équivalent des générations Dojo pour le code Dojo Diagrammer.
L'exemple suivant illustre le squelette d'une application qui charge des fichiers de couche Dojo Diagrammer au lieu de fichiers source :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>Dojo Diagrammer Test Page - Skeleton</title>
<script type="text/javascript">
var dojoConfig = {
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.ibm_diagram_base");
dojo.require("ibm_ilog.diagram.widget.Diagram");
</script>
<style type="text/css">
@import "../../dojo/resources/dojo.css";
@import "../../dijit/themes/tundra/tundra.css";
</style>
</head>
<body class='tundra'>
<h1>Dojo Diagrammer - Skeleton Application (Layers)</h1>
<div id="diagram" dojoType="ibm_ilog.diagram.widget.Diagram"/>
</body>
</html>
Dans cet exemple, le fichier de couche ibm_ilog.graphlayout_base.js est chargé via un appel
dojo.require supplémentaire.
Le tableau suivant répertorie les fichiers de couche disponibles avec Dojo Diagrammer :
Couche | Nom de fichier | Description | Dépendance sur les autres couches |
---|---|---|---|
ibm_diagram_base | ibm_ilog/diagram/ibm_diagram_base.js (ibm_diagram_base .js.uncompressed.js est également disponible) | Contient le code de diagramme de base, sauf pour les fonctions d'édition (les classes ibm_diagram.editor ne sont pas incluses) | Aucun |
ibm_diagram_base_mobile | ibm_ilog/diagram/ibm_diagram_base_mobile.js | Contient le code de diagramme de base, sauf pour les fonctions d'édition (les classes ibm_diagram.editor ne sont pas incluses) à utiliser sur les plate-formes mobiles | Aucun |
ibm_diagram_editing | ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js est également disponible) | Fonctions d'édition de diagramme | ibm_diagram_base |
ibm_graphlayout_base | ibm_ilog/graphlayout/ibm_graphlayout_base.js | Code de base d'agencement de graphe (y compris l'agencement en grille, récursif, multiple et aléatoire) | ibm_diagram_base |
ibm_graphlayout_base_mobile | ibm_ilog/graphlayout/ibm_graphlayout_base_mobile.js | Code de base d'agencement de graphe (y compris l'agencement en grille, récursif et multiple) pour une utilisation sur des plate-formes mobiles | ibm_diagram_base |
ibm_graphlayout_basiclinkstyle | ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js | Contient la fonctionnalité BasicLinkStyleLayout | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_random | ibm_ilog/graphlayout/ibm_graphlayout_random.js | Contient la fonctionnalité RandomLayout | ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base |
ibm_graphlayout_tree | ibm_ilog/graphlayout/ibm_graphlayout_tree.js | Contient la fonctionnalité TreeLayout | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_hierarchical | ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js | Contient la fonctionnalité HierarchicalLayout | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_link | ibm_ilog/graphlayout/ibm_graphlayout_link.js | Contient la fonctionnalité LinkLayout | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_forcedirected | ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js | Contient la fonctionnalité ForceDirectedLayout | ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, ibm_graphlayout_tree et ibm_graphlayout_hierarchical |
ibm_graphlayout_circular | ibm_ilog/graphlayout/ibm_graphlayout_circular.js | Contient la fonctionnalité CircularLayout | ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base et ibm_graphlayout_tree |
Les couches _mobile ont été spécialement conçues pour les périphériques mobiles. Certaines fonctions ont été supprimées pour optimiser la taille de téléchargement sur ces périphériques.
Notez que les couches non mobiles peuvent également être utilisées sur des périphériques mobiles.