Using the Netbeans GUI Builder

farrightSoftware and s/w Development

Aug 15, 2012 (4 years and 8 months ago)

600 views

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:


Find the “border” property in the Properties
Window



To change the alignment of a GUI component:


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!