Running a graph layout application with link layout

> > > > >

The diagram component (class IlvDiagrammer) distinguishes between node layout and link layout. The node layout is specified as a normal graph layout. The link layout executes after the node layout. It keeps the calculated node positions and only reshapes the links.

A typical use of the link layout is when the node layout should only be applied on demand (for example, by clicking on a “perform layout” button), but the link layout should be applied automatically. When the user moves the nodes interactively, only the link layout should be applied.

To set up link layout to work automatically:

Create a style sheet (CSS file) that specifies the node layout and link layout. In this style sheet, disable the graph layout and enable the link layout. You can use the JViews Diagrammer Designer to create the style sheet interactively, or a text editor to create it by editing the CSS text.
Create an IlvDiagrammer component and fill it with data from the data model.
Load the style sheet into the diagram.
Create a button that allows the user to perform the graph layout on demand.

Sample CSS file for link layout

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

In this example, a hierarchical node layout is used, and a link layout is specified in addition. The graph layout renderer is not permanently enabled, which means that the node layout is not automatically applied. Only the link layout is applied automatically whenever the diagram changes.

SDM {
  GraphLayout : "true";
  LinkLayout : "true";
}
 
node {
  class : "ilog.views.sdm.graphic.IlvGeneralNode";
  ...
}
 
link {
  class : "ilog.views.sdm.graphic.IlvGeneralLink";
  ...
}
 
GraphLayout {
  graphLayout : "Hierarchical";
  flowDirection : "Bottom";
  enabled : "false";
}

LinkLayout {
  hierarchical: "true";
}

Specifying link layout in detail

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

The SDM style rule specifies that both a link layout renderer and a graph layout renderer are created.

SDM {
  GraphLayout : "true";
  LinkLayout :  "true";
}

The link layout renderer routes links in a logical way. It corresponds to the following Java™ class:

IlvLinkLayoutRenderer

The graph layout renderer, on the other hand, is disabled, since graph layout should not be applied automatically but only on demand.

GraphLayout {
  ... 
  enabled : "false";
}

The link layout renderer is enabled by default. The LinkLayout style rule allows you to specify parameters of the link layout renderer and of the link layout.

LinkLayout {
  hierarchical : "true";
}

The parameter hierarchical tells the link layout renderer to use a hierarchical layout algorithm to route links. This declaration calls the method setHierarchical.

Applying graph layout on demand

The application that reads the style sheet into a diagram component is very similar to the previous example. The source code of the application is named Sample1a.java and is located in <installdir>/jviews–diagrammer89/codefragments/graphlayout/sample1a/src/Sample1a.java.

The link layout is applied automatically, but the node layout is applied only on demand. To perform a node layout, call the method

diagrammer.layoutAllNodes()

To implement a button that allows the user to request a node layout, you need to define a Swing action that calls the method layoutAllNodes .

You can derive your application from IlvDiagrammerApplication. This is an application that encapsulates an IlvDiagrammer component. It contains already a toolbar with several standard buttons. There is already a built-in action in Rogue Wave JViews Diagrammer that calls layoutAllNodes , so all you need to do is add this action to the toolbar, using:

toolbar.addAction(IlvDiagrammerAction.layoutAllNodes)

When you move the nodes of a graph without the graph layout renderer being enabled, the link layout renderer rearranges the links accordingly.

When you click the graph layout button, the graph layout renderer redraws the graph according to the requested graph layout.

Current section

Using layout algorithms