Tick 5: GUILife

Windows and Layout Managers

A Swing application starts with a desktop window. This functionality is provided by the JFrame class, and the easiest way to use it is to extend it. Here’s your starting point:

package YOUR-PACKAGE.tick5;

import javax.swing.JFrame;

public class GUILife extends JFrame {
    
    public GUILife() {
        super("Game of Life");
        setDefaultCloseOperation(EXIT_ON_CLOSE);
        setSize(500,400);
    }

    public static void main(String[] args) {
        GUILife gui = new GUILife();
        gui.setVisible(true);

    }

}

The window is a container for other components, which can themselves be containers for other components, and so on. To achieve this the Swing libraries apply the Composite design pattern, as discussed in lectures:

It is therefore possible to add anything that derives from Container, and a quick Google will tell you that you just need the add(...) method. Try adding this to the bottom of your GUILife constructor and running it again:

add(new JButton("Button 1"));

You should see a button that fills the window labelled “Button 1”. Now add another button so you have:

add(new JButton("Button 1"));
add(new JButton("Button 2"));

You will find button 2 has replaced button 1 (which is nowhere to be seen). This is because each Container is associated with a LayoutManager that tells it what to do if it finds itself with multiple ‘children’. In this case, the default is a BorderLayout. This has one central component and four satellite components above, below, left and right of it respectively. When you don’t specify where you want a new components to go, it assumes you mean the central bit and puts it there, displacing whatever was there before. To understand this layout better edit your constructor to contain:

add(new JButton("Centre"));
add(new JButton("North"), BorderLayout.NORTH);
add(new JButton("South"), BorderLayout.SOUTH);
add(new JButton("West"), BorderLayout.WEST);
add(new JButton("East"), BorderLayout.EAST);

Play this and you will be presented with all five button laid out as described. Try resizing the window and you should start to see why the BorderLayout is named. The border elements only stretch along the direction that touches the window, while the central position scales fully.

There are other layouts available, including BoxLayout, CardLayout, FlowLayout, GridBagLayout, GridLayout, GroupLayout and SpringLayout. They are all useful for different types of application and you can find out more by looking here

In this tick you will be using a BorderLayout for the main interface, with a visualisation of the board as the central component, and controls in the WEST and SOUTH layout placement:

Adding GameOfLife Functionality to GUILife

Your GUILife class should replace your GameOfLife class from tick 4, keeping the key functionality.

public GUILife(PatternStore ps) {
    super("Game of Life");
    mStore=ps;
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(1024,768);
}

Creating the Skeleton Layout

There are three main sections to the interface: the game panel, the patterns panel and the control panel.

public GUILife(PatternStore ps) {
    super("Game of Life");
    mStore=ps;
    setDefaultCloseOperation(EXIT_ON_CLOSE);
    setSize(1024,768);

    add(createPatternsPanel(),BorderLayout.WEST);
    add(createControlPanel(),BorderLayout.SOUTH);
    add(createGamePanel(),BorderLayout.CENTER);

}

private void addBorder(JComponent component, String title) {
    Border etch = BorderFactory.createEtchedBorder(EtchedBorder.LOWERED);
    Border tb = BorderFactory.createTitledBorder(etch,title);
    component.setBorder(tb);
}

private JPanel createGamePanel() {
    // TODO
    return new JPanel(); // temporary return 
}

private JPanel createPatternsPanel() {
    JPanel patt = new JPanel();
    addBorder(patt,"Patterns");
    // TODO
    return patt; 
}

private JPanel createControlPanel() {
    JPanel ctrl =  new JPanel();
    addBorder(ctrl,"Controls");
    // TODO
    return ctrl;
}

Connecting the Buttons

JButtons generate ActionEvent objects when clicked. Anything that implements the ActionListener interface can register with a JButton to receive these event objects. This is an application of the Observer design pattern.

There are three ways to achieve this:

• Implement ActionListener explicitly. Make your class implement the interface, then register with the button directly. This is a pain if you have multiple buttons since the handler needs to check which button was clicked. E.g.

public class ButtonDemo extends JFrame implements ActionListener {
    
    public ButtonDemo() {
        JButton b = new JButton("Click me!");
        b.addActionListener(this);
        add(b);
    }
    
    @Override
    public void actionPerformed(ActionEvent e) {
        System.out.println("Button was clicked!");
    }
}

• Use an anonymous class to avoid having to spread the code out and make handling multiple buttons easy:

public class ButtonDemo extends JFrame  {
    
    public ButtonDemo() {
        JButton b = new JButton("Click me!");
        b.addActionListener(new ActionListener() {

            @Override
            public void actionPerformed(ActionEvent e) {
                System.out.println("Button was clicked!");
            }
        });
        add(b);
    }
}

• Use a lambda function to make this all look neater:

public class ButtonDemo extends JFrame  {
    
    public ButtonDemo() {
        JButton b = new JButton("Click me!");
        b.addActionListener(e->System.out.println("Button was clicked!"));
        add(b);
    }
}

Detecting JList Events

You need to make it so that clicking on a pattern in the JList causes that pattern to be loaded in at generation zero. This is very similar to connecting up buttons, except you need to use a ListSelectionListener to receive ListSelectionEvents.

@Override
    public void valueChanged(ListSelectionEvent e) {
        JList<Pattern> list = (JList<Pattern>) e.getSource();
        Pattern p = list.getSelectedValue();
        // TODO
        // Based on size, create either a PackedWorld or ArrayWorld
        // from p. Clear the cache, set mWorld and put it into
        // the now-empty cache. Tell the game panel to display
        // the new mWorld.
    }

Adding Play Animation

The final task is to enable the “Play” button to start animating the current world. You do this using a Timer to call moveForward() at regular intervals.

private void runOrPause() {
    if (mPlaying) {
        mTimer.cancel();
        mPlaying=false;
        mPlayButton.setText("Play");
    }
    else {
        mPlaying=true;
        mPlayButton.setText("Stop");
        mTimer = new Timer(true);
        mTimer.scheduleAtFixedRate(new TimerTask() {
            @Override
            public void run() {
                moveForward();
            }
        }, 0, 500);
    }
}