JGraph – Another Java Graph Framework

Last updated on 2014-09-08

After some playing with JUNG (see examples 1, 2 and 3), I feel that it will be hard to use it for the application that I am writing… I need more edge versatility that the one provided by the simple API of Jung. So some more searching brought me to the JGraph framework.
JGraph seems to provide great visual flexibility and also includes graph editing properties, which are needed in my application.
As usual, the documentations of these open-source frameworks is not very user-friendly (there is a user manual, better than the one provided by most projects), but no step-by-step guide on how to use the framework. Since I am starting to learn it, I will try to produce it as I go along.
The first example (adapted from the example provided with the framework’s source code) creates a simple graph with two nodes and a vertex.

package com.vainolo.jgraph;
import javax.swing.JFrame;
import com.mxgraph.swing.mxGraphComponent;
import com.mxgraph.view.mxGraph;

/**
 * First examples of JGraphX - Creating a simple frame that
 * contains a graph component with two vertices and an edge connecting them.
 * @author vainolo
 */
public class JGraphXLearning1 extends JFrame {
	
	private static final long serialVersionUID = 196831535599934813L;

	public JGraphXLearning1() {
		super("JGraphXLearning1");
		mxGraph graph = new mxGraph();
		Object defaultParent = graph.getDefaultParent();
		graph.getModel().beginUpdate();
		Object v1 = graph.insertVertex(defaultParent, null, "Hello", 20, 20, 80, 30);
		Object v2 = graph.insertVertex(defaultParent, null, "World", 240, 150, 80, 30);
		graph.insertEdge(defaultParent, null, "Edge", v1, v2);
		graph.getModel().endUpdate();
		mxGraphComponent graphComponent = new mxGraphComponent(graph);
		getContentPane().add(graphComponent);
	}
	
	public static void main(String args[]) {
		JGraphXLearning1 frame = new JGraphXLearning1();
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.setSize(400, 320);
		frame.setVisible(true);
	}
}

As you can see, the code is fairly simple. The JGraphXLearning1 class is a JFrame on which a mxGraphComponent is added. This component is the view of an mxGraph, which is the model of the graph.
The nice thing with this example is that it creates an editable graph, where the nodes can be moved, re-sized, the edge can be detached, attached again, you can add new edges between the nodes, change the text inside the nodes… A full-fledged editable graph in just 15 lines of code. Nice. Take a look:

Now we can start playing a bit with the code. Some useful model/view handling functions:

		graph.setCellsEditable(false);   // Want to edit the value of a cell in the graph?
		graph.setCellsMovable(false);    // Moving cells in the graph. Note that an edge is also a cell.
		graph.setCellsResizable(false);  // Inhibit cell re-sizing.
		graph.setCellsSelectable(false); // Now I can't even select the cells!!!
		graph.setEnabled(false); // Catch-All: no interaction with the graph.

		graphComponent.setConnectable(false); // Inhibit edge creation in the graph.

I searched the model for some access function to disable the creation of edges between vertices in the graph, but alas! This functionality is located in the view… strange since the re-size functions are in the model…

It’s late and I must go to sleep. In the next episode of “Vainolo learns JGraph”, I’ll start playing with node styles, and graph interaction. See you next time 🙂