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 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.
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 djConfig = { 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
djConfig
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 on the client side.
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 djConfig = { parseOnLoad: true, useGfxLayout: true }; </script> <script type="text/javascript" src="../../dojo/dojo.js"> </script> <script type='text/javascript' src='../../ibm_ilog.graphlayout/ibm_ilog.graphlayout_base.js'></script> <script type='text/javascript' src='../../ibm_ilog.diagram/ibm_ilog.diagram_base.js'></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 and ibm_ilog.diagram_base.js layer
files are loaded explicitly using script tags.
The dojo.require ("ibm_ilog.diagram.widget.Diagram") call
is not required (although it could still be used), because the Diagram class
is defined in the ibm_ilog.diagram_base.js
layer file.
The following table lists the layer files available with
Dojo Diagrammer:
Layer | File name | Description | Dependency on other layers |
---|---|---|---|
ibm_graphlayout_base | ibm_ilog/graphlayout/ibm_graphlayout_base.js | Graph layout base code (including grid, recursive, multiple, and random layout) | None |
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 | None |
ibm_graphlayout_basiclinkstyle | ibm_ilog/graphlayout/ibm_graphlayout_basiclinkstyle.js | Contains BasicLinkStyleLayout functionality | ibm_graphlayout_base |
ibm_graphlayout_random | ibm_ilog/graphlayout/ibm_graphlayout_random.js | Contains RandomLayout functionality | ibm_graphlayout_basiclinkstyle, ibm_graphlayout_base |
ibm_graphlayout_tree | ibm_ilog/graphlayout/ibm_graphlayout_tree.js | Contains TreeLayout functionality | ibm_graphlayout_base |
ibm_graphlayout_hierarchical | ibm_ilog/graphlayout/ibm_graphlayout_hierarchical.js | Contains HierarchicalLayout functionality | ibm_graphlayout_base |
ibm_graphlayout_link | ibm_ilog/graphlayout/ibm_graphlayout_link.js | Contains LinkLayout functionality | ibm_graphlayout_base |
ibm_graphlayout_forcedirected | ibm_ilog/graphlayout/ibm_graphlayout_forcedirected.js | Contains ForceDirectedLayout functionality | 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_graphlayout_basiclinkstyle, ibm_graphlayout_base, and ibm_graphlayout_tree |
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) | ibm_graphlayout_base |
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 | |
ibm_diagram_editing | ibm_ilog/diagram/ ibm_diagram_editing.js (ibm_diagram_editing.js.uncompressed.js is also available) | Diagram editing features | ibm_graphlayout_base and ibm_diagram_base |
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.