Apache NetBeans

Latest release

Apache NetBeans 21

NetBeans Visual Library Tutorial for Java Applications

This tutorial needs a review. You can edit it in GitHub following these contribution guidelines.

Setting Up the Application
Adding the Libraries
Creating the Container
Creating the Widgets
Enabling the Actions

In this tutorial, you will learn how to use the main features provided by the NetBeans Visual Library API.

Also, you will use 3 icons in the tutorial. You can right-click them here and save them locally, then copy them to the application’s location, after you create the application later in this tutorial. Here are the 3 icons:

Setting Up the Application

In this section, we use a wizard to create a Java application.

Choose File > New Project (Ctrl+Shift+N). Under Categories, select Java. Under Projects, select Java Application. Click Next.

1. In the Name and Location panel, type VisLibDemo in the Project Name field:

Click Finish.

The IDE creates the VisLibDemo project. Add the three images above to the main package. You should now see this:

Adding the Libraries

In this section, we add the two libraries you need to work with the Visual Library.

Right-click the Libraries node and choose "Add JAR/Folder".

Browse to the installation directory of NetBeans IDE.

In platform9/lib , choose org-openide-util.jar .

In platform9/modules , choose org-netbeans-api-visual.jar .

You now have the only two JARs you will need. You should now see this:

Creating the Container

In this section, we create the container that will hold the Scene from the Visual Library.

Define Main.java as follows:

public class Main  extends JPanel {

    *//Create the JFrame:*
    public static void main(String[] args) {
        JFrame frame = new JFrame("Graph test");
        frame.setMinimumSize(new Dimension(500, 400));
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setContentPane(new Main());
        frame.pack();
        frame.setVisible(true);
    }

    public Main() {
        initComponents();
    }

    private void initComponents() {
        *//Set the layout:*
        setLayout(new BorderLayout());
        *//Create a JScrollPane:*
        JScrollPane scrollPane = new JScrollPane();
        *//Add the JScrollPane to the JPanel:*
        add(scrollPane, BorderLayout.CENTER);
    }

}

Run the application and you should see a simple JFrame:

Now that you have a JScrollPane , you’re ready to create a scene!

Creating the Widgets

In this section, we create a separate class containing our scene. We then hook it into our JPanel .

Create a new class called GraphSceneImpl.java .

Let it extend GraphScene<String, String>.

Use the lightbulb at the side of the IDE to add import statements and abstract methods. You should now see this:

package vislibdemo;

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

public class GraphSceneImpl extends GraphScene<String, String> {

    @Override
    protected Widget attachNodeWidget(String arg0) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    @Override
    protected Widget attachEdgeWidget(String arg0) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    @Override
    protected void attachEdgeSourceAnchor(String arg0, String arg1, String arg2) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

    @Override
    protected void attachEdgeTargetAnchor(String arg0, String arg1, String arg2) {
        throw new UnsupportedOperationException("Not supported yet.");
    }

}

We’ll be using three LayerWidgets , which are like JGlassPanes in Swing. Declare them at the top of the class:

private LayerWidget mainLayer;
private LayerWidget connectionLayer;
private LayerWidget interactionLayer;

Create a constructor, initialize your LayerWidgets and add them to the Scene :

public GraphSceneImpl() {
    mainLayer = new LayerWidget(this);
    connectionLayer = new LayerWidget(this);
    interactionLayer = new LayerWidget(this);
    addChild(mainLayer);
    addChild(connectionLayer);
    addChild(interactionLayer);
}

Next, define what will happen when a new Widget is created:

@Override
protected Widget attachNodeWidget(String arg) {
    IconNodeWidget widget = new IconNodeWidget(this);
    if (arg.startsWith("1")) {
        widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
    } else if (arg.startsWith("2")) {
        widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
    } else {
        widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
    }
    widget.setLabel(arg);
    mainLayer.addChild(widget);
    return widget;
}

The above is triggered whenever addNode is called on the scene.

At the end of the constructor, trigger the method above 4 times:

Widget w1 = addNode("1. Hammer");
w1.setPreferredLocation(new Point(10, 100));
Widget w2 = addNode("2. Saw");
w2.setPreferredLocation(new Point(100, 250));
Widget w3 = addNode("Nail");
w3.setPreferredLocation(new Point(250, 250));
Widget w4 = addNode("Bolt");
w4.setPreferredLocation(new Point(250, 350));

Above, you have created four widgets, you have passed in a string, and you have set the widget’s position. Now, the attachNodeWidget method is triggered, which you defined in the previous step. The arg parameter in the attachNodeWidget is the string you passed to addNode . Therefore, the string will set the label of the widget. Then the widget is added to the mainLayer .

Back in the Main.java class, add the lines in bold to the initComponents method:

private void initComponents() {
    //Set the layout:
    setLayout(new BorderLayout());
    //Create a JScrollPane:
    JScrollPane scrollPane = new JScrollPane();
    //Add the JScrollPane to the JPanel:
    add(scrollPane, BorderLayout.CENTER);
    *//Create the GraphSceneImpl:
    GraphScene scene = new GraphSceneImpl();
    //Add it to the JScrollPane:
    scrollPane.setViewportView(scene.createView());
    //Add the SatellitView to the scene:
    add(scene.createSatelliteView(), BorderLayout.WEST);*
}

Run the application and you should see this:

Now that you have a scene with some widgets, we can begin integrating some actions!

Enabling the Actions

In this section, we enable actions on the widgets we created previously.

Change the attachNodeWidget by adding the lines in bold below:

@Override
protected Widget attachNodeWidget(String arg) {
    IconNodeWidget widget = new IconNodeWidget(this);
    if (arg.startsWith("1")) {
        widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
    } else if (arg.startsWith("2")) {
        widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
    } else {
        widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
    }
    *widget.getActions().addAction(
            ActionFactory.createAlignWithMoveAction(
            mainLayer, interactionLayer,
    ActionFactory.createDefaultAlignWithMoveDecorator()));*
    widget.setLabel(arg);
    mainLayer.addChild(widget);
    return widget;
}

Run the application. Drag a widget around and notice that alignment markers appear that help the user position a widget in relation to other widgets.

Change the GraphSceneImpl class by adding the line below to the end of the constructor:

getActions().addAction(ActionFactory.createZoomAction());

Run the application. Scroll the middle mousebutton, or do whatever your operating system requires for "zooming", and notice that the whole scene increases/decreases in size.

Now that you have a basic idea of the features that the Visual Library API provides, see the section called "NetBeans APIs for Visualizing Data" on the NetBeans Platform Learning Trail.