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