Java Notes

NetBeans GUI Projects

Previous: NetBeans IDE

Where to find tutorials and documentation

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

Version	Without the Matisse editor	With Matisse
5.5	NetBeans IDE 5.5 Quick Start Guide	www.netbeans.org/kb/55/quickstart-gui.html

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) www.netbeans.org 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.

• GUI Building in NetBeans IDE 5.5 is an excellent place to start, including a downloadable tutorial.
• Building an SDI Application with NetBeans by Chuck Emerson-Henry is a nice example of using the GUI editor.
• Building Java GUIs with Matisse: A Gentle Introduction by Dick Wall.
• NetBeans IDE 5.5 GUI Builder Visual Feedback Legend Shows some of the feedback and controls when using Matisse. Worth taking a look at after you've tried it.

Starting a new GUI project (covered in the www.netbeans.org 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:

• The declarations of the components, which are placed at the end, which is a bit unusual. You can change the names of components in the design view properties pane.
• The initComponents() method, which is called from the constructor. You can edit the constructor to add your own code as necessary (eg, to initialize your model class.
• The headers and enclosing braces of "handlers" (methods called by listeners to handle the event. You must write the code for the body of the handlers to make them do what they need to do.

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

• Layout components. Use the GUI editor to layout your program. This is the most fun because you can create some good looking designs very quickly, in contrast to the normal layout struggles with the clumsy Java layout managers. With a little practice you can get things to work pretty well.
• Edit component properties. You will want to edit some of the properties of components.

  Right click component. Some of the very most common properties can be set by right clicking the component and selecting one of the options (eg, to change the text, the name of the corresponding variable, and create a listener).

  Properties pane. There are a huge number of properties, but only a few are useful. The Properties panel puts them in several categories, and you will probably only need to use the first category, if any (Properties, Other Properties, Layout, and Accessibility).

• Listeners and handlers. If you specify that a component should respond to an event (eg, ActionPerformed for a button), the GUI editor generates an anonymous, inner-class listener, which calls a method based on the name of the component. For example, if you have button in a variable called greetingButton, when you indicate that you want an action listener by right clicking the component and selecting Events > Action, it creates a listener that calls a handler method called greetingButtonActionPerformed(). Type code for the action you want inside this method.

  Alternative - Properties pane. In the Properties window or popup there are three tabs at the top. The Events tab lets you specify which method should be called by the listener. Type in the method name and it will be created if necessary. Type your code in this method.

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.

• Blue shaded areas are generated code that you can't edit.
• Expand/collapse controls at are the beginning of each section. Just hit the "+" to expand, and the "-" to collapse the view.
• No imports are used, so all library classes will be fully qualified (eg, javax.swing.JButton instead of just JButton as a human would write it).
• Instance variables are declared at the end of the class, not near the beginning, as is the normal human style.
• The constructor calls on the initComponents() method to do all the initialization. initComponents() is in the collapsed, uneditable area below the constructor.

  The constructor itself is editable, so you can put your own initializations in it. Because you should separate your model/logic from the user interface, you may create an instance of your model in the constructor, and declare an instance variable at the end to hold it. The listener methods can then use that instance variable to interact with the model.

• The initComponents() code is generated by NetBeans, and isn't necessarily a good model for writing code yourself. If you decide to look at it, you will see several unfamiliar things. For example, GroupLayout won't appear until Java 6. Button listeners are done as anonymous, inner-class listeners, ...
• The main method is defined near the end, just above the instance variables, and contains what might be an unfamiliar way to display the window. This is equivalent to

      YourGUIClass window = new YourGUIClass();
      window.setVisible(true);

  This runs the initialization code on the EventQueue thread because there are some (uncommon) situations where it makes a difference. Don't bother to change it, but when you write your own programs you can use the simpler code above. Or you can use the NetBeans main style. In any case, it's probably easiest to just collapse this code and never take another look at it.

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.