Fichiers de couche et fichiers source JavaScript

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.