Running a graph layout application with a diagram component

> > > > >

To use the layout algorithms provided by the graph layout package inside a diagram component, you usually perform the following steps:

Create a style sheet (CSS file) that specifies the graph layout. You can use the JViews Diagrammer Designer to create the style sheet interactively, or a text editor to create the style sheet by editing the CSS text.
Create an IlvDiagrammer diagram component and fill it with data from the data model.
Load the style sheet into the diagram component. Graph layout is automatically performed when the style sheet is loaded or changed.

Sample CSS file for graph layout

You can use the sample style sheet provided to get started with the layout algorithms of the graph layout package in an Rogue Wave JViews Diagrammer application. It illustrates how to specify a layout algorithm and the layout parameters in a CSS file. The example uses the Tree Layout, but most of the principles apply to any of the other layouts.

The complete style sheet is named Sample.css and is located in <installdir>/jviews–diagrammer89/codefragments/graphlayout/sample1/data/Sample.css

Since the Tree Layout applies link reshaping as well as laying out the nodes, an additional link layout is not necessary. Therefore, the link layout is set to false . Besides the layout style, the GraphLayout section of the style sheet specifies the global layout parameters of the layout style. Parameters that are not specified take the default value.

SDM {
   GraphLayout : "true";
   LinkLayout : "false";
}
 
node {
   class : "ilog.views.sdm.graphic.IlvGeneralNode";
   ...
}
 
link {
   class : "ilog.views.sdm.graphic.IlvGeneralLink";
   ...
}
 
GraphLayout {
   graphLayout : "Tree";
   flowDirection : "Bottom";
   layoutMode : "FREE";
   globalLinkStyle : "ORTHOGONAL_STYLE";
   globalAlignment : "CENTER";
   connectorStyle : "EVENLY_SPACED_PINS";
   siblingOffset : "15";
   branchOffset : "30";
   parentChildOffset : "20";
   position : "200,20";
}

Specifying graph layout in detail

The graph layout algorithm in the sample CSS file is configured according to the CSS specification for graph layout.

The SDM style rule specifies that a graph layout renderer is created. An SDM renderer is a pluggable object that controls the rendering of the graph. The graph layout renderer calls a layout algorithm. By default, a layout is in enabled mode and, therefore, is applied whenever the diagram changes.

SDM {
  GraphLayout : "true";
}

The renderer corresponds to the following Java™ class:

IlvGraphLayoutRenderer

The parameters of the graph layout renderer and of the graph layout algorithm are specified in the GraphLayout rule.

GraphLayout {
  graphLayout : "Tree";
  flowDirection : "Bottom";
  ...
}

The GraphLayout rule contains the following declarations:

The first declaration tells the graph layout renderer to use a tree layout algorithm, which corresponds to the Java class IlvTreeLayout. This declaration calls the method setGraphLayout. You can pass the name of any subclass of IlvGraphLayout. The class name can be abbreviated, for example, Tree , or you can pass the full class name.
The second declaration tells the tree layout algorithm to lay nodes out from top to bottom. This declaration calls the method setFlowDirection.

Other graph layout or renderer parameters can be specified in a similar way. If a parameter is not specified then its default value is used. When the graph layout renderer is enabled (the default), it reapplies the layout whenever an object is changed or moved.

Note

When the graph layout renderer is enabled and a hierarchical layout or tree layout is in use, it is not necessary to use the link layout renderer, because the graph layout renderer has full control over the layout of nodes and links. Other graph layouts may control only the node layout, in which case the link layout renderer can be used to position the links.

Current section

Using layout algorithms