Simplified GUI Code Generation

Fully Qualified Class Names
When we design JFrame, JPanels and any other GUI component in NetBeans the generated code contains fully qualified class names of the used classes.

For example let us create a sample JFrame form and add some components to that form through the form designer.

Let us keep the components to minimum as this is just an example. So we have added one label one text field and a button.
When we can see in the folded generated code for init components is all the components are defined and instanciated using the fully qualified class names.

More Human way of code writing
When we write code manually usually we do not write the fully qualified names, we make use of the import option and import all the classes at the top and use just the class names.

NetBeans IDE 6.5 Beta onwards we have a way to do just that. Now we can get simplified code through configuring NetBeans IDE and asking for simplified code.

Select the root component of the form from the Inspector panel. For our example we have clicked on the Form MainForm root node in the tree as shown above.

Now in the properties panel...

There is a new property named Generate Full Classnames and which will be by default checked if you havent done any setting yet. Let us uncheck that checkbox to make our code simpler.

Now the code looks simpler and easy to understand. This is how I will write the code if I write it manually, isn't it?

If you like this setting and if you want it to become the default behavior of the IDE then we have a global setting for it in the Tools > Options dialog box. Just select the Miscelleneous section and the GUI Builder tab. Ensure that Generate Fully Qualified Names of Classes checkbox is unckecked.

With Regards
Tushar Joshi, Nagpur

Matisse GUI designer - Seperation of Concerns

I like the separation of concern concept and I often use it while creating GUI applications. In Java I use interfaces to achieve separation of concern technique.

Let us explore this concept through an example. We will use NetBeans IDE 6.1 final as editor. The Matisse GUI editor will be used to design the GUI and then keep the generated GUI code separate from the main application logic as much as possible to apply the technique.

Let us assume a small application which will show a window with a text box for the user to type name. We will have two buttons Greet and Close. Greet will show a message with Greetings for the typed name and Close will close the application.

Once we have our expectations set right we can start designing the application and the logic. The main aspect of the separation of concerns concept is to keep the concerns seperate. There is one concern of showing the GUI and receiving user input from that GUI. The second concern is to show the greeting for the received name.

suppose we have a design like:

SimpleWindow as our GUI Frame class
SimpleExample as our main class

I will introduce one interface now
ISimpleListener for disconnecting the GUI from application logic.

I have designed a simple GUI for this application by starting a JFrame form file in NetBeans new file wizard. The design contains a text box and two buttons as we decided.

By double clicking the buttons we can generate the event handlers in the designer. After double clicking the buttons IDE generated the required code for the event handlers. Now we need an interface to notify the events to anyone who will implement the interface.

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/

package com.company.simpleview;

/**
*
* @author Tushar Joshi
*/
public interface ISimpleListener {

public void close();

public void greet(String text);

}

This can be done by modifying the generated code and by introducing the interface in constructor and keeping a reference in the class.

Then I will call the methods from the interface when the event handlers will be called from GUI.

This is the only change we have to do in the GUI generated class. This is the minimum code we need inside the generated class. Keeping the generated class with minimum custom code will also help me change and regenerate the code again safely.

In the main class SimpleExample now I will use this SimpleWindow class and I will implement the interface so the events notification will be received by my main class and I can write my logic there.

/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
package com.company.simpleview;

import com.company.simpleview.gui.SimpleWindow;
import java.awt.EventQueue;
import javax.swing.JOptionPane;

/**
*
* @author Tushar Joshi
*/
public class SimpleExample implements ISimpleListener {

private final SimpleWindow simpleWindow;

public SimpleExample() {
this.simpleWindow = new SimpleWindow(this);
}

public void show() {
EventQueue.invokeLater(new Runnable() {

public void run() {
simpleWindow.setVisible(true);
}
});
}

/**
* @param args the command line arguments
*/
public static void main(String[] args) {
new SimpleExample().show();
}

public void close() {
EventQueue.invokeLater(new Runnable() {

public void run() {
simpleWindow.setVisible(false);
}
});
}

public void greet(String text) {
JOptionPane.showMessageDialog(simpleWindow, text);
}
}

One thing to note here is if I want the GUI in a different way I can change the GUI provided that I dont break the interface and the notifications. The two classes are connected only through this interface to communicate with each other.

This technique is my favorite technique for GUI applications.

with regards
Tushar Joshi, Nagpur

Eclipse Project using GUI designed from NetBeans IDE 6.1 Beta

My office uses Eclipse for the main development projects. This was a decision taken in the beginning of the product life cycle and must be maintained for the whole project as the sand boxes and developer documentation release documentation contains references to Eclipse.

When there is a need of decent GUI to be developed my team members face challenge playing with different layout managers and hand coded Java classes. The GUI building mechanism in Eclipse is available for commercial plugins like MyEclipse which we are not willing to use as company policy.

NetBeans IDE 6.1 Beta comes to rescue us from this situation. NetBeans IDE 6.1 Beta can import the Eclipse project as it is and even without shifting the source files. It only creates a configuration folder for the nbproject files and maintains the project in the Eclipse workspace. This provides a facility of working in same code base with Eclipse IDE as well as NetBeans IDE at the same time.

As an example let us see one simple PhoneBook application which I started as a project in Eclipse 3.3 Europa.


I used the Eclipse Project Importer module in NetBeans to import the project by specifying the workspace of the PhoneBook project. (Please refer to earlier post for importing eclipse projects). We can see below the project as seen in the NetBeans IDE.


In NetBeans I started the JFrame wizard by right clicking the package and choosing the
New > JFrame Form option...


NetBeans offered me to type the name of frame which i filled as PhoneBookFrame and clicked Finish to complete the wizard.


NetBeans created JFrame form class for me. NetBeans shows GUI classes with Design as well as source editors and we have facility to use the Matisse GUI designer available in NetBeans.


I designed a decent GUI on the JFrame very quickly by dragging the controls and assigning them appropriate properties in the properties window. NetBeans created appropriate code in the PhoneBookFrame.java class for me automatically.

Then I copied the code inside the main method of the JFrame auto-generated class to my main method in PhoneBookDemo.java main class and ran the project to see the application GUI.


The real magic starts now when I came back to my Eclipse editor. I refreshed the project and could see the newly created PhoneBookFrame.java class in the project file list. There is no error shown this proves that NetBeans does not use any custom package not available in Java distribution. Even if use the Matisse GUI designer the code emitted is using standard Java packages and classes.


So when I executed the code in Eclipse it also showed the same GUI. Wow! this is too good. Now I do not have any problem designing GUI even in my Eclipse projects.

I just have to import the project in NetBeans and design and generate the GUI classes through the goodness of NetBeans Matisse designer and then I can continue development even in the Eclipse editor for the rest of the project.

I think NetBeans has done a great job in providing the Eclipse Project Importer and especially the feature of working simultaneously keeping the workspace and the source code at the same place. This way I can assign the GUI design to one team member who will work on NetBeans only and handle all the GUI designing tasks and rest of the team can continue in routine tasks of calling the GUI classes.

This will also provide my team members exposure to NetBeans IDE even if they work on Eclipse as their main development IDE. Who knows for the next project we may opt for NetBeans IDE altogether.

with regards
Tushar Joshi, Nagpur