JavaScript-Quellendateien und Ebenendateien

Sie können Dojo-Diagrammer-Code in einer HTML-Datei verwenden, indem Sie die einzelnen JavaScript-Quellendateien der Module ibm_ilog.diagram und ibm_ilog.graphlayout mithilfe von dojo.require-Aufrufen (oder AMD-require-Aufrufen) laden oder indem Sie Ebenendateien verwenden. Ebenendateien gleichen Dojo-Builds und enthalten ein komprimiertes Subset der Dojo-Diagrammer-Features.

JavaScript-Quellendateien von Dojo Diagrammer verwenden

Verwenden Sie dojo.require-Aufrufe, um einzelne JavaScript-Quellendateien während der Entwicklung Ihrer Dojo-Diagrammer-Webanwendungen zu laden. Das Debugging von Anwendungen ist bei der Verwendung einzelner Quellendateien einfacher als bei der Verwendung komprimierter Dojo-Ebenendateien. Sie können jedoch dazu führen, dass Ihre Anwendungen langsamer geladen werden.
Hinweis
In diesem Abschnitt wird die Verwendung der API dojo.require veranschaulicht, aber Dojo Diagrammer unterstützt auch die Syntax des AMD-Ladeprogramms. Unter Unterstützung für ADM-Ladeprogramm (Asynchronous Module Definition) finden Sie Erläuterungen zur Verwendung der API des AMD-Ladeprogramms.
Das folgende Beispiel veranschaulicht den Entwurf einer Anwendung, die ein Diagram-Widget mithilfe von JavaScript-Quellendateien erstellt:
<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>
Für dieses Beispiel ist die Dojo-Verteilung im Vorgängerverzeichnis zwei Stufen (../..) über dem Anwendungsverzeichnis enthalten. Die Eigenschaft modulePaths von dojoConfig-Objekten zeigt auf die Position der Module ibm_ilog.diagram und ibm_ilog.graphlayout relativ zur Anwendungsposition. Die Definition der Eigenschaft modulePaths ist in diesem Beispiel optional, weil sich diese Module im übergeordneten Verzeichnis des Verzeichnisses dojo befinden, in dem Dojo standardmäßig nach Modulen sucht.

Ebenendateien von Dojo Diagrammer verwenden

In den Produktionsversionen Ihrer Dojo-Diagrammer-Webanwendungen können Sie Ebenendateien anstelle von Quellendateien verwenden. Ebenendateien enthalten gruppierte Subsets der Dojo-Diagrammer-Features, die schneller geladen werden können. Sie entsprechen Dojo-Builds für den Dojo-Diagrammer-Code.
Das folgende Beispiel veranschaulicht den Entwurf einer Anwendung, die Dojo-Diagrammer-Ebenendateien anstelle von Quellendateien lädt:
<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>
In diesem Beispiel wird die Ebenendatei ibm_ilog.graphlayout_base.js mithilfe eines zusätzlichen dojo.require-Aufrufs geladen.
In der folgenden Tabelle sind die Ebenendateien aufgelistet, die mit Dojo Diagrammer bereitgestellt werden:
Ebene Dateiname Beschreibung Abhängigkeit von anderen Ebenen
ibm_diagram_base ibm_ilog/diagram/ibm_diagram_base.js (ibm_diagram_base .js.uncompressed.js ist ebenfalls verfügbar) Enthält Basisdiagrammcode mit Ausnahme von Bearbeitungsfeatures (ibm_diagram.editor-Klassen sind nicht enthalten) Ohne
ibm_diagram_base_mobile ibm_ilog/diagram/ibm_diagram_base_mobile.js Enthält Basisdiagrammcode mit Ausnahme von Bearbeitungsfeatures (ibm_diagram.editor-Klassen sind nicht enthalten) für die Verwendung auf mobilen Plattformen Ohne
ibm_diagram_editing ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js ist ebenfalls verfügbar) Bearbeitungsfunktionen für Diagramme ibm_diagram_base
ibm_graphlayout_base ibm_ilog/graphlayout/ibm_graphlayout_base.js Basiscode für Graphenlayout (einschließlich Rasterlayout, rekursivem Layout, Mehrfachlayout und zufälligem Layout) ibm_diagram_base
ibm_graphlayout_base_mobile ibm_ilog/graphlayout/ibm_graphlayout_base_mobile.js Basiscode für Graphenlayout (einschließlich Rasterlayout, rekursivem Layout und Mehrfachlayout) für die Verwendung auf mobilen Plattformen ibm_diagram_base
ibm_graphlayout_basiclinkstyle ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js Enthält BasicLinkStyleLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_random ibm_ilog/graphlayout/ibm_graphlayout_random.js Enthält RandomLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base
ibm_graphlayout_tree ibm_ilog/graphlayout/ibm_graphlayout_tree.js Enthält TreeLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_hierarchical ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js Enthält HierarchicalLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_link ibm_ilog/graphlayout/ibm_graphlayout_link.js Enthält LinkLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_base
ibm_graphlayout_forcedirected ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js Enthält ForceDirectedLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, ibm_graphlayout_tree und ibm_graphlayout_hierarchical
ibm_graphlayout_circular ibm_ilog/graphlayout/ibm_graphlayout_circular.js Enthält CircularLayout-Funktionalität ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base und ibm_graphlayout_tree
Die _mobile-Ebenen sind speziell für mobile Einheiten bestimmt. Einige Features wurden entfernt, um die Downloadgröße auf diesen Einheiten zu optimieren. Beachten Sie, dass nicht mobile Ebenen auch auf mobilen Einheiten verwendet werden können.