GUI Development with Java

Mr. Darwin takes a look at Java and describes the steps for writing a user interface in Java.
MVC In Java

Model-View-Controller provides a powerful model for separating the functionality of a GUI-based application into three constituent parts. Putting it simply, the model is the code that keeps track of the data. The view is the code that displays the model on screen. The controller is the code that responds to user actions such as mouse clicks, button presses and the like. This separation, first formalized in 1988 for use with Smalltalk-80, has become the dominant model for object-oriented developers building GUI-based applications. And with good reason: it partitions the code into three (or more) reasonably small modules. It provides maximum flexibility—there can be more than one view and more than one controller. In a slide show program, for example, you might have a Slide Show view and a Slide Sorter view. Either or both would be visible, each in its own window. With MVC, a change to either would immediately be reflected in all the views. So a results-oriented way of looking at MVC is a way of making all the views on your data be dynamically self-updating as the data changes.

Let's take that slide show program as a simple example, which I've called JabberPoint (no relation at all to PowerPoint). The main program (see Listing 3) simply creates the model, the view and the controllers, then connects them together.

The data or model is maintained by a class called JPModel. It is little more than an array of Strings, except that each line has a Style associated with it. The model also has certain other data, such as the current slide number. Plus, it has methods for updating the data. This version of the program doesn't have any slide-editing capabilities (I still use vi to edit the show's text), but it does have methods—in the model—to change the current slide number.

Note that this is not the full source code, but only the fragments needed to show the MVC architecture. If you want the full source code to compile or use, go to the course author's web site (see sidebar) and follow the link to Free Software.

  • The model contains the data and functionality, and can be displayed by many views. It commonly includes a main program and may subclass java.util.Observable.

  • The view is the GUI or display of the model's data. It commonly creates a frame, or is an applet, and adds listeners. It may implement java.util.Observer.

  • The controller handles events for the model and the view. It commonly implements listener interfaces and responds to events by calling methods in the model.

The Model

Part of the model,, is shown in Listing 4.

The View

The simplest view is a SlideShow view, which simply paints the current page in large letters. This view is a Component that can be embedded in a Frame or an Applet.

How does it know when its data has changed? Note the method update. This is not the update method of AWT, but is part of the Observable interface. This update simply saves the data that was passed in as a Slide and calls AWT's repaint, which will call the paint method a few lines below it in the listing.

There can be more than one view. A slide-show program usually has three: the slide show (which we implement), the Outline and the Sorter (which we do not yet provide). Each of these would be a different view and would be registered as an Observer for the model as above. You would switch between them with a CardLayout or some kind of Tab Layout manager, or they could each be in a Frame. Since they use Observable/Observer, when you update the data in one window it would immediately be updated in all of them.

The Controllers

The controllers are called when the user does something. The is a simple controller that responds to PageUp and PageDown (or Enter) and moves the current page up or down as appropriate. It is “connected” with

frame.addKeyListener(new KeyController(model));

A Controller does not have to be an explicit listener. We might, for example, use a MenuBar as a listener and connect it with the statement

frame.setMenuBar(new MenuController(view,model));
after the instantiation of KeyController in our main program. It then calls methods on the Model, such as nextPage.

We can add additional functionality such as loadFile. When we get around to writing the editing part of this program, we can add methods such as saveFile, newFile, etc., to the model and call them from here.

One complication is that the MenuController may need access to the top-level frame (just for purposes of Dialog creation), but the view is a component inside the frame, and we don't wish View to know too much about its environment. One way around this is to pass the frame into the MenuController's constructor; another is for the view to have a getFrame method.



Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

GUI application

vasishta's picture


I am planning to develop a GUI Java application which can generate a console application window which shows the list of files created by the press
of a button component on the GUI window application.
Further more, another button which can open up the created files in a notepad window and its help files be displayed in
using a pdf viewer.

Could you please help me on how to get going on this ...

I already have the GUI window developed with necessary components/buttons but they are not fully functional yet in Netbeans IDE Swing environment.

Any help is greatly appreciated