Tutorial: Using NetBeans to Create GUIs for Java Programs

NetBeans, like Eclipse, is a free IDE used for developing programs in Java and in other programming languages. In general, we’ve found that Eclipse is more intuitive and easier to use than NetBeans, which is why Eclipse is almost the only IDE we use in CSE131/132. However, one feature that NetBeans has which is lacking from Eclipse is a visual method for developing graphical user interfaces (GUIs) for Java programs using Swing, without having to manually type in dozens (or even hundreds!) of lines of Swing code, so we will be using NetBeans for this purpose.

I. Installing NetBeans

If you are working on a CEC computer, then NetBeans is already installed and ready for use. If, however, you are using your own computer, then you’ll want to install NetBeans there. The NetBeans download page can be found at http://www.netbeans.org/downloads/ index.html. Choose your language and operating system at the upper-right corner of the Download page. Then, download the Java SE version of NetBeans by clicking the Download button at the bottom of the Java SE column.

Note: At the time of this writing, the most recent version of NetBeans was 6.5.1. Newer versions should work just as well, but note that some screens may appear differently from those shown in this tutorial.

The download should start automatically. When it is finished, run the installer program to finish setup. A link to detailed install instructions can be accessed via a link from the download page, or they can also be found here (for 6.5.1).

II. Importing your Eclipse Project

Start NetBeans. Like Eclipse, it can take a while to start up. You may be prompted to choose a location for your NetBeans workspace, just as you did when you first started Eclipse. Your NetBeans space should be separate from your Eclipse space. When it starts, you’ll notice that it looks very similar to the Eclipse Welcome screen.

Of course, since the NetBeans and Eclipse workspaces are separate, you won’t be able to see your projects from Eclipse in the Projects pane… yet. Unfortunately, Subversion support for NetBeans does not handle svn+ssh connections very well at all, so we can’t check out projects directly from the repository into NetBeans. However, NetBeans is good at importing projects from Eclipse, so this is how we’ll move our project into NetBeans.

Under the File menu at top, go to Import Project >> Eclipse Project….

Note: Ensure that you’ve updated your project in Eclipse from the repository before proceeding, to ensure you’re working on the most recent version!

In the next screen, select Import projects from Workspace and in the box below type in your local Eclipse workspace root location. Then press Next.

Note: The workspace folder is the folder containing all your projects, not just the one you wish to import. If you accepted Eclipse’s default location, then this folder is probably named workspace.

On the next dialog, you can choose which project(s) you wish to import from your Eclipse workspace into NetBeans. Check which ones you want, and then ensure that Store NetBeans project data inside Eclipse project folders is checked. This makes sure that when you return to Eclipse we can easily access any new files. Then press Finish.

When this is complete, the imported project(s) should appear in the Projects pane in the left-hand side of the NetBeans window. You can expand the project folders and open files just as you would in Eclipse.

III. Using the Form Editor

The NetBeans Form Editor is a WYSIWYG editor for create GUIs for your Java application. This editor creates the form in a new class, which NetBeans calls a JFrame form, but is really just a Java class that extends javax.swing.JFrame (except that NetBeans treats it differently). The process to create this file is very similar to that for making a new file in Eclipse: right-click on the package you’d like to put the class in, and in the resulting drop-down menu go to New >> JFrame Form…

Note: You can also create a new JPanel Form, which can be embedded in another JFrame or as an applet on a Web page, but cannot stand as its own window.

In the dialog that pops up, you will be asked to give the new class a name. Then press Finish. The Form Builder view will then automatically appear and the new file will be opened. The NetBeans window should now look something like this:

The middle section of this screen is a view of the Frame itself (without borders), which, of course, starts empty. You can change the size of this window by dragging the bottom or right sides or the bottom-right corner. Adding controls to the Frame is easy: click on the control you want in the Palette panel and then put it on the Frame where you want it, and then click to place it. You will notice that dotted lines appear as you move the control around the form. This “snaps” a component into place next to its neighbors so that it’s always in the same place relative to the component, regardless of how the window is resized. This can be a bit confusing, but generally if you start in one corner and move in a constant direction (say, place the components in the upper-left first and then move down and to the right) it generally works out well.

Once a component has been placed, it can be selected by clicking on it once. This makes a yellow box appear around the component. Then, you can adjust its properties (such as label, location, font, color, whether or not it’s active, and so on) using the Properties pane, located beneath the Palette pane.

Note: You can also select the Frame itself to modify its properties as well.

As you go along, you may want to see how your Frame looks (with the border), as it will to the end user. You can do this by clicking the Preview Design button on the toolbar above the design area… it’s the button with the eyeball on it. You can also see how the controls move when the window is resized in this view.

There are many controls available for you to use from the Palette (you can even put other frames inside of this frame). With combinations of these, you can very quickly and easily make a versatile GUI.

