Skip to content
July 17, 2011 / oop123

Writing a Simple Calculator in Java – Part 1

Let’s start with the GUI.

Using a GridLayout, we can easily make a calculator panel.

package gui;
import java.awt.*;
import javax.swing.*;

public class Pad extends JPanel {
	//implements Serializable, not important
	private static final long serialVersionUID = 6018546535458821851L;

	public Pad() {
		this.setLayout(new GridLayout(5, 5, 5, 5));

		//create all the buttons
		JButton b1 = new JButton("1");
		JButton b2 = new JButton("2");
		JButton b3 = new JButton("3");
		JButton b4 = new JButton("4");
		JButton b5 = new JButton("5");
		JButton b6 = new JButton("6");
		JButton b7 = new JButton("7");
		JButton b8 = new JButton("8");
		JButton b9 = new JButton("9");
		JButton b0 = new JButton("0");
		JButton badd = new JButton("+");
		JButton bminus = new JButton("\u2212"); //unicode for minus
		JButton bmult = new JButton("\u00D7");  //unicode for multiply
		JButton bdiv = new JButton("\u00F7");   //unicode for divide
		JButton bsqrt = new JButton("\u221A");  //unicode for sqrt symbol
		JButton bdel = new JButton("\u2190");   //unicode for backspace
		JButton bequal = new JButton("=");
		JButton bdot = new JButton(".");
		JButton bC = new JButton("C");
		JButton binv = new JButton("1/x");
		JButton bsign = new JButton("\u00B1");
		JButton bper = new JButton("%");
		JButton bMPlus = new JButton("M+");
		JButton bMMinus = new JButton("MR");
		JButton bMRC = new JButton("MC");

		//some buttons' text is small, make them bigger bigger
		Font bigger = new Font(bsign.getFont().getName(), Font.PLAIN, 16);
		bsign.setFont(bigger);
		badd.setFont(bigger);
		bminus.setFont(bigger);
		bmult.setFont(bigger);
		bdiv.setFont(bigger);

		//add them, each group being a row of the GridLayout
		add(bMPlus);
		add(bMR);
		add(bMC);
		add(badd);
		add(bdel);

		add(b7);
		add(b8);
		add(b9);
		add(bminus);
		add(bC);

		add(b4);
		add(b5);
		add(b6);
		add(bmult);
		add(binv);

		add(b1);
		add(b2);
		add(b3);
		add(bdiv);
		add(bper);

		add(bdot);
		add(b0);
		add(bsign);
		add(bequal);
		add(bsqrt);
	}
}

We put the text field to display the numbers in a panel (so we can change its size later).

package gui;
import java.awt.*;
import javax.swing.*;

public class NumField extends JPanel {
	private static final long serialVersionUID = 8901400055245008856L;

	JTextField field;

	public NumField(int width) {
		//configure field's property
		field = new JTextField("0");
		field.setEditable(false);
		field.setBackground(Color.WHITE);
		field.setPreferredSize(new Dimension(width, 50));
		field.setHorizontalAlignment(JTextField.RIGHT);
		field.setFont(new Font(field.getFont().getName(), Font.PLAIN, 30));
		add(field);
	}
}

Then we have the MainFrame. I add the above two components with the default BorderLayer manager.

package gui;
import java.awt.BorderLayout;
import javax.swing.JFrame;

public class MainFrame extends JFrame {
	private static final long serialVersionUID = -8026416994513756565L;
	public static final int DEFAULT_HEIGHT = 350;
	public static final int DEFAULT_WIDTH = 350;
	private NumField field;

	public MainFrame() {
		//-10 to leave some margin for the field
		field = new NumField(DEFAULT_WIDTH - 10);

		//add the components (
		add(field, BorderLayout.NORTH);
		add(new Pad());

		//configure the frame
		setSize(DEFAULT_WIDTH, DEFAULT_HEIGHT);
		setTitle("Calculator");
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		setResizable(false);
		setVisible(true);
	}
}

I put the code to open the main window at Calculator.main(String[] args).

import javax.swing.SwingUtilities;
import gui.MainFrame;

public class Calculator {
	public static void main(String[] args) {
		//for Swing beginners, .invokeLater() should always be used for Swing stuff, otherwise it can cause
		//threading problems
		SwingUtilities.invokeLater(new Runnable() {
			public void run() {
				new MainFrame();
			}
		});
	}
}

Here’s what it look like on my computer (Windows). It looks ugly, but it’s still a calculator 🙂

A screenshot of the Java calculator

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: