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.