Introduction

This tutorial covers:

• The Model-View-Controller (MVC) pattern,
• Inner classes for event handling,
• Preparation for milestone #1 of programming project #1.

I. Model-View-Controller

Create a local directory ~/comp212/tutorials/03 for this lab and copy the files ~/comp212/tutorials/03/*.java and ~/comp212/tutorials/03/*.class.  These are the Java source code and byte code for a GUI application that meets the requirements of milestone #1 of project #1.  To see how the application behaves, run the command: java WordControl. You should see a window appear.  This window has input/output text field to the north (top), an input textfield to the south (bottom), a reset button to the east (right), and an output label field to the west (left).  This window is called the view.   It is implemented as the class WordGUI.  Now, perform the following actions.

1. Type the word hello in the top text field and hit enter.  The input text becomes _ _ _ _ _ .

2. Type the letter l in the bottom text field and hit enter.  The top text field should display _ _ l l _ , and the output label field should display Good Guess!

3. Erase the letter l in the bottom text field, type the letter a, and hit enter.  The top text field should display _ _ l l _ , and the output label field should display Wrong Guess!

4.Erase the letter a in the bottom text field, type the letter h, and hit enter.   The top text field should display h _ l l _ , and the output label field should display Good Guess!

5. You can finish the game if you wish.

The object that does all the checking of the guesses is called the model.   It is represented by the class AWord together with all of its variants (concrete subclasses) and supporting classes.  When a user types a guess letter in the bottom text field and hits the enter key, the Java virtual machine fires an appropriate event and delivers it to this text field.  This text field is programmed to respond to this event by first inquiring the AWord model to match the guess and then updating the other GUI component accordingly.  The wiring between a GUI component and the model is called a control.  The class WordControl establishes all the controls to wire the GUI view to the AWord model.  The design of this small GUI application is fashioned according what is commonly known as the Model-View-Control (MVC) paradigm.  The UML diagram below illustrates the design.

In the above diagram, class WordFactory is nor part of the MVC design.  It is a factory (see lab 02) to manufacture concrete instances of AWord.  WordGUI does not know anything about the model.  It has several GUI components (e.g. JTextFiedl, JButton) and exposes them to the outside world via appropriate getter methods (e.g. get_tfWord, get_resetBtn).   Likewise, AWord, NonEmptyWord, and EmptyWord do not know anything about the view.  They only have the intelligence to match a character and to tell whether or not they are a winner.  WordControl connects the GUI to the model by installing ActionListener objects for each GUI component of the view that needs to respond to an external event.   These ActionListener objects are usually implemented as inner classes in Java.

II. Event Handling

For a GUI component to respond to an event, you must attach to it an appropriate event listener object.  ActionListener is a special kind of event listener that is associated with  GUI components such as JTextField and JButton.  You attach an ActionListener to a GUI component by calling addActionListener (...) on the GUI component.  The following code fragment for the constructor of WordControl illustrates the attachment of event listeners to GUI components.

public WordControl()
{
   // Add controller for hangman word input/output
   _frame.get_tfWordIO().addActionListener (
      new java.awt.event.ActionListener ()
      {
         public void actionPerformed (ActionEvent e)
         {
           _aWord = WordFactory.Singleton.makeWord( _frame.get_tfWordIO().getText());
           _frame.get_tfWordIO().setText(_aWord.toString());
           _frame.get_tfWordIO().setEditable(false);
         }
      }
   );

//...

}

ActionListener is an interface, a special kind of abstract class with no code bodies for the methods and no non-static fields, with one (abstract) method: public void actionPerformed (ActionEvent e).  A concrete ActionListener must have code for this method,as shown in the above code fragment.  This method will be executed when an ActionEvent is fired and delivered to the corresponding GUI component.  In the above example, _frame.get_tfWordIO()is the top text field.  Whenever a text is entered there, the ActionListener object attached to this component will execute its  actionPerformed method. The ActionListener object attached to the top text field is created in a very special way: it does not have a name and exists only in the context of an instance of WordControl!   As such, it is called an anonymous inner class of class WordControl.

The following is a summary of how to design a GUI application in Java using the MVC paradigm.

1. Design a GUI and expose appropriate GUI components with getter methods (e.g. WordGUI).

2. Design the model with appropriate intelligence to solve the problem at hand (e.g. AWord and its concrete variants).

3. Design a controller to instantiate views and  models, and attach event listeners to appropriate GUI components in order to wire the view to the model (e.g. WordControl).

III. Milestone #1

Milestone #1 for project #1 is to build an MVC GUI application to test AWord and its variants.  Here you are given the GUI view, the control, and fragments of the model AWord and its variants.  What is left for you to program is basically NonEmptyWord.java as prescribed by the above UML diagram and the documentation for AWord. Get started!