Java Notes

NetBeans GUI Projects

Previous: NetBeans IDE

Where to find tutorials and documentation

Check for the most current documentation and recent articles. There are tutorials at, both for developing Java program with the Matisse GUI editor, and without, and for different versions of NetBeans.

VersionWithout the Matisse editorWith Matisse
5.5 NetBeans IDE 5.5 Quick Start Guide

The Matisse tutorials have good Flash animations showing how things were done. You can read the main page easily, but you'll need a reasonably fast Internet connection to download the animated Flash lessons.

Starting a new GUI project in NetBeans

My notes below overlap the (better) tutorial to some extent (see above).

Matisse is the name given to the GUI builder in NetBeans. It generates code from the WYSIWYG design. This is an excellent GUI editor, and with a little practice you can create attractive GUIs very quickly.

Tutorials. In addition to the notes below, you can learn how to use the Matisse editor the following places.

Starting a new GUI project (covered in the tutorial)

These instructions assume the project window is in the upper left, and the properties window is in the lower right of the screen. You might find them minimized with icons along left/right screen edges.

  1. (Menu) File, New Project....
  2. (Dialog) Take the default General and Java Application. Click Next.
  3. (Dialog) Specify where you want it, and what to call the project directory. Unselect Create Main Class because you'll use the GUI class as the main class. Set as Main Project should be checked. Click Finish. This creates a project with the default package, but we'll create a project in the next step.
  4. (Project pane, right click the project) Select New, JFrame Form...
  5. (Dialog) Fill in the Class Name and Package fields. You can leave your program in the package, but it is highly recommended to create a named package. you can create multilevel packages by simply typing the the packages names separated by dots, eg. com.fredswartz.flograf . Click Finish.
  6. You now have a working program with a functioning main program and (empty) window. Try running it. The code that NetBeans generated contains a main method, so it runs and does nothing. You'll have to confirm that this is the "main class" (where the main method you want to use is located) the first time you run it.

GUI editor - Toggle between Source and Design views

At the top left of the toolbar for GUI editor there are Source and Design buttons. Click on Source to see the generated code, and Design to work on the the window's appearance.

Design view. The default view is GUI design view, which shows approximately what the window will look like. You can select GUI components from the pallette at the top right, and click on the window to place them. You can drag and stretch them to get the right layout.

Source view. This shows the code that has been generated by NetBeans to build this GUI. The code with the blue background, called "guarded text", is uneditable. The sections in white can be edited to customize the code in several ways, but especially to add data binding code to connect it to your model/logic. The parts that are uneditable are:

There are several things that you need to do to make this into a useful program.

GUI editor - Structure of the generated source code

NetBeans automatically generates a lot of code for the GUI. Most of it can be ignored, and you only have to write the code in the event handlers, and initialize your "model" (logic) in the constructor.

GUI editor - Connecting components to code (listeners, handlers) - Data binding

To create a button you would put the button on the JFrame, or select it if it's already there, then right click the component and select Edit Text to put the right text on the button top. To add code to handle the actionEvent that is generated when a button is clicked, do the following.

  1. Choose a good variable name. Right click the component and select Change Variable Name... to set the variable name to something meaningful.
  2. Listener. Right click the component and select Event > Action > actionPerformed. This will generate a listener, and generate the top and bottom lines of a "handler" method that is called by the listener when the button is clicked.
  3. Handler method. The name of this methods is the name of the JButton variable that you chose in a previous step, followed by "ActionPerformed", so choose a good name for the button. Write code to do what you want inside this method. Typically this code will have some interaction with the model and other components.