Introduction

Applets are Java programs that are uploaded from the Web server and run on the client machine inside of a Java-enabled Web browser.  We shall restrict ourselves to working only with Java's AWT (abstract window toolkit) components instead of Swing because most current browsers do not fully support Swing applets.  Just about all the Swing components would have their own AWT counterparts.  For example the AWT counterpart for JButton is Button.  Refer to the UML diagram for Java GUI components  to see where AWT components belong in the taxonomy tree.

I. Sample Program

Create a local directory comp212/tutorials/11 for this lab and copy the files in ~/comp212/tutorials/11/AppletOnly.  These are the Java (incomplete) source code, fully working byte code, and html document for an applet that manipulates LRStruct.  DO NOT compile the Java source because ControlApplet.java is incomplete.   Use Netscape (or IE) to browse AppletOnly.html to see the applet run.  Play around with this applet to see how it behaves.  The program is designed according to the MVC pattern as shown in the UML diagram below.

In the above diagram, the model is the familiar LRStruct.   ListGUI is the view.  The controller, ControlApplet, is a subclass of java.awt.Applet.  It overrides the init () method to instantiate the view and the model, and add action listeners to the view's GUI components in order to interact with external users and update the view accordingly.

II. Basic Applet MVC Design

Model

• The model should be completely independent from the controller and the view.  In the above example, the model is LRStruct with a few of its visitors.

View

• Create a view class with the desired GUI components and appropriate accessor methods for these components.  In the above example, ListGUI is the view with various buttons and other AWT components.
• Add a constructor with an Applet parameter.  In this constructor, add the GUI components to the Applet parameter.  The Applet parameter is in effect the container for all the GUI components of the view.  As an example, here is the code for the constructor of ListGUI.

public ListGUI (Applet applet)
{
    applet.setLayout (new BorderLayout (10, 10));
    applet.add (makeViewPanel(), BorderLayout.CENTER);
    applet.add (makeUserInputPanel(), "West");
}

Controller

• Subclass Applet - As shown in the above UML diagram, ControlApplet is a subclass of Applet.
• Add a constructor to instantiate the views and their models.  The applet should pass itself to the constructor of the views as the container for all the GUI components in the views. In our example, the constructor ControlApplet () calls the Applet default constructor and then instantiates the GUI view passing itself as the argument.
  public ControlApplet ()
  {
      super (); // calls the Applet default constructor.
      _gui = new ListGUI (this);  // this Applet is the container for ListGUI's components.
  }
  
• Override init () if necessary- This should contain code to initialize the applet to a well-defined state.  When a browser opens an html document containing an applet, it calls the applet init() method.  You almost always want to override init().   ControlApplet overrides init() to add action listeners to the view's GUI components.
• Override start() if necessary - The browser will call the applet's start() method after calling init() to run the applet on the client machine. ControlApplet need not override start().
• Override stop() if necessary - When the browser no longer displays the page with the applet, it calls the applet's stop() method.  ControlApplet need not override stop().
• Override destroy () if necessary - The browser calls destroy () to free up any resources that are being used, after calling stop().  ControlApplet need not override destroy().
• Create and html document with an applet tag to embed the applet in the page.  Here is a simple example of an applet tag: <applet code = "MyApplet.class" width = 300 height = 200> </applet>.    Use your favorite editor to view AppletOnly.html.

You view an applet by using a Java-enabled browser to open an html document that contains the appropriate applet tag.  You can also use a Java utility that comes with the JDK called appletViewer to view and test an Applet by executing the command: appletViewer <html-file-name>.

Exercises

1. Write the action listener code for the Sum and the GetNth buttons.
2. Add a button to remove the Nth element from the list model.  The input for N should be read from the input text field.  You will need to write a visitor to remove the Nth element.
   

dxnguyen@cs.rice.edu