Transcript Using the Netbeans GUI Builder

Using the
Netbeans GUI Builder

The Netbeans IDE provides a utility called the
GUI Builder that assists you with creating
Windows applications.

The GUI Builder offers similar functionality to
Visual Basic.

It automatically creates code for you. You don’t
have to manually write code for:
GUI components.
 Event Listeners.


There are 2 ways to access the GUI builder.

1. If you are already creating a Java application:
Right click on the project.
 Select “JFrame.”
 The GUI Builder and the palette will come up.


2. If you are creating a new Java application:

File  New Project  Under “Projects” select “Java
Desktop Application”  Click “Next”

Name your project and click “Finish.”
Here is what the interface for the GUI Builder looks like:

Let’s take a quick look at the individual
components of the GUI Builder….
Project Window
 Design Window / Source Code Window
 Palette
 GUI Components Properties Window

The Project Window is the same.
The Java class that you
will be working with is
the one that ends with
the word “View.”
The Design Window allows you to toggle back
and forth between the Design View and the Source
View for the code.
The Palette gives you the ability to drag and
drop GUI components onto the JFrame.


The Properties Window contains the properties
for the GUI components.
This is similar to the properties window in
Visual Basic.

To add a panel:
Drag and Drop a panel from the palette onto the
JFrame.
 Reposition the panel on the JFrame.


To add a border and title to the panel:

Click on the button beside the border property in
the Properties Window

Select “Titled Border” at the bottom,
and then type in your title text.

Now your panel has a border and a title:

Continue to drag and drop components to the
panel:

Netbeans will automatically give the GUI
components generic names like “jLabel1.”

To edit the display text of the GUI components:

Right click the component and select “Edit Text”
OR

Click the component and wait half a second…
OR

Change the text property in the properties window.

To change the border of a label:


To change the alignment of a GUI component:


Find the “border” property in the Properties
Window
Find the “horizontal alignment” property in the
Properties Window
Hold down Ctrl and click on multiple objects to
move more than one at a time. This helps with
formatting.

Here is our updated JFrame:

Notice that if you switch to the Source Code view, you
can see the section of code that defines your GUI
components:

Netbeans does not allow you to manually change the
code they generate.

To change the name of a GUI component:
Click on the GUI component.
 Go to the Property Window.
 Select “Code”
 Change the Variable Name property.



It is often helpful to rename your GUI
components to easily recognizable names.
In our example I renamed:
jTextField1 to jTextNum1
 jTextField2 to jTextNum2
 jButton1 to jButtonAdd
 jButton2 to jButtonSubtract
 Ect….


Creating an Event Listener for a GUI
component is easy.
Right-click the button (or GUI component).
 Choose  Events  Action  actionPerformed.
 Type the code in the space provided.


For example, if we follow these steps for our Exit
button, we would then type the following code:

Here is the code for the Clear Button:
private void jButtonClearActionPerformed(java.awt.event.ActionEvent evt) {
// This clears the text fields and labels
jLabelResult.setText(" ");
jLabelSymbol.setText(" ? ");
jTextNum1.setText(" ");
jTextNum2.setText(" ");
}

Here is the code for the Add Button:
private void jButtonAddActionPerformed(java.awt.event.ActionEvent evt) {
//Declare variables
int intResult;
int intNum1;
int intNum2;
//Get information from text fields
intNum1 = Integer.parseInt(jTextNum1.getText());
intNum2 = Integer.parseInt(jTextNum2.getText());
//Perform calculations
intResult = intNum1 + intNum2;
//Return and display data
jLabelResult.setText(String.valueOf(intResult));
//Set symbol
jLabelSymbol.setText(" + ");
}

To change the Window Title:
Go to the “.resources” folder in the Project Window.
 Select the section that ends in “…App.properties”
 Change the “Application.title” property


To change the color of
a panel (or any other
GUI component):
Select the component.
 In the Property
Window, select
“background”
 Select your color.
 If you don’t like it, just
select “Reset to default.”


Now you can let Netbeans do the hard work!