JButton, JLabel & Other GUI Components Example

This program gives the user a couple of ways of interacting with it. When the user enters something in the message box it will be echoed two places. The most resent entry appears at the bottom of the window. On the left a record of all the things they've typed is kept. It will scroll if necessary.

If they click on one of the three numbered buttons they will be asked to enter a colour. If they enter "red", "green" or "blue" (ignoring capitalization) that colour will be used to draw the appropriate number of 20 x 20 squares. Otherwise the squares will be drawn in yellow.

Here is the intial window:

Here is the dialog box which comes up if you press a number button:

Here is what you get after typing many messages and asking for 20 red boxes.

Here is the source code: 

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class ButtonsEtc implements ActionListener
{
   Drawing draw = new Drawing(); // an inner class where we will do our drawing
   JFrame frame = new JFrame("Mouse & Graphics"); // the main window for our application
   JButton fiveButton = new JButton("5");
   JButton tenButton = new JButton("10");
   JButton twentyButton = new JButton("20");
   JTextArea displayArea = new JTextArea(5,10); // a multi-line display
   JTextField messageField = new JTextField(20); // a single line display
   JLabel messageLabel = new JLabel("Your message can go here."); // a non-editable display
   int howMany = 0;
   Color colour = Colour.white;
      
   public ButtonsEtc()
   {
      frame.getContentPane().setBackground(Color.white);
      // Top
      JPanel northPanel = new JPanel();
      northPanel.add(new JLabel("Message:"));
      northPanel.add(messageField);
      messageField.addActionListener(this); // when the user presses enter when entering
                                            // data in the message field an event is generated
      frame.add(northPanel, "North");
      // Centre
      frame.add(draw);
      // Left
      frame.add(new JScrollPane(displayArea), "West");
      // Bottom
      JPanel messagePanel = new JPanel();
      messagePanel.add(messageLabel);
      frame.add(messagePanel, "South");
      // Right
      JPanel eastPanel = new JPanel();
      eastPanel.setLayout(new GridLayout(3,0));
      eastPanel.add(fiveButton);
      eastPanel.add(tenButton);
      eastPanel.add(twentyButton);
      fiveButton.addActionListener(this); // when the user clicks a button an event occurs
      tenButton.addActionListener(this);
      twentyButton.addActionListener(this);
      frame.add(eastPanel, "East");
      // change frame size, disallow the user from changing size & make it visible
      frame.setSize(700, 500);
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.setResizable(false);
      frame.setVisible(true);
   }
   
   public void actionPerformed(ActionEvent e)
   {
      // the user clicked the button with the "5" on it
      if (e.getSource() == fiveButton)
      {
         // pops up a dialog box which the user can enter a string into
         String col = JOptionPane.showInputDialog("What colour would you like (red/green/blue)?");
         if (col.equalsIgnoreCase("red"))
            colour = Color.red;
         else if (col.equalsIgnoreCase("green"))
            colour = Color.green;
         else if (col.equalsIgnoreCase("blue"))
            colour = Color.blue;
         else
            colour = Color.yellow;
         howMany = 5;
         draw.repaint();
      }
      // the user clicked the button with the "10" on it
      else if (e.getSource() == tenButton)
      {
         String col = JOptionPane.showInputDialog("What colour would you like (red/green/blue)?");
         if (col.equalsIgnoreCase("red"))
            colour = Color.red;
         else if (col.equalsIgnoreCase("green"))
            colour = Color.green;
         else if (col.equalsIgnoreCase("blue"))
            colour = Color.blue;
         else
            colour = Color.yellow;
         howMany = 10;
         draw.repaint();
      }
      // the user clicked the button with the "20" on it
      else if (e.getSource() == twentyButton)
      {
         String col = JOptionPane.showInputDialog("What colour would you like (red/green/blue)?");
         if (col.equalsIgnoreCase("red"))
            colour = Color.red;
         else if (col.equalsIgnoreCase("green"))
            colour = Color.green;
         else if (col.equalsIgnoreCase("blue"))
            colour = Color.blue;
         else
            colour = Color.yellow;
         howMany = 20;
         draw.repaint();
      }
      // the user pressed enter in the message box
      else if (e.getSource() == messageField)
      {
         // read entered text
         String s = messageField.getText();
         // clear the field
         messageField.setText("");
         // place message at bottom of frame
         messageLabel.setText(s);
         // place message in list of messages on left of screen
         displayArea.append(s + "\n");
      }
   }
   
   public static void main(String[] args)
   {
      new ButtonsEtc();
   }
   
   /**************  Drawing  *********************************************
   * A class that handles the drawing for this program                   *
   **********************************************************************/
   class Drawing extends JComponent
   {
      /***  paintComponent  **************************************************
      * Purpose: Does the drawing in this application.                       *
      * Parameter: g - the object we use to do the drawing                  *
      ***********************************************************************/
      public void paint(Graphics g)
      {
         
         g.setColor(colour);
         int x = 20;
         int y = 20;
         for (int i = 0; i < howMany / 5; i++)
         {
            for (int j = 0; j < 5; j++)
            {
               g.fillRect(x, y, 20 , 20);
               x += 25;
            }
            y += 25;
            x = 20;
         }
      }
   }
}