NetBeans Visual Library Tutorial for Standard Java SE Applications

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

Contents

Content on this page applies to NetBeans IDE 7.1

To follow this tutorial, you need the software and resources listed in the following table.

Software or Resource Version Required
NetBeans IDE version 7.1 or above
Java Developer Kit (JDK) version 7 or above

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.

  1. Choose File > New Project (Ctrl+Shift+N). Under Categories, select Java. Under Projects, select Java Application. Click Next.
  2. In the Name and Location panel, type VisLibDemo in the Project Name field:

    Click Finish. The IDE creates the VisLibDemo project.

  3. Add the three images above to the main package. You should now see this:

Adding the Libraries

In this section, we add the NetBeans Platform JARs you need, to be able to work with the Visual Library.

  1. Right-click the Libraries node and choose "Add JAR/Folder".
  2. Browse to the installation directory of NetBeans IDE.
  3. In platform/lib, choose org-openide-util.jar.
  4. In platform/lib, choose org-openide-util-lookup.jar.
  5. In platform/modules, choose org-netbeans-api-visual.jar.

You now have the only NetBeans Platform JARs you will need:

Creating the Container

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

  1. Define VisLibDemo.java to contain a JFrame with a JScrollPane as follows:
    public class VisLibDemo extends JPanel {
    
        public VisLibDemo() {
            initComponents();
        }
    
        private void initComponents() {
            setLayout(new BorderLayout());
            JScrollPane scrollPane = new JScrollPane();
            add(scrollPane, BorderLayout.CENTER);
        }
    
        public static void main(String args[]) {
            EventQueue.invokeLater(new Runnable() {
                @Override
                public void run() {
                    JFrame frame = new JFrame();
                    frame.setMinimumSize(new Dimension(500, 400));
                    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                    frame.setContentPane(new VisLibDemo());
                    frame.pack();
                    frame.setVisible(true);
                }
            });
        }
        
    }
  2. Run the application and you should see a simple JFrame:

Now that you have a JFrame, a JPanel, and 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.

  1. Create a new class called GraphSceneImpl.java.
  2. Let it extend GraphScene<String, String>.
  3. 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.");
        }
    
    }
    
  4. 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;
    
  5. 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);
    }
    
  6. 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.

  7. 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.

  8. 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);
    }
    
  9. 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.

  1. 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;
    }
    
  2. 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:

  3. Change the GraphSceneImpl class by adding the line below to the end of the constructor:
    getActions().addAction(ActionFactory.createZoomAction());
    
  4. 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.
  5. Add a custom ConnectProvider to the end of the GraphSceneImpl:
    private class MyConnectProvider implements ConnectProvider {
    
        public boolean isSourceWidget(Widget source) {
            return source instanceof IconNodeWidget && source != null? true : false;
        }
    
        public ConnectorState isTargetWidget(Widget src, Widget trg) {
            return src != trg && trg instanceof IconNodeWidget ? ConnectorState.ACCEPT : ConnectorState.REJECT;
        }
    
        public boolean hasCustomTargetWidgetResolver(Scene arg0) {
            return false;
        }
    
        public Widget resolveTargetWidget(Scene arg0, Point arg1) {
            return null;
        }
    
        public void createConnection(Widget source, Widget target) {
            ConnectionWidget conn = new ConnectionWidget(GraphSceneImpl.this);
            conn.setTargetAnchorShape(AnchorShape.TRIANGLE_FILLED);
            conn.setTargetAnchor(AnchorFactory.createRectangularAnchor(target));
            conn.setSourceAnchor(AnchorFactory.createRectangularAnchor(source));
            connectionLayer.addChild(conn);
        }
    
    }
    

    Hook the custom ConnectProvider into the widget as follows:

    @Override
    protected Widget attachNodeWidget(String arg0) {
        IconNodeWidget widget = new IconNodeWidget(this);
        if (arg0.startsWith("1")) {
            widget.setImage(ImageUtilities.loadImage("vislibdemo/red.gif"));
        } else if (arg0.startsWith("2")) {
            widget.setImage(ImageUtilities.loadImage("vislibdemo/green.gif"));
        } else {
            widget.setImage(ImageUtilities.loadImage("vislibdemo/blue.gif"));
        }
        widget.getActions().addAction(
                ActionFactory.createExtendedConnectAction(
                connectionLayer, new MyConnectProvider()));
        widget.getActions().addAction(
                ActionFactory.createAlignWithMoveAction(
                mainLayer, interactionLayer,
                ActionFactory.createDefaultAlignWithMoveDecorator()));
        widget.setLabel(arg0);
        mainLayer.addChild(widget);
        return widget;
    }
    
  6. Run the application, select a widget, hold down the Ctrl key, and then drag the mouse to another widget. You should then be able to connect widgets to each other, like this:

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.

Next Steps

For more information about using NetBeans APIs, see the following resources:

Project Features

Project Links

About this Project

Platform was started in November 2009, is owned by Antonin Nebuzelsky, and has 138 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20140418.2d69abc). © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close