IV. Making things Happen

Now that we’ve designed our user interface, we’d like to make it do something other than just sit there and look good. Luckily, the Form Designer makes this part of the process easy as well. We can roughly divide the possible effects an event in the frame could have into two categories: events that modify properties of the Frame itself or components on the frame (which we’ll call Local Events for the purposes of this tutorial), or events that interact with something not part of the frame (which we’ll call Outside Events). These two categories are best implemented in separate ways.

Note: these are not mutually exclusive; a certain event could have both local and outside effects.

IV.A. Implementing Local Events

Local events can be implemented easily from inside the Form Editor, without writing any code at all. Let’s say you want to implement a Clear button that makes all of the check boxes on a form become unchecked. To implement this, and all Local Events like this, you first click on the Connection Mode button in the toolbar (to the left of the Preview Design button).

This starts the Connection mode. First, click on the component that will generate the event (in this case, the Clear button), and then click on the component receiving it (in this case, one of the check boxes). This will then bring up the Connection Wizard.

Note: the tips at the top of the design window (next to the light bulb) are very good at guiding you through this process and most others. Use them!

Note: only one component can receive an event when defining it using this method. So for this example you’ll have to repeat the process for both check boxes.

In the first Connection Wizard screen that appears, select the event that you’re listening for from the source component. In this example you’re looking for a button to be pressed, and the event corresponding to a press on a button is actionPerformed, though there are many others to choose from as well. You can also choose the method name, though the default is usually self-explanatory enough that it’s best to keep it. When done, press Next.

In the next box, you can choose whether to modify a property or to trigger a method of the target component. Since the goal here is to uncheck a potentially-checked checkbox, choose the Set Property button and scroll down to Selected. Then press Next.

In the final screen, you choose what the new value of the property of the value should be. This could be copied from another component’s property, the output of another method, or something else. For this example, the new value is an absolute (it should always be false), so simply select the Value button and then type in false in the box next to it. Then press Finish. You would then repeat this process for the other check box(es).

IV.B. Implementing Outside Events

Obviously, you’ll want your newly-created JFrame to work with other classes as well, say, the rest of the program you’ve written. This, too, is fairly easy. First, select the component on the form you want to trigger the event, and then below the button labeled Properties in the Properties tab, click the button named Events. This brings up a list of all possible events for the selected component.

Find the event you wish to wish to implement, and press the button to the right of its name with the ellipsis (…) on it. This brings up a list of all the methods handling the chosen event.

The first time you do this, the list of handling methods will be blank. Add a new one by clicking Add…, which brings up an input box where you type the name of the method handling the event. Press OK to input the new method, then select it from the list and press OK on the Handlers screen. This will now take you to the Source part of the Form Designer, and you’ll see that NetBeans has already generated a method header for you to fill in as you like. Here, I’ve made a call to the static method beansOpinion in the Demo class, using whether or not the two check boxes are checked as arguments for the method.

Note: instead of implementing the handler method in NetBeans, you can always save now and return to Eclipse to implement the method, if you’re more comfortable coding there.

Note: you may be interested in looking at the Swing code that the Form Builder has generated by pressing the plus button to the left of the line Generated Code. This may help you understand why we use NetBeans for making GUIs. But don’t change anything!

Note: You may also have some code that you’d like to execute before the window appears. For example, if your program has something like a Main or Controller class, you may want to instantiate that first, before the user can use the interface. To do this, you can add your lines of code after the public void run() line in the main method, but before the line containing setVisible(true).

IV.C. Testing in NetBeans

At this point, it would probably be a good idea to test what you’ve developed in NetBeans to see that the GUI is working as intended (or at least what you’ve implemented of it) before returning to Eclipse. To do so, run the class which contains the JFrame. This is done just as you can run a specific class in Eclipse: right click the file in the Projects pane at left, and then click Run from the drop-down menu that appears.

V. Returning to Eclipse

Now that you have finished developing your UI, you’ll want to return to Eclipse to finish implementing any methods that you may not have finished, and (more importantly) to commit your new files to the SVN repository. Close NetBeans and Start Eclipse. Open your project. The new file(s) may already appear there, or they may not. To ensure that they are all there, right click on the project folder and select Refresh from the drop down menu. (This can also be done by pressing F5, as in your Web browser). The new files should then appear, with all of your changes from NetBeans present!

Note: you will notice that NetBeans, when it opened the project, added an nbproject folder as well as a build.xml file. Eclipse won’t know what to do with them. You should leave them alone, so if you ever open up the project in NetBeans again, they will still be available for that IDE’s use.

You may wish to ensure that your program runs in Eclipse by running the file containing the JFrame code. It should behave just as it did in NetBeans.

Commit the project (including all new files, even the nbproject folder and build.xml). Congratulations, you’ve just finished your first Swing GUI!