CSC 161 Lab 6-2: More on GUI

Reading Numbers from Text fields

Text fields are used to accept small amounts of input, usually single lines of text, from a user. There is more than one way to get the input entered by the user in a text field. One method, which we have already used, is to put an ActionListener on the text field. The listener fires when the user types text into the text field and then hits the ENTER key.

A second way to get text from a text field, especially when you need text from more than one text field, is to provide a button that the user can press after they have entered data in all the text fields. In this case, you attach an ActionListener to the button rather than the text field. When the button is pressed, the listener retrieves data from all the text fields and processes it.

If the contents of the text field are supposed to be a number, you will need to use Integer.parseInt() to convert the text to an integer. Usually, you should trim the text before parsing it to parseInt() to avoid a nasty NumberFormatException. Here is how to read a number from a text field named tF.

// Get the text from the text field
String numberText = tF.getText();
// Trim to get rid of blanks before and after the number
numberText = numberText.trim();
// Convert to an integer
int number = Integer.parseInt(numberText);

A GUI Array Sum Program

We want to write a program that will allow the user to enter integers into an array of text fields, and then press a button to compute the sum of all numbers entered. You can see what the user interface should look like to the right: when the user pressees the button Sum, the sum of all numbers in the text fields will appear in the yellow box. First, we will build the user interface, then, we will add an ActionListener to compute the sum.

Follow the following steps to create the user interface. Start with

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

public class Main
    public static void main(String[] args)
        new MyFrame();

class MyFrame extends JFrame
   public final int SIZE = 5;  // size of array

   public MyFrame()
       super("More GUI Exercises");

and then modify the code by adding code to the MyFrame constructor as follows:

  1. Create an array of SIZE text fields, and then create a JPanel named numberPanel. Set the layout of numberPanel to new GridLayout(1, SIZE, 5, 5).
  2. Create the individual text fields in the array, each with number of columns 3 and add all of them to the numberPanel.
  3. Add the numberPanel to the NORTH of the BorderLayout of the frame.
  4. Create a JPanel called lowerPanel.
  5. Create a button called doButton with text Sum.
  6. Add doButton to lowerPanel.
  7. Create a JTextField called resultTextField with 5 columns.
  8. Make the resultTextField uneditable and set its background color to YELLOW.
  9. Add the resultTextField to the lowerPanel.
  10. Add the lowerPanel to the SOUTH of the BorderLayout of the frame.
  11. Set the default close operation, pack the frame, and make it visible.

Now run the program. You should see a user interface as shown above. Of course, it will do nothing when the button is pressed, because there is no listener.

Adding A listener

To add a listener, create a new class

class SumListener implements ActionListener
    private JTextField [] tf;
    private JTextField  resultTf;   

This SumListener has a private fields, one is reference to an array of JTextField, and the other is a reference to a single JTextField. This listener follows the pattern of the listeners we have been creating all along. It will have a constructor that takes two parameters of the same type as its two fields. The constructor will store its parameters in the private fields of the class, so they will be available for use by the actionPerformed() method.

Complete the SumListener class by adding a constructor and the requisite actionPerformed() method. Then, modify the constructor of MyFrame so it creates an instance of SumListener and adds it as an action listener to the doButton. Run the program. It shoud work as expected.

Modifying the Program: Reverse

Modify the program by adding a second button just to the left of the Sum button. The text on the new button should be Reverse. Then, when the user presses the button, the order of the entries in the text fields at the top is reversed.

Due Date: This lab does not have to be handed in. However, the material on it is very important, and you might see something like it on a future test or on the final exam. Make sure you do the lab, and that you understand the material!!!!