Java Swing GUI – Make a Calculator (part 1) – JFrame, JPanel and components

Tired of seeing your hundred lines of code just running in the console? Wanting to make something cool, a real desktop app?. If that’s your concern let’s go to learn Swing and make GUI (graphical user interface) for your application.

Those there is more than one way to make GUI with Java but the class will stay with Swing this term. Therefore, I’m writing some posts about Swing to help you gain some knowledge with this library

JFrame

In Swing, JFrame is a top-level window, every other component (text fields, buttons, panel,..) of your application will be stored in the JFrame.

To create a JFrame, we need to extend the main class from a JFrame class which is imported from Java Swing library. Consider the code below:

import javax.swing.*;

public class GUICalculator extends JFrame {
    public static void main(String[] args) {
        GUICalculator cal = new GUICalculator();

        cal.setTitle("GUI Calculator");

        cal.setSize(600,600);

        cal.setVisible(true);

        cal.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }
    public GUICalculator () { // constructor

    }
}

1. GUICalculator cal = new GUICalculator(); First, we create an instance of the classGUICalculator. Since this class is extended from JFrame, it’ll make a new Window. Create 2 objects from this class in the main method will create 2 windows.
2. cal.setTitle("GUI Calculator"); Second, we set the title for this window.
3. cal.setSize(600,600); Third, we specify the size of the window when it first appears on the desktop.
4. cal.setVisible(true); Fourth, sounds hilarious, but by default, the frame is not visible, we need to set the visibility to true so that it will be shown in the desktop. Otherwise, “You can’t see me”!
5. cal.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);Fifth, this single line of code will give you the ability to close the application when clicking on the close button in the title bar. Unless the app still runs and lie in the taskbar or dock if you use Macbook.

JPanel

Jpanel is where you place all small element such as button, field, spinner… before put everything into the JFrame. Each Panel is like a section of a whole big app. Like a story has many parts, a house has many rooms.

It helps you to handle, position, manage all the components in your application easier. For example, an application of the calculator will have 3 parts/ panels, the top panel holds the text field, the middle panel holds the operation button, the bottom panel holds all the number keys.

Let’s write something in the constructor function of GUICalculator

public GUICalculator () {
    JPanel panel1 = new JPanel();
    JLabel label1 = new JLabel("this label for panel1");

    panel1.add(label1);
    panel1.setBackground(Color.CYAN);
    this.add(panel1);
}

JPanel panel1 = new JPanel(); declaring a new panel.
JLabel label1 = new JLabel("this label for panel1"); declaring a new Label.
panel1.add(label1); adding the label to the panel.
this.add(panel1); placing the panel into the Frame.

Add some more Swing components…

Now we will add some more new components to our application. We will be writing the code below the where we declared the label1.

JButton button1 = new JButton("button1");
JTextField textField1 = new JTextField();
JTextArea textArea1 = new JTextArea(20, 20);

panel1.add(button1);
panel1.add(textField1);
panel1.add(textArea1);

Respectively, we declare a button, a text field, and a text area with a width of 20 and a height of 20. Then we add those three components to the panel.

I know it looks ugly but be proud since this is our first desktop application, and we will learn more about layout in the future.

As you can see the text field is too small, we can fix it by setting the width by the code below:

JTextField textField1 = new JTextField(20);

Ok, now the text field looks better.

In the next post, we will learn about the Action handler to work with button and append the text field.

Thanks for reading…

//This code is credited to samderlust.com
import javax.swing.*;

public class GUICalculator extends JFrame {
    public static void main(String[] args) {
        GUICalculator cal = new GUICalculator();

        cal.setTitle("GUI Calculator");

        cal.setSize(600,600);

        cal.setVisible(true);

        cal.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    }

    public GUICalculator () {
        JPanel panel1 = new JPanel();
        JLabel label1 = new JLabel("this label for panel1");
        panel1.add(label1);


        JButton button1 = new JButton("button1");
        JTextField textField1 = new JTextField(20);
        JTextArea textArea1 = new JTextArea(20, 20);

        panel1.add(button1);
        panel1.add(textField1);
        panel1.add(textArea1);


        this.add(panel1);
    }
}