Adding functionality to GUI

The mini-tutorials on GUI and layout managers show how to design GUI components and place them in the application window. Here we concentrate on adding functionality to the GUI. This can be done by many ways, we present just one possible approach on the example of the following GUI:

The GUI is created with the following Java code and is not functional so far:

    private JButton greenB, redB;

    public SwingApp(int width, int height)	    // class constructor
    {
	super();				    // call to super class constructor
	Container pane = super.getContentPane();    // create layout, set colors
	panel = new DrawPanel();		    // add GUI components
	// add here more code for GUI components
	greenB = new JButton("green");     // define two buttons
	redB   = new JButton("red");
	panel.add(greenB);                  // add the buttons to the GUI
	panel.add(redB);
	
	pane.add(panel);
	Toolkit toolkit = Toolkit.getDefaultToolkit();	// optionally position JFrame
	Dimension screenSize = toolkit.getScreenSize(); // in the middle of the screen 
	super.setLocation((screenSize.width - width)/2, (screenSize.height - height)/2);	
	super.setTitle("Swing app");		    // set desired window title
	super.setSize(width, height);		    // set desired window size
	super.setVisible(true);	
    }

The functionality we want to add to this GUI is modification of the applet background upon clicking on one of the buttons.

STEP 1: import the AWT event package

import java.awt.event.*;

STEP 2: add keywords implements ActionListener to the application class definition

class SwingApp extends JFrame implements ActionListener

STEP 3: register the buttons for the action listener:

greenB.addActionListener(this);
redB.addActionListener(this);

Here this is a key word meaning that our applet class should have a method actionPerformed() where the button actions to be implemented.

STEP 4: design actionPerformed() method

We use getSource() method of class EventObject that returns the object on which the event initially occurred. In our case the object will be the button clicked.

public void actionPerformed(ActionEvent e)
{
  if (e.getSource() == greenB)
    pane.setBackground(Color.green);
  else if (e.getSource() == redB)
    pane.setBackground(Color.red);
}

Here is the complete code of SwingApp class. Added parts of code to provide its functionality as described in steps 1 - 4 are highlighted. Make sure to set the windows size 200 x 100 pixels

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;  // step 1
                                                 // step 2
public class SwingApp extends JFrame implements ActionListener   
{
   private JButton greenB, redB;
   private Container pane;

   public SwingApp(int width, int height)	 // class constructor
   {
     super();				         // call to super class constructor
     Container pane = super.getContentPane();    // create layout, set colors
     panel = new DrawPanel();		         // add GUI components
     // add here more code for GUI components
     greenB = new JButton("green");              // define two buttons
     redB   = new JButton("red");
     panel.add(greenB);                          // add the buttons to the GUI
     panel.add(redB);
     greenB.addActionListener(this);   // step 3
     redB.addActionListener(this);  

     pane.add(panel);
     Toolkit toolkit = Toolkit.getDefaultToolkit();  // optionally position JFrame
     Dimension screenSize = toolkit.getScreenSize(); // in the middle of the screen 
     super.setLocation((screenSize.width - width)/2, (screenSize.height - height)/2);	
     super.setTitle("Swing app");		  // set desired window title
     super.setSize(width, height);		  // set desired window size
     super.setVisible(true);	
   }

   public void actionPerformed(ActionEvent e)   //step 4
   {                                         
     if (e.getSource() == greenB)            
       pane.setBackground(Color.green);      
     else if (e.getSource() == redB)         
       pane.setBackground(Color.red);        
   }                                         
}