Perforce JViews Diagrammer Code Example: Tree Layout (CSS Version)

Description

This sample shows how to use the Tree Layout algorithm in Perforce JViews Diagrammer. It shows how to enable the Tree Layout using CSS, and how to change Tree Layout parameters by using a mutable style sheet.

A version of the Tree Layout sample that does not use CSS can be found here

How to Use the Code Example

• The Tree Layout algorithm is primarily designed for pure trees but it can also be used for other graphs. The Tree Layout arranges the nodes of a tree horizontally, vertically, or radially, starting from the root of the tree.
• This application shows a diagrammer component that displays a graph rendered from an XML file. You may change the graph sample using the list at the top of the application.
• The application also has interactor buttons on the top of the window. They are: select, zoom in, zoom out, zoom box, zoom level 1, zoom to show all (fit to contents) and pan.
• You may use the select interactor to select a root node for the Tree Layout.
• Below the graph window there are two buttons:
  • Random, which performs a Random Layout.
  • Layout, which uses the Tree Layout algorithm.
• Layout is performed when you press these buttons. If the auto layout checkbox is selected, layout is also performed whenever you change any layout parameter. This allows to see the effect of layout paramters immediately.
• If the auto fit to view checkbox is selected, the view fits the zoom automatically whenever a layout is performed.
• Under the buttons, there are lists that allow you to select the layout mode, the flow direction, the global link style, and the global alignment option. You may also change the offsets between siblings, between branches, or between a parent and its children. For details, see the corresponding section of the User's Manual.
• Note the difference between the tip-over alignment and the tip-over layout mode. Tip-over alignment affects all nodes. The tip-over layout mode tries to fit the layout best to the aspect ratio and hence affects only some nodes. For instance, the effect of the tip-over layout mode may not be visible for the medium graph with default offsets and a bottom or top flow direction. This is because this graph fits best to the aspect ratio without any tip-over alignment. Of course, this depends on which node is chosen as the root node.
• The difference between the radial and the alternating radial mode is most visible with the large sample graph. The tip-over alignment option has no effect in the level and radial layout Modes.
• The balloon mode works best with the samples named "balloonXXX". The balloon mode has additional modes for radius and angles that occur in the layout. These options are only displayed when the balloon mode is selected. For details, see the corresponding section of the User's Manual.
• The status line at the bottom displays a message indicating the last action performed. During layout, the status line shows the percentage of the layout task that has been completed.

How to Run the Code Example as an Application

This code example can be run as an application. The installation directory contains an executable JAR file, diagrammer-treelayout.jar, that allows you to execute the code example with a double click from a file browser. Note that if you are using Internet Explorer, you can open the installation directory and execute the JAR file from the browser. This technique may not work in other Web browsers.

Alternatively, you can run the code example application from the command line. First check that the Ant utility is properly configured. If not, see the instructions on how to configure Ant for Perforce JViews.

Then, go to the installation directory of the code example and type:

ant run

Topics Covered

• Diagrammer.
• Graph Layout
• Tree Layout in CSS
• Mutable Style Sheet
• Tree Layout Parameters

Installation Directory

The Tree Layout (CSS Version) code example is installed here.

Classes Involved

• ilog.views.graphlayout.tree.IlvTreeLayout
• ilog.views.graphlayout.random.IlvRandomLayout
• ilog.views.sdm.util.IlvSDMMutableStyleSheet
• ilog.views.diagrammer.IlvDiagrammer

Source Files

• TreeLayoutApp