GUI Application to Calculate Area of a Square in NetBeans IDE using Java

In this tutorial, you will learn to create a simple GUI application that calculates the area of a square in NetBeans IDE.

Before continuing make sure you go through the article below:
Introduction to NetBeans IDE: Build first GUI Application in Java using NetBeans IDE

Creating a GUI Application to Calculate Area of a Square in Java

Let’s create a JFrame Form with the name AreaofSquare.

Note: While adding a form to your project, the class name

• should not start with a number,
• should not have spaces,
• cannot contain any special characters except underscore “_”.

After creating the JFrame, drag three labels, two text fields and three buttons onto the JFrame and arrange them as shown in the figure below.

You can arrange and resize the components as well as the frame however you want but, the arrangement should be logical and easily understandable by the user.

Changing the properties of the components:

The other way to edit text is to right-click on the component and select Edit Text.

Always keep the text fields empty so that the user can directly enter the values.

Let’s see the use of the components in the form.

jTextField1: This is the text field where the user will enter the value for side of the square.

jLabel1 (Side): This will be the label for jTextField1.

jTextField2: This is the text field where the area will be displayed. We should make this text field uneditable.

jLabel2 (Area): This will be the label for jTextField2.

jLabel3 (Area of Square Calculator): This will be the title label of the form.

jButton1: This will be the Calculate button. When you click it, jTextField2 will display the area of the square.

jButton2: This will be the Clear button. Clicking this button will remove the text in jTextField1 and jTextField2 previously entered by the user.

jButton3: Finally the Exit button. The application will close when you click it.

Writing Java Code for the Buttons

Calculate Button:
When the user enters the value of side in jTextField1 and clicks the Calculate button, the area of the square should be displayed in jTextField2.

Since the Calculate button will perform the action, double-click on it. The source code window will open with the cursor placed at the point where we have to write the code.

Notice that the NetBeans Builder automatically generates sections of code in gray areas, called Guarded Blocks. These blocks are protected and uneditable.

Let’s write code to read the input given by the user in jTextField1. For this, we will use a method called getText(). The command jTextField1.getText() will actually read the value.

We will create an integer variable to store this value. Let the variable name be “side”.

The getText() method always reads the value entered by the user as a string. To change it to an integer type we will use the parseInt() method of the Integer class.

The method parseInt() is used to convert a string value to the integer type.

int side = Integer.parseInt(jTextField1.getText());

The integer value entered by the user is now stored in the variable “side”.

Now, let’s create an integer variable to store the area of the square.

int area = side*side;

After calculating the area we have to display it on jTextField2 for which we will use another method called setText(). Now, the setText() method only displays a string value but the area we calculated is an integer. So, to convert an integer type to a string type we will use a method called toString().

jTextField2.setText(Integer.toString(area));

Alternatively, we can also use the code shown below to convert an integer value to a string.

jTextField2.setText(" "+area);

Next, we have to make jTextField2 uneditable. To do so, we can either uncheck the editable property in the properties window or use the setEditable() method and make it false.

jTextField2.setEditable(false);

We are done with the Calculate button.

Below is the entire code for the Calculate button:

int side=Integer.parseInt(jTextField1.getText());
int area=side*side;
jTextField2.setText(Integer.toString(area));
jTextField2.setEditable(false);

Clear Button:
Go back to the Design window and double click on the Clear button. Now, to clear the text fields we will use the setText() method.

jTextField1.setText(" ");
jTextField2.setText(null);

Using space surrounded by double quotes or null will do the work of clearing the text fields.

Exit Button:
To close our application we will use a method called exit() of the System class.

System.exit(0);

It’s time to run the form!

Check if all three buttons are performing the actions we need.

If yes, then you have successfully built a form that calculates the area of a square. 👍👍