I just came up with the idea of reproducing the GraphView demo I saw in prefuse by using the Netbeans Visual Library API.

The GraphView demo uses a Force Directed Layout algorithm to dinamically position the nodes on the screen. It’s really fast and cool. Download prefuse and experiment with it by yourself.

I wanted to achieve something similiar with the Visual Library and I succeed up to a point. The force based layout algorithm that I implemented is much simpler that the used in prefuse, so there is no spring-like movement. It looks way cooler with springs. It just uses repulsion between nodes and attraction between connected nodes.

There is also some performance issues with the Visual Library as well, the performance is not what I expected but this is maybe due to how I use the library. Or just maybe it’s just because the implementation of the layout algorithm is not as efficient as it should be. If anybody knows of a better way of using it please leave a comment in the blog.

I should warn you before that this is just a proof-of-concept on how to get a minimum force based layout algorithm working with Netbeans Visual Library. This is a starting point, it don’t think the algorithm is usable for any non-trivial app app in this state. But from here you can get the idea on how to implement your own dynamic layout (force-based or not).

This is a video of the Force Directed Layout in action:

Now let’s go and explain how I did it.

First you need a TopComponent to show the stuff.

/*
 *   DynamicLayoutDemoTopComponent.java
 *
 *   Copyright (c) 2009 Ruben Laguna <ruben.laguna at gmail.com>. All rights reserved.
 *
 *   This program is free software: you can redistribute it and/or modify
 *   it under the terms of the GNU General Public License as published by
 *   the Free Software Foundation, either version 3 of the License, or
 *   (at your option) any later version.
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *   GNU General Public License for more details.
 *
 *   You should have received a copy of the GNU General Public License
 *   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
package com.rubenlaguna;

import java.awt.BorderLayout;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;
import java.util.logging.Logger;
import javax.swing.JComponent;
import org.openide.util.NbBundle;
import org.openide.windows.TopComponent;
import org.openide.windows.WindowManager;
//import org.openide.util.ImageUtilities;
import org.netbeans.api.settings.ConvertAsProperties;
import org.netbeans.api.visual.graph.GraphScene;
import org.netbeans.api.visual.graph.layout.GridGraphLayout;
import org.netbeans.api.visual.layout.LayoutFactory;
import org.netbeans.api.visual.layout.SceneLayout;

/**
 * Top component which displays something.
 */
@ConvertAsProperties(dtd = "-//com.rubenlaguna//DynamicLayoutDemo//EN",
autostore = false)
public final class DynamicLayoutDemoTopComponent extends TopComponent implements Runnable {

    private static DynamicLayoutDemoTopComponent instance;
    /** path to the icon used by the component and its open action */
//    static final String ICON_PATH = "SET/PATH/TO/ICON/HERE";
    private static final String PREFERRED_ID = "DynamicLayoutDemoTopComponent";
    private GraphSceneImpl2 scene;
    private JComponent view;
    private static ScheduledExecutorService EX = Executors.newSingleThreadScheduledExecutor();
    private SceneLayout sceneGraphLayout;

    public DynamicLayoutDemoTopComponent() {
        initComponents();
        setName(NbBundle.getMessage(DynamicLayoutDemoTopComponent.class, "CTL_DynamicLayoutDemoTopComponent"));
        setToolTipText(NbBundle.getMessage(DynamicLayoutDemoTopComponent.class, "HINT_DynamicLayoutDemoTopComponent"));
//        setIcon(ImageUtilities.loadImage(ICON_PATH, true));
        scene = new GraphSceneImpl2();
        view = scene.createView();
        jScrollPane1.setViewportView(view);

        add(scene.createSatelliteView(), BorderLayout.WEST);
        scene.addNode("1");
        scene.addNode("2");
        scene.addNode("3");
        scene.addNode("4");
        scene.addNode("5");
        scene.addNode("6");
        scene.addNode("7");
        scene.addNode("8");
        scene.addNode("9");
        scene.addNode("10");
        scene.addNode("11");
        scene.addNode("12");
        scene.addNode("13");
        scene.addNode("14");
        scene.addNode("15");
        scene.addNode("16");
        scene.addNode("17");
        scene.addNode("18");
        scene.addNode("19");
        scene.addNode("20");
        scene.addNode("21");
        scene.addNode("22");
        scene.addNode("23");
        scene.addNode("24");
        scene.addNode("25");



        scene.addEdge("1", "2");
        scene.addEdge("2", "3");
        scene.addEdge("3", "4");
        scene.addEdge("4", "5");

        scene.addEdge("6", "7");
        scene.addEdge("7", "8");
        scene.addEdge("8", "9");
        scene.addEdge("9", "10");

        scene.addEdge("11", "12");
        scene.addEdge("12", "13");
        scene.addEdge("13", "14");
        scene.addEdge("14", "15");

        scene.addEdge("16", "17");
        scene.addEdge("17", "18");
        scene.addEdge("18", "19");
        scene.addEdge("19", "20");

        scene.addEdge("21", "22");
        scene.addEdge("22", "23");
        scene.addEdge("23", "24");
        scene.addEdge("24", "25");

        scene.addEdge("1", "6");
        scene.addEdge("2", "7");
        scene.addEdge("3", "8");
        scene.addEdge("4", "9");
        scene.addEdge("5", "10");

        scene.addEdge("6","11");
        scene.addEdge("7","12");
        scene.addEdge("8","13");
        scene.addEdge("9","14");
        scene.addEdge("10","15");

        scene.addEdge("11","16");
        scene.addEdge("12","17");
        scene.addEdge("13","18");
        scene.addEdge("14","19");
        scene.addEdge("15","20");

        scene.addEdge("16","21");
        scene.addEdge("17","22");
        scene.addEdge("18","23");
        scene.addEdge("19","24");
        scene.addEdge("20","25");

        GridGraphLayout<String, String> graphLayout = new GridGraphLayout<String, String>();
        //sceneGraphLayout = LayoutFactory.createSceneGraphLayout(scene, graphLayout);
        //sceneGraphLayout.invokeLayout();
        ForceDirectedLayout<String, String> graphLayout2 = new ForceDirectedLayout<String, String>();
        graphLayout.setAnimated(false);
        sceneGraphLayout = LayoutFactory.createSceneGraphLayout(scene, graphLayout2);
        EX.schedule(this, 50, TimeUnit.MILLISECONDS);
    }

