GUI Development with the Netbeans IDE

**chili5** · 07-25-2009 10:31 AM

Making a GUI with Netbeans

Lots of people learn to make a GUI program by handwriting the code. This can be required in some cases but often times it is not. The Netbeans IDE contains an amazing tool for creating GUI programs really fast. Using this tool, you can get your interface designed really fast.

We are going to make a very simple (but interesting) program using the Netbeans GUI.

I got this problem from the Canadian Computing Competition.

The Body Mass Index (BMI) is one of the calculations used to access an adult's health. The BMI is calculated using this formula:

BMI = weight / (height*height)

The weight is in kilograms and the height is defined in meters.

Our program will prompt for the patient's height and weight, calculate the BMI and display a message from the table below.

BMI category Message
More than 25 Overweight
Between 18.5 and 25.0 (inclusive) Normal weight
Less than 18.5 Underweight

This program is a simple calculation and if structure. Thus it is not very difficult and can be used to play around with some GUI programming.

First we need to create a new project in the Netbeans IDE. I called it BMI but you can it whatever you like.

The type of file we need to create is a JFrame Form. Expand source packages and right click on the source folder. Click on other. You should be presented with a form that looks like this:

In the list box under categories select Swing GUI forms. Then in the file types list box click on JFrame form and click next. The form looks like this:

Change the class name to BMI and click finish. You will now see that your window looks like this:

The form in the center of the screen is where you draw components onto the form. Over on the side is a pallete this is where you can get controls to put on your form. To add a control, all you have to do is double click on the control and drag it onto your form. Below the pallete is the properties window.

You can use the properties window to change things like display text, control name and other things.

First let us try out the properties inspector by messing with the form. We want the form to say: BMI Index Calculator in the title bar when the program is run. We can set this in the properties inspector. To see properties for the form, click on the form.

The properties window looks like this:

We want to set the title properties. In the properties window look for the title property and in the textbox beside the title bar type BMI Index Calculator and press enter.

Now, let us run the program. To run the program press Shift and F6.

Notice how in the bluebar at the top it says "BMI Index Calculator"? That is the title of the form.

Now we are going to add controls to the form. Don't worry about changing the properties for now. We will do that later. In the pallete, you can drag controls onto the form. We want to drag on three labels, three text fields and a button.

Arrange the controls on the form so they are arranged like that image. When you click on a text field, arrows appear at the corners, you can click on those arrows to resize the control.

You can run your program again to see what it looks like with the controls. It won't do anything yet though.

Now we have to set the properties of the controls.

Using the controls jLabel1 and jTextField1 we want to set certain properties using the property inspectors.

Once you click on the appropriate control, you can set the properties in the property inspector.

Your form should look like this:

We just have to set the names of the controls now. When you click on a control in the form builder, under the properties inspector, you will see a code tab. You may have to resize the properties window to see it. Click on the code tab. What we want to change here is the variable name.

Change the controls names as follows:

jLabel1 changes to lblWeight
jTextField1 changes to txtWeight
jLabel2 changes to lblHeight
jTextField2 changes to txtHeight
jLabel3 changes to lblBMI
jTextField3 changes to txtBMI
jButton1 changes to btnCalculate

These names are used to reference the items in code. Now all we have to do is program the button to make the calculations and display the results. We are going to set up an action performed event on the button, so we can program the button. You can just double click on the button but for now, select the button and right click. Move the mouse down to the menu item that says "Events". Here you will find different events that the user can cause using the button. Move the mouse over to the action submenu and click on actionPerformed.

The program will switch to source code view (you can switch back to design at any time). This code has been added:

Code:

private void btnCalculateActionPerformed(java.awt.event.ActionEvent evt) {
        // TODO add your handling code here:
}

In the method is where we are going to do our coding. We need to get the values from the height and weight text fields into a variable. To get values from a text field we use the getText method. This method returns a String so we will have to turn the string into a double. To do this, we use the Double.parseDouble method.

To get the weight from the text field we use:

Code:

double dWeight = Double.parseDouble(txtWeight.getText());

We do the same for the height.

Code:

double dHeight = Double.parseDouble(txtHeight.getText());

Now that we have the variables we can perform the calculation using the given formula.

Code:

double dBMI = dWeight / (dHeight * dHeight);

Now all we have to do is display the result in the the text field.

To display text in a text field we use the setText method of the text field.

Example:

Code:

txtBMI.setText("test"); // display test in the text field

To finish the problem, we just have to display the result in the text field from the above table. I'm going to introduce a string variable so we can only use the setText method once.

Code:

String sResult = "";

We just need a simple comparison to determine the appropriate message.

Code:

if (dBMI > 25) {
	sResult = "Overweight";
} else if (dBMI < 18.5) {
	sResult = "Underweight";
} else {
	sResult = "Normal weight";
}

The complete code for the button actionPerformed should be this:

Code:

	double dWeight = Double.parseDouble(txtWeight.getText());
        double dHeight = Double.parseDouble(txtHeight.getText());
        double dBMI = dWeight / (dHeight * dHeight);
        String sResult = "";

        if (dBMI > 25) {
            sResult = "Overweight";
        } else if (dBMI < 18.5) {
            sResult = "Underweight";
        } else {
            sResult = "Normal weight";
        }
        txtBMI.setText(sResult); // display the result

When you run the program, you can type numbers into the text fields and click the button. The result of the calculation will be displayed in the text field.

This is a very basic introduction to Netbeans but as you can see, it makes GUI development so much faster. Now go play around with the tool and see what you can do.