JavaScript source and layer files

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.