You can use Dojo Diagrammer code in an HTML file by loading
the individual JavaScript source files of the ibm_ilog.diagram and ibm_ilog.graphlayout modules
using dojo.require calls (or AMD require calls),
or by using layers files. Layer files are similar to Dojo builds,
and contain a compressed subset of Dojo Diagrammer features.
Using the Dojo Diagrammer JavaScript source files
Use dojo.require calls
to load individual JavaScript source files during the development
of your Dojo Diagrammer web applications. Debugging applications is
easier when you use individual source files than when you use compressed
Dojo layer files. However, they can cause your applications to load
more slowly.
Note
This section shows the use of the dojo.require API,
but Dojo Diagrammer also supports AMD loader syntax. See Support for Asynchronous Module Definition (AMD) loader for explanations of how to use the AMD loader
API.
The following example shows the skeleton of an application
that creates a Diagram widget using JavaScript source files:
<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>
For this example, the Dojo distribution is included in
the ancestor directory two levels up (../..) from the application
directory. The modulePaths property
of
dojoConfig
objects points to the location
of the ibm_ilog.diagram and ibm_ilog.graphlayout modules
relative to the application location. Setting the modulePaths property
is optional in this example, because these modules are located in
the parent directory of the dojo directory,
which is the default location where dojo looks for modules.Using the Dojo Diagrammer layer files
In production versions of your Dojo Diagrammer web applications,
you can use layer files instead of source files. Layer files contain
grouped subsets of Dojo Diagrammer features for faster loading. They
provide the equivalent of Dojo builds for the Dojo Diagrammer code.
The following example shows the skeleton of an application
that loads Dojo Diagrammer layer files instead of source files:
<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 this example, the ibm_ilog.graphlayout_base.js layer
file is loaded by using an additional dojo.require call.
The following table lists the layer files available with
Dojo Diagrammer:
Layer | File name | Description | Dependency on other layers |
---|---|---|---|
ibm_diagram_base | ibm_ilog/diagram/ibm_diagram_base.js (ibm_diagram_base .js.uncompressed.js is also available) | Contains base diagram code, except for editing features (ibm_diagram.editor classes are not included) | None |
ibm_diagram_base_mobile | ibm_ilog/diagram/ibm_diagram_base_mobile.js | Contains base diagram code, except for editing features (ibm_diagram.editor classes are not included) for use on mobile platforms | None |
ibm_diagram_editing | ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js is also available) | Diagram editing features | ibm_diagram_base |
ibm_graphlayout_base | ibm_ilog/graphlayout/ibm_graphlayout_base.js | Graph layout base code (including grid, recursive, multiple, and random layout) | ibm_diagram_base |
ibm_graphlayout_base_mobile | ibm_ilog/graphlayout/ibm_graphlayout_base_mobile.js | Graph layout base code (including grid, recursive, and multiple layout) for use on mobile platforms | ibm_diagram_base |
ibm_graphlayout_basiclinkstyle | ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js | Contains BasicLinkStyleLayout functionality | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_random | ibm_ilog/graphlayout/ibm_graphlayout_random.js | Contains RandomLayout functionality | ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base |
ibm_graphlayout_tree | ibm_ilog/graphlayout/ibm_graphlayout_tree.js | Contains TreeLayout functionality | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_hierarchical | ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js | Contains HierarchicalLayout functionality | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_link | ibm_ilog/graphlayout/ibm_graphlayout_link.js | Contains LinkLayout functionality | ibm_diagram_base, ibm_graphlayout_base |
ibm_graphlayout_forcedirected | ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js | Contains ForceDirectedLayout functionality | ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, ibm_graphlayout_tree, and ibm_graphlayout_hierarchical |
ibm_graphlayout_circular | ibm_ilog/graphlayout/ibm_graphlayout_circular.js | Contains CircularLayout functionality | ibm_diagram_base, ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base, and ibm_graphlayout_tree |
The _mobile layers
have been specifically designed for mobile devices. Some features
have been removed to optimize the download size on those devices.
Note that the nonmobile layers can also be used on mobile devices.