Using Components with an Applet

There are two aspects to the user interaction in the game of life. Specifically, the user can interact in two ways:

• By clicking on the UI components, in this case, the two buttons.
• By clicking in the "Cell Grid" to modify the cellular structure.

In this section we will examine how the user interacts with the UI components. All UI component access is handled in the GameOfLife class, with is shown in Listing 4.1.

Listing 4.1: The Game of Life Applet (GameOfLife.java)

import java.awt.*;
import java.awt.event.*;
import java.applet.*;

public class GameOfLife extends Applet
implements ComponentListener
{
  private LifePanel lifePanel = new LifePanel();
  private Panel buttons;
  private Button startStop = new Button("Stop");
  private Button random = new Button("Randomize");
  boolean started;

  public GameOfLife()
  {
    started = true;
    addComponentListener(this);
    setLayout(new BorderLayout());
    buttons = new Panel();
    this.add(buttons,BorderLayout.SOUTH);
    this.add(lifePanel,BorderLayout.CENTER);
    buttons.add(startStop); 
    buttons.add(random);
    
//  add an action listener for the buttons
    random.addActionListener(new ActionListener()
    {

      public void actionPerformed(ActionEvent arg0)
      {
        lifePanel.randomize();
      }
    });
//  add an action listener for the buttons
    startStop.addActionListener(new ActionListener()
    {

      public void actionPerformed(ActionEvent arg0)
      {
        pressStartStop();
      }
    });
    
    
  }
  
  public void componentShown(ComponentEvent e) 
  {
    lifePanel.init(); 
  }

  public void componentResized(ComponentEvent arg0)
  { 
  }

  public void componentMoved(ComponentEvent arg0)
  {
  }

  public void componentHidden(ComponentEvent arg0)
  {
  }
  
  private void pressStartStop()
  {
    if( started )
    {
      startStop.setLabel("Start");
      lifePanel.setStarted(false);
      started = false;
    }
    else
    {
      startStop.setLabel("Stop");
      lifePanel.setStarted(true);
      started = true; 
    }
  }  
}

We will begin by examining the structure of this applet. The first thing that the applet does is to setup the layout manager. The layout manager allows the cellular simulation to be running on the top part of the applet, and the buttons to be on the bottom part of the applet.

Layout Managers

The Game of Life makes use of a Java layout manager. There are many different types of layout managers that you can choose from, but in this case we are making use of the BorderLayout manager. A border layout manager has five regions, as seen in Figure 4.2.

Figure 4.2: The Border Layout Manager

If one of the regions is not made use of, then that region is not displayed. For the Game of Life applet we are only making use of two regions: the south region and the center region. A LifePanel object is placed into the center region, and a Panel object is placed into the sough region. The Panel object, placed in the south region will contain the buttons used by the user to start/stop and randomize the simulation.

Adding Components

First, variables must be created that will hold the button panel and buttons. These three lines setup the instance variables to hold these elements.

private Panel buttons;
private Button startStop = new Button("Stop");
private Button random = new Button("Randomize");

Next these components must be placed in the correct locations. To begin with, the border layout manager is selected.

setLayout(new BorderLayout());

Next the button panel is created and the button panel is added to the south region of the layout. Additionally, the LifePanel object is added to the center panel of the layout.

buttons = new Panel();
this.add(buttons,BorderLayout.SOUTH);
this.add(lifePanel,BorderLayout.CENTER);

Finally, the two buttons are added to the panel.

buttons.add(startStop); 
buttons.add(random);

Once these steps are completed, the buttons are present on the applet. In the next section you will see how to process events related to the buttons.

Processing Events

To process events for the two buttons, ActionListener object will need to be setup for each button. The following lines of code add an action listener to the random button.

    random.addActionListener(new ActionListener()
    {

      public void actionPerformed(ActionEvent arg0)
      {
        lifePanel.randomize();
      }
    });

As you can see, the main action that is performed is to call the "randomize" method inside of the LifePanel object. The action to be carried out, by the button, is always placed inside of the "actionPerformed" method.

Similarly, the start/stop button is also assigned an action listener.

    startStop.addActionListener(new ActionListener()
    {

      public void actionPerformed(ActionEvent arg0)
      {
        pressStartStop();
      }
    });

This is nearly the same code as was used for the "Randomize" button. However, the action that is taken, is to call the "pressStartStop" method. The "pressStartStop" method will signal the "LifePanel" to either start or stop the animation.