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 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.