How to Create Visual Applications in Java?

My excellent colleague Java evangelist Daniel Abrams wrote me an e-mail in response to my description yesterday of how to create JConsole plugins: "I did not know that the visual library can be used outside of NetBeans. Do you need a special build of the library? Do I need to build it myself or is there a standalone version that I can download?"

This is a good question and the answer is illustrative of how interwoven NetBeans IDE is with the NetBeans Platform. Look in your NetBeans installation folder and you'll find a folder called "platform7", with this content:

In other words, literally, the content of the folder above is the NetBeans Platform. Many of the JARs that make up the NetBeans Platform can be used outside a NetBeans Platform application. Last October I wrote about this, in a blog entry entitled NetBeans APIs Outside of the NetBeans Platform.

Follow the steps in that tutorial and you'll have a standard Java application that makes use of some of the typical JARs from the NetBeans Platform.

In other words, several typical scenarios developed on the NetBeans Platform can also be developed outside of it. Another similar scenario is illustrated in the article I wrote yesterday, How to Get Started with JConsole Plugins, where the Visual Library API is used to inject some graph functionality into the JConsole. And so, in response to Chuk's questions "Do you need a special build of the library? Do I need to build it myself or is there a standalone version that I can download?", the answer is: "No, you don't." Download NetBeans IDE, take the two JARs that are highlighted in the screenshot above, put them on your app's classpath, and you're ready to create visual Java applications:

Let's get started for real now. To create visual applications, you need some kind of Swing container within which you need a JScrollPane. Then you create your visual "scene" within that JScrollPane. There are several interesting classes that you can extend to make your visual application. Have a look at the Javadoc or take a stroll through the tutorial, though not all of the tutorial is intended for use outside of the NetBeans Platform.

Now that you have a Swing container with a JScrollPane, create a new Java class that extends GraphScene. Fill it out as follows:

package demo;

import java.awt.Image;

import java.awt.Point;

import java.util.Random;

import javax.swing.ImageIcon;

import org.netbeans.api.visual.graph.GraphScene;

import org.netbeans.api.visual.widget.LayerWidget;

import org.netbeans.api.visual.widget.Widget;

import org.netbeans.api.visual.widget.general.IconNodeWidget;

import org.openide.util.Utilities;

public class DemoGraphScene extends GraphScene {

private LayerWidget mainLayer;

private Image image;

private Random r = new Random();

public DemoGraphScene() {

mainLayer = new LayerWidget(this);

addChild(mainLayer);

image = Utilities.icon2Image(

new ImageIcon(getClass().getResource("/demo/chuk.png")));

addNode("Chuk");

}

@Override

protected Widget attachNodeWidget(Object arg0) {

IconNodeWidget widget = new IconNodeWidget(this);

widget.setImage(image);

widget.setPreferredLocation(new Point(10, 20));

mainLayer.addChild(widget);

return widget;

}

@Override

protected Widget attachEdgeWidget(Object arg0) {

return null;

}

@Override

protected void attachEdgeSourceAnchor(Object arg0, Object arg1, Object arg2) {

}

@Override

protected void attachEdgeTargetAnchor(Object arg0, Object arg1, Object arg2) {

}

}

Most of the above code is self-explanatory, I believe. You have a LayerWidget which you add to the scene. Then you add an IconWidget, which you add to the layer. One interesting thing to note is how the icon is converted to an image, via a utility method from the NetBeans Utilities API, which you have already put on your classpath, together with the Visual Library API. In other words, there's a bunch of stuff that NetBeans Platform developers use that can also be used in your own smaller Java applications, as is the case here.

To wrap up, we need to instantiate the GraphScene class from our JFrame and then set the JScrollPane so that its port view will contain the "scene". Here's how we do that, nice and easy via the JFrame constructor:

Next, I added a random picture to my app's source structure and then ran the application. And the result should be a window pane with a picture inside of it.

Next, let's turn the image into a movable object. The user should be able to drag and drop him with their mouse. Hmmm. That will mean a lot of coding, right? Wrong. Here's all I needed to add, i.e., just line 6 below:

And now, when I run my app, I can use my mouse to drag the image to a different location!

#java #app