JasonMirra.com

Fast and Effective GUI Building in Java

This article is geared towards people who:

• Create Swing GUIs by hand.
• Have used the Netbeans GUI builder, but don't use Netbeans as your main IDE.
• If you are one of the people who copy/pastes Netbeans generated code into Eclipse, this is especially for you :)

I am going to introduce to you the way that I create GUIs for my software applications. This methodology allows for:

• the quick creation of GUIs
• seperation of logic from messy GUI code

Preparation

1. Make sure you have Netbeans installed.
2. Go to http://www.netbeans.org/downloads/
3. Get the version which has Java SE
4. Create a new Netbeans Project. You'll see I named mine "My Java Test"
5. Create a new package called "gui"
6. Create a subpackage of "gui" called "beans"
7. Right-click the "gui.beans" package and choose "New → JFrame Form"
8. As you can see, mine is called "MyFrame_Beans"

Click on "Form MyFrame_Beans" in the inspector. Look over to the right for the "Variables Modifier" field, and change it to "protected"

Now you are ready to drag an drop components from the Palette to create your GUI. For this example, I am going to make a login screen.

So I will drag some Labels, TextFields, and Buttons to the frame area.

If you have never used Netbeans, it takes a little while to get used to it. You'll find that it requires some finesse and attention to details to get it to do what you want.

After you have dragged the components to the correct positions, right click each one and choose "Change Variable Name" from the menu. My naming convention is usually int the format of nameGUIType.
So the "Submit" button would be named submitButton.

Now, we want to respond to user actions. After I double-click the "Submit" button, Netbeans brings me into the code at the location for the button's ActionListener. Put any sort of easy validity checks inside of this Beans class. I am going to check to make sure the username and password fields are non- empty.

Notice how the compiler is complaining that there is no login() method yet. Scroll up and change this to an abstract class and add an abstract method called login.

You are now done with the Netbeans side of things. Type CTRL-A, CTRL-C to copy all of this source code to your clipboard. In your IDE of preference, create a class with the same name and paste the code into it. Inside of the "gui" package of your IDE, make a new class called MyFrame which extends MyFrame_Beans. Now, you just override the abstract method, and you are good to go! All of the messy GUI code is inside of the "beans" class and all you have to deal with now are the abstract method implementations.

Recap

To recap this whole process:

• Create Frames/Panels inside of Netbeans. (ex: MyLoginScreen_Beans.java)
• Copy paste the class from Netbeans into the "gui/beans" directory in your favourite IDE.
• Create a class with the same base name inside of the "gui" directory. (ex: MyLoginScreen extends MyLoginScreen_Beans)
• Override the abstract methods.

© 2012 Jason Mirra