Advanced OOP

Using GUI in Netbeans

By: E.T. CAPARIÑO

Create a New Java Project:

1. File, New Project, Next

2. Project Name: ProjectGUI
3. Project Location: OOP_GUI
4. Uncheck the Create Main Class
5. Finish

1
Create a New Package inside the Project:

1. Right Click on the Project, New, Java Package

2. Package Name is pkgProd
3. Finish

2
Creating a JFrame Form

1. Right click on the package which is pkgProd, New, JFrame Form.

2. Class Name: frmProd
3. Finish

3
Navigating the JFrame Form

Create a simple Product Form which will perform the following:

Input: Product Code, Product Name, Unit Price, Quantity

Compute: Amount = Unit Price * Quantity

1. Add Label and Text Field for each item: Product Code, Product Name, Unit Price, Quantity,
Amount.
2. Add a Button: Compute and Clear
3. Make sure to change the Variable Name of each of your controls. The Variable Name will be
your reference when writing your codes.

Label text Text Field Variable Name Button Variable Name

Product Code txtpcode

Product Name txtpname

Unit Price txtuprice

Quantity txtqty

Amount txtamount

Compute btncompute

Clear btnclear

A snapshot of the first two fields created:

4
This will be the entire look of the form after you have placed the necessary controls.

5
Writing Codes or Events

1. For the events, there are codes which are needed to be placed on the following: Compute
button, Clear button, and other parts.
2. Just double click on the button and insert your codes.

3. Codes in the Compute button = btncompute.

Please note that all the text fields are String data. Therefore, if you need to calculate, you have to
convert these String data into numeric. Some explanations of the codes:
// temporary variables for calculation

double vamount, vqty, vuprice;

String stramount;

// In order that txtamount should not be edited.

txtamount.setEditable(false);

// retrieving the values inputted by the user in the text fields

// txtuprice and txtqty, converting them from String to Double.
vuprice = Double.parseDouble(txtuprice.getText());
vqty = Double.parseDouble(txtqty.getText());

// calculate the vamount using vuprice, vqty which are double data
vamount = vuprice * vqty;

// formatting the double data with 2 decimal place, and storing it as

// string using stramount variable.
stramount = String.format("%.2f", vamount);

// placing the result of stramount to txtamount text field

txtamount.setText(stramount);

6
4. You can try running the form even if the codes are not completed yet.
5. Codes in the Clear button = btnclear.

// Clear the text field with spaces.

txtpcode.setText("");

txtpname.setText("");

txtuprice.setText("");
txtqty.setText("");
txtamount.setText("");

// after clearing, focus will be on txtpcode.

txtpcode.requestFocus();

// disable the button Compute so that if the other fields needed for
//calculation are empty, errors may be prevented.
btncompute.setEnabled(false);

6. Codes in the Events focusLost for txtqty = txtqtyFocusLost.

Will enable the Compute button after txtqty field has been inputted.

7
 7. Place initializations after the initComponents( ); found on the upper part of the entire Source.

Insert the following codes as part of the initialization:

Notice that the same codes are applied in the initializations as in the Clear button. This means
that a fresh start of text field values are assigned at first, and the first focus will be on txtpcode.
Compute button, btncompute is disabled first since fields needed for computation are still empty.

8. Your form has been completed. Run them and if there are problems, review the codes and edit
them as necessary.

8
Advanced OOP

Activity No. 3
Applying GUI NetBeans
By: E.T. CAPARIÑO

1. Make sure you have tried the lecture about GUI Netbeans.
2. Run the form.
3. Paste some screen shots of the output here:

9
4. Remove the following from Clear button and the initialization.
btncompute.setEnabled(false);
5. Run the form.
6. Enter data for Product Code and Product name only.
7. Click the Compute button.
8. What output is produced? Placed screen shots here….

9. Do you think it is necessary to disable the Compute button? Why or why not?

10. Save this document (Activity No. 3) as PDF and send to Google Classroom.

10