    /** This method is called from within the constructor to
     * initialize the form.
     * WARNING: Do NOT modify this code. The content of this method is
     * always regenerated by the Form Editor.
     */
    // <editor-fold defaultstate="collapsed" desc="Generated Code">//GEN-BEGIN:initComponents
    private void initComponents() {

        jScrollPane1 = new javax.swing.JScrollPane();

        setLayout(new java.awt.BorderLayout());
        add(jScrollPane1, java.awt.BorderLayout.CENTER);
    }// </editor-fold>//GEN-END:initComponents
    // Variables declaration - do not modify//GEN-BEGIN:variables
    private javax.swing.JScrollPane jScrollPane1;
    // End of variables declaration//GEN-END:variables

    /**
     * Gets default instance. Do not use directly: reserved for *.settings files only,
     * i.e. deserialization routines; otherwise you could get a non-deserialized instance.
     * To obtain the singleton instance, use {@link #findInstance}.
     */
    public static synchronized DynamicLayoutDemoTopComponent getDefault() {
        if (instance == null) {
            instance = new DynamicLayoutDemoTopComponent();
        }
        return instance;
    }

    /**
     * Obtain the DynamicLayoutDemoTopComponent instance. Never call {@link #getDefault} directly!
     */
    public static synchronized DynamicLayoutDemoTopComponent findInstance() {
        TopComponent win = WindowManager.getDefault().findTopComponent(PREFERRED_ID);
        if (win == null) {
            Logger.getLogger(DynamicLayoutDemoTopComponent.class.getName()).warning(
                    "Cannot find " + PREFERRED_ID + " component. It will not be located properly in the window system.");
            return getDefault();
        }
        if (win instanceof DynamicLayoutDemoTopComponent) {
            return (DynamicLayoutDemoTopComponent) win;
        }
        Logger.getLogger(DynamicLayoutDemoTopComponent.class.getName()).warning(
                "There seem to be multiple components with the '" + PREFERRED_ID +
                "' ID. That is a potential source of errors and unexpected behavior.");
        return getDefault();
    }

    @Override
    public int getPersistenceType() {
        return TopComponent.PERSISTENCE_NEVER;
    }

    @Override
    public void componentOpened() {
        // TODO add custom code on component opening
    }

    @Override
    public void componentClosed() {
        // TODO add custom code on component closing
    }

    void writeProperties(java.util.Properties p) {
        // better to version settings since initial version as advocated at
        // http://wiki.apidesign.org/wiki/PropertyFiles
        p.setProperty("version", "1.0");
        // TODO store your settings
    }

    Object readProperties(java.util.Properties p) {
        DynamicLayoutDemoTopComponent singleton = DynamicLayoutDemoTopComponent.getDefault();
        singleton.readPropertiesImpl(p);
        return singleton;
    }

    private void readPropertiesImpl(java.util.Properties p) {
        String version = p.getProperty("version");
        // TODO read your settings according to their version
    }

    @Override
    protected String preferredID() {
        return PREFERRED_ID;
    }

    public void run() {

        sceneGraphLayout.invokeLayout();
        EX.schedule(this, 50, TimeUnit.MILLISECONDS);
    }
}

This TopComponent does a bunch of things:

1. sets up the GraphScene
2. adds some nodes and edges to it (forming a grid)
3. Instantiate a ForceDirectedLayout and generate a SceneLayout out of it
4. Creates an Executor that will do SceneLayout.invokeLayout every 50 milliseconds.
The GraphScene that I use is very simple. It's based on GraphScene.StringGraph:

And finally the ForceDirectLayout:

The result is shown in the picture below. Of cource, you can't see the dinamic behaviour of this layout algorithm in the picture. You'll have to download and execute <a href='/wp/wp-content/uploads/2009/03/dynamiclayoutdemo.zip'>this Netbeans Platform Application: dynamiclayoutdemo </a> (Netbeans 6.7 M2) to see it with you own eyes.

Reference:

<ul>
<li>
<a href="http://prefuse.org/">prefuse visualization toolkit</a>

</li>
<li>
<a href="http://graph.netbeans.org/">NetBeans Visual Library in NetBeans Platform 6.0</a>

</li>
<li>
<a href="http://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/index.html?overview-summary.html">Visual Library API javadoc</a>

</li>
<li>
<a href="http://bits.netbeans.org/dev/javadoc/org-netbeans-api-visual/org/netbeans/api/visual/widget/doc-files/documentation.html">Visual Library documentation</a>

</li>
</ul>