Creating the application

You can use the following code to create an empty page of the IBM® ILOG® Dojo Diagrammer application. The Diagram component is located in the same directory as Dojo. In this case in the relative ../.. directory.
To create a Dojo application to display a graph:
  1. Use the following code:
    <html>
        <head>
            <title>Dojo Diagrammer Tutorial</title>
            <!-- load the dojo toolkit base -->
            <script type="text/javascript">
                var djConfig = {
                    parseOnLoad: true
                }
            </script>
            <script type="text/javascript" src="../../dojo/dojo.js"></script>
            <script type="text/javascript" src="../../dojox/collections.js"></script>
          
            <style type="text/css">
                @import "../../dijit/themes/tundra/tundra.css";
                /* our CSS can go here */
            </style>
        </head>
        <body class='tundra'>
           <h1>Dojo Diagrammer Tutorial</h1>
        </body>
    </html>
  2. Create a top-level graph that contains nodes and links.
    You can proceed in two different ways, depending on how your application is designed:
    • By manually creating a GFX surface with a graph inside it
    • By creating a Diagram widget which creates a surface and a graph internally
    Choose the first option if you already have a GFX surface in your application. The second option is more suitable if you start a brand new application. The Diagram widget offers built-in features like scroll bars, interactive panning, zooming, and so on.