DESIGNING A SWING GUI IN NETBEANS IDE 2. The New JFrame Form dialog box will appear.
In the
Class Name field enter “AddingNumbersGUI”.
STEP A: CREATING A PROJECT 3. Click Finish.
1. Choose File then New Project.
1
2. The New Project dialog box will appear. In the
Categories pane, select the Java and in the Projects
pane, choose Java Application. Click Next. 2
After clicking Finish, the IDE will switch to a JFrame creating
1 window where you can design your interface.
ADDING ELEMENTS TO THE USER INTERFACE (UI)
1. Go to the
Palette Panel
and in the
Swing Controls
category you
3
can find these
options.
3. The New Java Application dialog box will appear. In
the Project Name field enter “AddingNumbers” as
your project name.
2. Add UI elements to your JFrame Form by dragging the UI
elements from the Palette your JFrame Form.
5
Note:
For the purpose of this
lesson, add the following
6 UI elements and arrange
them in this manner.
Four (4)Labels
Three (3) Text Fields
7 Three (3)Buttons
STEP C: RENAMING UI ELEMENTS
4. Leave the Use Dedicated Folder for Storing
Libraries checkbox unselected A. Renaming jLabels
5. Tick the Create Main Class checkbox. 1. Right click on JLabel1 to view
6. Click Finish. the menu and from it choose
Edit Text. The JLabel1 will
now be highlighted signifying
STEP B: CREATING A JFRAME CONTAINER that it is ready to be changed.
1. In the Projects window, right-click the AddingNumbers Now type Adding Numbers.
node and choose New then JFrame Form. 2. Do the same procedure for JLabel2 to JLabel4 and type
the following labels.
JLabel2 = Enter First Number
JLabel3 = Enter Second Number
1 JLabel4 = Sum
2 B. Renaming the jButtons
1. Right click on JButton1 to view the menu and from
it choose Edit Text. The JButton1 will now be
highlighted signifying that it is ready to be changed.
3 Now type ADD.
2. Do the same procedure for JButton2 to JButton3
and type the following labels.
JButton2 = RESET
JButton3 = EXIT
CREATING A GUI PROGRAM USING NETBEANS – Mr. Rowell L. Marquina 1 | 3
C. Clearing the Contents of jTextField and Adjusting its 3. We are now going to add code for what we want the
Size Exit Button to do. Replace the TODO line with
1. Right click on JTextField1 to view the menu and from System.exit(0);
it choose Edit Text. The JTextField1 will now be Your finished Exit button code should look like this:
highlighted signifying that it is ready to be changed.
Now delete its contents by pressing backspace key.
Resize the text field by dragging one of its Resize
Handles.
RESIZE
HANDLE b. MAKING THE RESET BUTTON WORK
The program will halt after the user press the Exit button.
1. Right click the RESET button and from the menus that
will appear choose the following Events > Action >
2. Do the same procedure for JTextField2 and actionPerformed.
JTextField3.
Your User Interface should look like this:
2. The IDE will open up the Source Code window and
scroll to where you implement the action you want the
button to do when the button is pressed Your Source
Code window should contain the following lines:
STEP D: RENAMING VARIABLES
A. Buttons
1. Right click on jButton1 and from the menu that appears 3. We are now going to add code for what we want the
choose Change Variable Name…. Reset Button to do. Replace the TODO line with
jTextField1.setText(“ “);
jTextField2.setText(“ “);
jTextField3.setText(“ “);
Your finished Reset button code should look like this:
2. The Rename dialog box will appear and on the New
Name field type “ADD”.
c. MAKING THE ADD BUTTON WORK
The Add button will perform three actions.
It is going to accept user input from jTextField1
and jTextField2 and convert the input from a type
String to a float.
3. Do the same procedures for JButton2 and JButton3. It will then perform addition of the two numbers.
JButton2 = RESET And finally, it will convert the sum to a type String
JButton3 = EXIT and place it in jTextField3.
STEP E: ADDING FUNCTIONALITY TO THE UI ELEMENTS 1. Right-click the ADD button. From the pop-up menu,
select Events > Action > actionPerformed.
a. Making the Exit Button Work
2. The IDE will open up the Source Code window and
The program will halt after the user press the Exit
scroll to where you implement the action you want
button.
the button to do when the button is pressed Your
1. Right click the EXIT button and from the menus that Source Code window should contain the following
will appear choose the following Events > Action > lines:
actionPerformed.
3. We are now going to add code for what we want the
2. The IDE will open up the Source Code window and Add Button to do. Replace the TODO line with
scroll to where you implement the action you want the int num1, num2, sum;
button to do when the button is pressed Your Source num1=Integer.parseInt(jTextField1.getText());
Code window should contain the following lines: num2 =Integer.parseInt(jTextField2.getText());
sum = num1 + num2;
jTextField3.setText(String.valueOf(sum));
CREATING A GUI PROGRAM USING NETBEANS – Mr. Rowell L. Marquina 2 | 3
Your finished Reset button code should look like this:
Running the Program
1. Press Shift + F11 to Clean and Build the program.
2. On the Projects Panel right click on the
AddingNumbersUI.java and then choose Run File.
PERFORMANCE TASK NO. 1:
Write a program where the user is required to input four
numbers and the program will compute for the average.
PERFORMANCE TASK NO. 2:
Money Changer
The user will input the amount in Philippine Peso and the
program will convert into Asian currencies:
Korean Won = 0. 043
Japanese Yen = 0.49
Chinese Yuan = 7.39
Malaysian Ringgit = 12.50
Thai Baht = 1.69
PERFORMANCE TASK NO. 3:
Write a program where the user is required to input one
number. The user will have six options represented by six
buttons:
1. My Number
2. Square
3. Cube
4. Power of 10
5. Reset
6. Exit
Once the button is pressed, the text field will display:
My Number:
The number inputted by the user
Square:
The Square of the number inputted by the user
Cube:
The Cube of the number inputted by the user
Power of 10:
The number inputted by the user multiplied by 10
Reset
Clears all the text field
Exit
Exits the program
CREATING A GUI PROGRAM USING NETBEANS – Mr. Rowell L. Marquina 3 | 3
