Exercise No 2 Java Swing

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 11

Name: Score:

Student No. Date:


Computer No.

Exercise No. 2. Java Parsing and System Exit

I. Objectives

At the end of this activity, the students are expected to:

1. Familiarize themselves with the NetBeans IDE


2. Create and a simple GUI design using objects from Java Swing Package
3. Set up properties of a Java Swing object
4. Use the Netbeans Inspector window in changing variable names

II. Discussion

System.exit() Method
 It terminates the currently running Java Virtual Machine
 This serves as status code
 A nonzero status code indicates abnormal termination

Parse
 Converts a data type into another data type

III. Procedure

1. Open NetBeans. Create a new project, name it as “NumberAddition”. Click File  New
Project. Choose File > New Project. In the Categories pane, select the Java mode. In the
Projects pane, choose Java Application. Click Next. Type NumberAddition in the Project
Name field.
2. Deselect the Create Main Class checkbox if it is selected. Click Finish. Please refer to figure 1.
Figure 1. The NumberAddition Java Applicion
3. To proceed with building the user interface, we need to create a Java container within which
we will place the other required GUI components. In this step we'll create a container using
the JFrame component. We will place the container in a new package, which will appear
within the Source Packages node. To create a JFrame container, follow the following steps:
3.1 In the Projects window, right-click the NumberAddition node and choose New > Other.
As shown in figure 2.
Figure 2. Adding a Jframe

3.2 In the New File dialog box, choose the Swing GUI Forms category and the JFrame
Form file type, as shown in figure 3. Click Next.

Figure 3. Create a Swing GUI Forms – JFrame Form


3.3 Now, Enter NumberAdditionUI as the class name and my_numberaddition as the
package name. Please refer to figure 4. Click Finish.

Figure 4. The NumberAdditionUI


The IDE creates the NumberAdditionUI form and the NumberAdditionUI class within
the NumberAddition application, and opens the NumberAdditionUIform in the GUI Builder.
The my_numberdddition package replaces the default package.

4. Now, we are ready to add other components to the front end interface. We’ll be using the
Palette to create our application’s front end. We will be needing a JPanel, three (3) JLabels,
three (3) JTextFields, and three (3) JButtons.
4.1. To add a JPanel, click the Panel in the swing containers and drag it to your work
space as shown in figure 5.
Figure 5. Adding a JPanel Swing Container

4.2. While the JPanel is highlighted, go to the Properties window and click the ellipsis
(...) button next to Border to choose a border style. In the Border dialog, select
TitledBorder from the list, and type in Number Addition in the Title field, as shown
in figure 6. Click OK to save the changes and exit the dialog.

cc

Figure 6. The JPanel Border


4.3. Your JPanel should resemble figure 7.

Figure 7. The JPanel

4.4. Now, add the remaining components. Your JPanel container should resemble figure
8.
Figure 8. The Number Addition JFrame and its components.

5. Now, we are ready to rename the display text of the components that were just added to
the JFrame.
5.1. Double-click jLabel1 and change the text property to First Number:
5.2. Double-click jLabel2 and change the text to Second Number:.
5.3. Double-click jLabel3 and change the text to Result:.
5.4. Delete the sample text from jTextField1. You can make the display text editable by
right-clicking the text field and choosing Edit Text from the popup menu. Repeat
this step for jTextField2 and jTextField3.
5.5. Rename the display text of jButton1 to Clear. You can edit a button's text by right-
clicking the button and choosing Edit Text. Or you can click the button, pause, and
then click again. Or at the properties window, change the text name.
5.6. Rename the display text of jButton2 to Add.
5.7. Rename the display text of jButton3 to Exit. Your screen now should look like figure
9.
Figure 9. The Number Addition Interface

6. Now, we are ready to add functionality to the interface. In this activity, we will give
functions to the Add, Clear, and Exit buttons. The jTextField1 and jTextField2 will be used as
user input and jTextField3 for the program output. We will assign event handler to each of
the buttons to respond to an event. We will be using ActionListener handler responding to
ActionEvent. Action event might be either by mouse click to via keyboard.
6.1. The Exit Button (jButton3)
6.1.1. Right click the Exit button. From the pop-up menu choose Events > Action >
actionPerformed. Note that the menu contains many more events you can
respond to! When you select the actionPerformed event, the IDE will
automatically add an ActionListener to the Exit button and generate a handler
method for handling the listener's actionPerformed method (as shown in figure
10).

Figure 10. The Event-Action-ActionPerformed event handler dialog box

6.1.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
(either by mouse click or via keyboard). Your Source Code window should
resemble figure 11.

Figure 11. The source code for Exit action button

6.2. The Clear Button (jButton2)


6.2.1 Click the Design tab. Right click Clear button (jButton2). Then, from the
pop – up menu, select Events  Action  actionPerformed
6.2.2 We will have the Clear button erase all text from the jTextFields. To do
this, add the code shown in figure 12.
Figure 12. The source code for the Clear button.
6.3 The Add Button

The add button will perform the following actions:


 Accept user input from jTextField1 and jTextField2 and convert the input
from a type String to float
 It will then perform addition of two numbers
 Convert the sum to a type String and place it in the jTextField3.

6.3.1 Click the Design Tab. Right-click the Add button (jButton1). From the pop-
up menu, select Events Action  actionPerformed
6.3.2 Your source code should resemble figure 13.

Figure 13. The source code for the Add button

7. Running the Application


7.1. Choose Run  Run Project or press F6 or click the Run Button. Your screen should
resemble figure 14.

Note: If you get a window informing you that the Project NumberAddition does not
have a main class set, then you should select
my_NumberAddition.NumberAdditionUI as the main class.

Figure 14. The Number Addition Application

8. Now, run the application clicking the Clear Button, what happened?

9. Now, run the application clicking the Exit Button, what happened?

10. Save your work as exer2_java.


11. Now, modify exer2_java, adding buttons for subtract, multiply and division. Save this
activity as exer2a_java.
12. When finished, shut down our computers.

You might also like