Here we will cover creating a simple Swing application that provides a keypad similar to what you would find on a calculator. It should include a button for each digit (0-9) and the field to display the numbers entered.

This problem involves understanding some of the basics of building a Swing application including how individual components are laid out inside a window, and how your application can react to the user interacting with the application. In this case we need to update a text field whenever a button is pressed.

The key points to implementing a solution to this problem are outlined below.

Laying out the buttons

Swing uses layout managers to handle the positioning of components. In our case we’ll use a GridLayout to handle laying out our buttons in a 3 x 4 grid.

Once we have our parent JPanel managed by a GridLayout all we then need is to create the buttons and add them to the panel. A simple for loop can be used to achieve this task.

// Create a panel for the buttons
// We'll use a GridLayout to display the buttons in a grid
		
JPanel buttons = new JPanel(new GridLayout(3, 4));
for (int i=0; i<10; i++) {
	JButton button = new JButton(Integer.toString(i));
	buttons.add(button);
}

Making our buttons work

When a button is pressed we need our application to get called so that we can update the text field. We can use a ActionListener to achieve this.

// By adding an ActionListener to our button we
// can get notified when the button has been pressed 
			
button.addActionListener(this);

By adding an ActionListener to our button we are telling the button to call the ActionListener’s actionPerformed() method everytime it is pressed. So then in our actionPerformed() method we can update text field with the digit from the button that was pressed.

/**
 * Called when a button is pressed
 */
	
@Override
public void actionPerformed(ActionEvent event) {
		
	// Determine which key was pressed
		
	String key = event.getActionCommand();
		
	// Insert the pressed key into our text fields Document
		
	try {
		display.insertString(display.getLength(), key, null);
	} catch (BadLocationException e) {
		e.printStackTrace();
	}
}

Here’s the final code.

package com.learnjava.swing;

import java.awt.BorderLayout;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.SwingUtilities;
import javax.swing.text.BadLocationException;
import javax.swing.text.Document;

public class Keypad extends JPanel implements ActionListener {

	// Document display by the text field
	
	private Document display = null;
	
	/**
	 * Creates a key pad panel containing a button for each digit (0 - 9)
	 * And a text field for displaying what's pressed
	 */
	
	public Keypad() {
		super(new BorderLayout());
		
		// Create a panel for the buttons
		// We'll use a GridLayout to display the buttons in a grid
		
		JPanel buttons = new JPanel(new GridLayout(3, 4));
		for (int i=0; i<10; i++) {
			JButton button = new JButton(Integer.toString(i));
			
			// By adding an ActionListener to our button we
			// can get notified when the button has been pressed 
			
			button.addActionListener(this);
			buttons.add(button);
		}
		
		// Create a text field to display the numbers entered
		
		JTextField displayField = new JTextField();
		display = displayField.getDocument();
		add(BorderLayout.CENTER, buttons);
		add(BorderLayout.SOUTH, displayField);
	}
	
	/**
	 * Create and setup the main window
	 */
	
	private static void createAndShowGUI() {
		JFrame frame = new JFrame("Keypad");
		
		// We want the application to exit when the window is closed
		
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		// Add the key pad to window
		
		frame.getContentPane().add(new Keypad());
		
		// Display the window.
		
		frame.pack();
		frame.setVisible(true);
	}
	
	/**
	 * Called when a button is pressed
	 */
	
	@Override
	public void actionPerformed(ActionEvent event) {
		
		// Determine which key was pressed
		
		String key = event.getActionCommand();
		
		// Insert the pressed key into our text fields Document
		
		try {
			display.insertString(display.getLength(), key, null);
		} catch (BadLocationException e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				createAndShowGUI();
			}
		});
	}
}

Once you understand the basic concepts involved we will build on this example in a future post to include more features such as a delete key and some arithmetic operator buttons.