Use JGraph to create a Wikipedia browser

Get started with an open-source, Swing-based library for creating graphs

1 2 3 Page 2
Page 2 of 3

Create the graph

Before diving into creating graphical elements for the Wikipedia browser, let's make sure we agree on the definition of a graph: a graph is nothing but a collection of nodes with edges connecting them. It may seem simplistic, but that is all you need for now. In the Wikipedia browser, a Lemma will be represented as a node and a link will be represented as an edge that connects to a node. To summarize: the current lemma is displayed as a node, the link to another lemma as an edge, and any lemma the current lemma links to is also displayed as a node.

Armed with this knowledge you can safely begin using the JGraph library to map and display the links between lemma and lemmata on Wikipedia. The groundwork for the graph is shown in Listing 5.

Listing 5. Creating the model and the view

GraphModel model = new DefaultGraphModel();
JGraph graph = new JGraph(model);

The MVC design pattern in JGraph

JGraph uses the model-view-controller design pattern, which should be familiar to most Java developers. In this case, you will use the default model that is provided with the JGraph library, the JGraph class. JGraph is the central class of the JGraph package. It extends Swing's JComponent and thus can be used to actually show the graph.

Once you have a model you can populate it with data (as shown in Listing 8). In JGraph terminology all elements of a graph are cells. You will first create cells to represent the lemmata and the edges connecting the lemmata. In Listing 6 I have created the cells first and then added them all at once to the graph.

Listing 6. Creating cells and adding them to the JGraph

// A List of the cells that will be added to the model
List<DefaultGraphCell> cells = new ArrayList<DefaultGraphCell>();
// Create a cell for the Lemma
DefaultGraphCell lemmaCell = createCell(lemma.getName(), width * numberOfLinks/2, 250);

The next step is to loop over the links, create a node for every lemma that your lemma links to, and connect the two nodes with an edge, as shown in Listing 7.


Listing 7. Creating and connecting nodes and edges

double x = 0;
double y;
for (String link : lemma.getLinks()) {
            if (lemma.getLinks().indexOf(link)  % 2 == 0) {
                y = 50;
            } else {
                y = 450;
            DefaultGraphCell currentLinkedLemma = createCell(link, x, y);
            DefaultGraphCell currentLink = createEdge(lemmaCell, currentLinkedLemma);
            x = x + width;

private  DefaultGraphCell createCell(String name, double x, double y) {
        DefaultGraphCell cell = new DefaultGraphCell(name);
        GraphConstants.setBounds(cell.getAttributes(), new Rectangle2D.Double(x, y, width, height));
        GraphConstants.setBorder(cell.getAttributes(), BorderFactory.createRaisedBevelBorder());
        GraphConstants.setOpaque(cell.getAttributes(), true);
        GraphConstants.setGradientColor(cell.getAttributes(), Color.LIGHT_GRAY);
        cell.addPort(new Point2D.Double(0, 0));
        return cell;

 private DefaultGraphCell createEdge(DefaultGraphCell source, DefaultGraphCell target) {
        DefaultEdge edge = new DefaultEdge();
        edge.setSource(source.getChildAt(source.getChildCount() -1));
        edge.setTarget(target.getChildAt(target.getChildCount() -1));
        GraphConstants.setLabelAlongEdge(edge.getAttributes(), true);
        GraphConstants.setLineEnd(edge.getAttributes(), GraphConstants.ARROW_CLASSIC);
        return edge;

Notes about the code

Creating layout in JGraph
One thing JGraph does not offer is a way to automatically create a good layout. For instance, when developing the Wikipedia browser it is necessary to assign x and y coordinates to nodes, otherwise all the cells would be displayed on top of each other. If you create a lot of graphs, or very complex ones, you might want to consider purchasing JGraph Layout Pro , an additional package available from the makers of JGraph. JGraph Layout Pro presents a number of layout algorithms that automatically create usable layouts so that you do not have to assign node coordinates manually.

The x and y variables shown in Listing 7 are used to position cells in the graph. Because a Wikipedia lemma can have a large number of links to other lemmata, you will display the linked lemmata in two rows, thus reducing the horizontal screen space required to display the resulting graph. You might notice the edges are not given any coordinates at all. This is not necessary because JGraph is aware of the relationship between the edge and the nodes and will position the edges automatically, based on the positions of the source and the target of the edge.

Note that the user object in a cell can be any object. Using Strings is just an easy solution for this exercise. Another thing to note is that every cell has an attribute map that holds name/value pairs. I've used the GraphConstants utility class to set these. As you can see, a lot of visualization options are available. The port construct can be regarded as a specific point on the node that the edge connects to. A node can have a number of ports.

The last step in creating the graph is to populate the model with the cells that have been created, as shown in Listing 8.


Listing 8. Populating the model


And that is it -- besides the usual Swing stuff that needs to be inserted to actually show a window with content to the user. (See the code archive for the complete application source.)

1 2 3 Page 2
Page 2 of 3