Lesson 2 - Java GUI - Basic Components

In the previous lesson, Java GUI, we created our first window in Java. I decided to add simple programs to demonstrate something new every lesson. In the next two lessons, we're going to create a simple calculator. Today, we're going to add some components and in the next tutorial, we're going to start with events. The calculator will have one function - addition. It'll contain two text fields to enter the numbers, a button and a label to print the result. Let's get started

We're going to need everything we created in the previous lesson. Let's open the Gui class. Here we'll declare the following objects, to which we'll add the private keyword (so they will be accessible from within the class only). We'll create them in the Gui class constructor as follows:

public class Gui extends JFrame {

    private JLabel resultLab;
    private JButton addBut;
    private JTextField number1Field;
    private JTextField number2Field;

    public Gui()
    {
       super("Calculator");
       number1Field = new JTextField("Number 1", 5);
       number2Field = new JTextField("Number 2", 5);
       addBut = new JButton("Add");
       resultLab = new JLabel("The result is: ");
    }

All the components are objects, i.e., they have their methods and the constructor is called when they're being created.

First components

JLabel is an ordinary label displaying some text - resultLab is the name of our label. It takes the string (text) as a parameter.

JLabel labelName = new JLabel("Text on the label")

JTextField is a field for entering text. We named it number1Field (the field for the first number). Its first parameter is the text that appears in it. The number after it indicates the size of the field. Here it means it'll be 5 characters long.

JTextField textFieldName = new JTextField("Text in the TextField", 5)

JButton is an ordinary button. We named it addBut. The parameter is the text to be displayed on the button.

JButton buttonName = new JButton("Text on the button")

If we run the program now, it'll still be an empty window. We've forgotten two important things.

• The first is the Layout we use to position all the components in the window. Java has eight layouts. We'll take a closer look at them later. FlowLayout will be enough for us now. FlowLayout centers its contents and positions them from top to bottom.

FlowLayout layout = new FlowLayout();
setLayout(layout);

• The second thing is that we have to add our components to the window. We'll do that by the add() method, which takes the component as a parameter. Our code will now look like this:

public class Gui extends JFrame {

    private JLabel resultLab;
    private JButton addBut;
    private JTextField number1Field;
    private JTextField number2Field;

    public Gui()
    {
       super("Calculator");
       FlowLayout layout = new FlowLayout();
       setLayout(layout);

       number1Field = new JTextField("Number 1", 5);
       add(number1Field);

       number2Field = new JTextField("Number 2", 5);
       add(number2Field);

       addBut = new JButton("Add");
       add(addBut);

       resultLab = new JLabel("The result is: ");
       add(resultLab);
    }

Since it isn't a good practice to add components directly to the window, we'll create a JPanel. It's a panel used to place other components inside. It groups them together. For this example, we'll create two and name them panel1 and panel2. We create a panel like this:

JPanel panelName = new JPanel()

Panels have the add() method that takes a component we want to place in it as a parameter. So the code looks like this:

public class Gui extends JFrame {

    private JLabel resultLab;
    private JButton addBut;
    private JTextField number1Field;
    private JTextField number2Field;
    private JPanel panel1;
    private JPanel panel2;

    public Gui()
    {
        super("Calculator");
        FlowLayout layout = new FlowLayout();
        setLayout(layout);

        panel1 = new JPanel();
        add(panel1);

        panel2 = new JPanel();
        add(panel2);

        number1Field = new JTextField("Number 1", 5);
        panel1.add(number1Field);

        number2Field = new JTextField("Number 2", 5);
        panel1.add(number2Field);

        addBut = new JButton("Add");
        panel1.add(addBut);

        resultLab = new JLabel("The result is: ");
        panel2.add(resultLab);
    }

We can see that as we resize the window, components grouped in the same panel hold together.

Let's show one last thing, how to add color to the panel. We'll use the setBackground() method with the color as parameter, e.g. Color.red. We can also define our color using the RGB notation. So we'll create a Color class instance (our color) that takes the RGB values ​​as parameters:

Color colorName = new Color(150, 75, 130)

The resulting code now looks like this:

public class Gui extends JFrame {

    private JLabel resultLab;
    private JButton addBut;
    private JTextField number1Field;
    private JTextField number2Field;
    private JPanel panel1;
    private JPanel panel2;

    public Gui()
    {
        super("Calculator");
        FlowLayout layout = new FlowLayout();
        setLayout(layout);

        Color color = new Color(150, 75, 130);

        panel1 = new JPanel();
        panel1.setBackground(Color.red);
        add(panel1);

        panel2 = new JPanel();
        panel2.setBackground(color);
        add(panel2);

        number1Field = new JTextField("Number 1", 5);
        panel1.add(number1Field);

        number2Field = new JTextField("Number 2", 5);
        panel1.add(number2Field);

        addBut = new JButton("Add");
        panel1.add(addBut);

        resultLab = new JLabel("The result is:);
        panel2.add(resultLab);
    }

We'll leave the main() method the same. Let me show you another interesting method. If we want to have the window size exactly to the components we have in it, we can use the pack() method on our window object. This is what the main() method looks like:

public static void main(String[] args) {
    Gui window = new Gui();
    window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    window.setVisible(true);
    window.pack();
    window.setLocationRelativeTo(null);
}

The result looks something like this:

That's it for today. Next time, in the lesson Java GUI - Event, we'll talk about Java events and "force" our calculator to perform addition