Lab Manual for Advanced Computer Programming

Lab-08
Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

Table of Contents
1. Introduction 91

2. Activity Time boxing 91

3. Objective of the experiment 91

4. Concept Map 91
4.1 List Selection Listener 91
4.2 Mouse Event Handling 92

5 Homework before Lab 92

5.1 Problem Solution Modeling 92
5.1.1 Problem description: 92
5.2 Practices from home 92
5.2.1 Task-1 92

6 Procedure& Tools 93
6.1 Tools 93
6.2 Setting-Up IDE [Expected time = 10mins] 93
6.2.1 Download NetBeans 93
6.2.2 Install NetBeans 93
6.3 Walkthrough Task [Expected time = 50mins] 93

7 Practice Tasks 96
7.1 Practice Task 1 [Expected time = 20mins] 96
7.2 Practice Task 2 [Expected time = 20mins] 96
7.3 Bonus Practice Task [Expected time = 1 day] 97
7.4 Out comes 97
7.5 Testing 97

8 Evaluation Task (Unseen) [Expected time = 55mins for two tasks] 98

9 Evaluation criteria 98

10 Further Reading 99
10.1 Books 99
10.2 Slides 99

Department of Computer Science, Page 90

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

Lab 08: Graphical User Interface (GUI) with Event

Handling (Select, Click, Short Key)

1. Introduction

Graphical user interface and its importance is describing in previous lab. In this lab will discuss
about the Event Handling of GUI like Select, Click, and Short Key. Using the previous lab
knowledge will get the basic understanding of event handling of GUI.

Relevant Lecture Material

a) Revise Lecture No. 25 and 26.

b) Text Book: Java: How to Program by Paul J. Deitel, Harvey M. Deitel
1. Read pages: 646-703

2. Activity Time boxing

Table 1: Activity Time Boxing

Task No. Activity Name Activity time Total Time
5.1 Evaluation of Design 20mins 20mins
6.2 Setting up IDE 10mins 10mins
6.3 Programming with SWING 50mins 50mins
7 Practice tasks 20mins for each task 40mins
8 Evaluation Task 60mins for all assigned task 60mins

3. Objective of the experiment

 To get familiar with Event driven programming

 To be able to use Net Beans IDE
 To learn the techniques of developing user friendly interactive graphical interface and
event handling of the GUI.

4. Concept Map

4.1 List Selection Listener

List selection events occur when the selection in a list or table is either changing or has just
changed. List selection events are fired from an object that implements
the ListSelectionModelinterface. To get a table's list selection model object, you can use
either getSelectionModel method or getColumnModel().getSelectionModel().
To detect list selection events, you register a listener on the appropriate list selection model
object. The JList class also gives you the option of registering a listener on the list itself, rather
than directly on the list selection model.
This section looks at two examples that show how to listen to list selection events on a selection
model. Examples that Use List Selection Listeners lists examples that listen on the list directly.

Department of Computer Science, Page 91

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

In these two examples, you can dynamically change the selection mode to any of the three
supported modes:
 single selection mode
 single interval selection mode
 multiple interval selection mode

4.2 Mouse Event Handling

Mouse-motion events notify when the user uses the mouse (or a similar input device) to move
the onscreen cursor. For information on listening for other kinds of mouse events, such as clicks,
see How to Write a Mouse Listener. For information on listening for mouse-wheel events,
see How to Write a Mouse Wheel Listener.
If an application requires the detection of both mouse events and mouse-motion events, use
the MouseInputAdapter class, which implements the MouseInputListener a convenient interface
that implements both the MouseListener and MouseMotionListener interfaces.
Alternatively, use the corresponding MouseAdapter AWT class, which implements
the MouseMotionListener interface, to create a MouseMotionEvent and override the methods for
the specific events.
The following demo code contains a mouse-motion listener. This demo is exactly the same as the
demo described in the How to Write a Mouse Listener section, except for substituting
the MouseMotionListener interface for the MouseListener interface. Additionally,
MouseMotionEventDemo implements the mouseDragged and mouseMoved methods instead of
the mouse listener methods, and displays coordinates instead of numbers of clicks.

5 Homework before Lab

You must solve the following problems at home before the lab.

5.1 Problem Solution Modeling

After reading the reference material mentioned in the introduction, now you are ready to perform
homework assigned to you.

5.1.1 Problem description:

 Develop the understanding of all the packages used in AWT and Swing.
 Explore different types of event handling techniques with code

5.2 Practices from home

Solve the following subtasks.

5.2.1 Task-1

Your task is to create a basic interface of small calculator, Insert a JFRAME Container and insert
3 textfields each with its label “First Number”, “Second Number”, “Results” respectively.Result
text field should be non-editable.Now insert 4 jbuttons “Multiply”, “Divide”, “Add”, “Substract”
each will the source of its event handler and perform a specified operation. And will show the

Department of Computer Science, Page 92

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

result in result text field. Add short key, Mouse event handler in this task.

6 Procedure& Tools

In this section you will study how to create an event driven program using NetBeans IDE.

6.1 Tools

NetBeans IDE 7 (Latest available version)

6.2 Setting-Up IDE [Expected time = 10mins]

6.2.1 Download NetBeans

Go to the following link to download latest version of NetBeans IDE with Java SE
support.http://www.oracle.com/technetwork/java/javase/downloads/jdk-7-netbeans-download-
432126.html

6.2.2 Install NetBeans

Install the downloaded NetBeans in your desired location then follow directions given in the next
section.

6.3 Walkthrough Task [Expected time = 50mins]

Follow the following steps to create a simple login form for your application after completing the
instruction given in section 6.2.2.

In last lab you learn about the usage of NetBeans. Create project GUIEventHandling and add
JFrame Rename the JFrame with ShortCutKey.java. Add Menu bar in JFrame as shown in
Figure 1

Figure 1:Add Menu Bar

After adding the menu bar JFrame is shown in figure 2

Department of Computer Science, Page 93

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

Figure 2: JFrame after adding the Menu Bar

Add the Menu item of a menu bar item

Figure 3: Add Menu Item

After adding the menu item change the properties of menu item and add the short cut key for performing action.
Shown in figure 4

Department of Computer Science, Page 94

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

Figure 4: After Adding the Menu Item

Figure 5: Adding the Short Cut Keys

Add action against Exit Option is shown in figure 6

Department of Computer Science, Page 95

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

Figure 6: Code Against Exit Action Performed

Finally, Output is shown in figure 7

Figure 7: Output

7 Practice Tasks

This section will provide more practice exercises which you need to finish during the lab. You
need to finish the tasks in the required time. When you finish them, put these tasks in the
following folder:
\\dataserver\assignments$\Advanced Computer Programming\Lab13
Develop them through text file first and then IDE. (NetBeans or Eclipse)

7.1 Practice Task 1 [Expected time = 20mins]

Create a Java interface using a jframe and four components on top of that frame, with title
“Yellow”, “Blue”, “Green”, “Gray” when user click on any button, the frame background color
as well as of that button’s should change accordingly.Frame’s title should be COLORS.

7.2 Practice Task 2 [Expected time = 20mins]

Create an Ideal weight calculator, by using following formula

Female Ideal Weight = Height2 /30, Male Ideal Weight = Height2 /28

Insert a main Jframe and two radio buttons for Male & Female Selection, and 5 Radio buttons
with labels with the range from 60 to 80 inches split each range with the difference of 4 and pick
the middle value. Also sets the default values of radio buttons.

Insert the Ideal weight text field, when user will change the selected radio button, it will update
the ideal weight read only text field. Your weight calculator should look something like the form

Department of Computer Science, Page 96

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

shown in Figure 37.

Figure 8: Ideal Weight Calculator

7.3 Bonus Practice Task [Expected time = 1 day]

Create an AWT accumulator applet A Java applet is a graphics program run inside a browser. Write
a Java applet (called AWTAccumulatorApplet) which contains:
1. a label "Enter an integer:",
2. a TextField for user to enter a number.
3. The applet shall accumulate all the integers entered and show it on the status bar of the
browser's window.

Figure 38 : AWT accumulator applet

7.4 Out comes

After completing this lab, student will be able to understand the usage IDE in developing event
driven applications.

7.5 Testing
This section provides you the test cases to test the working of your program. If you get the
desired mentioned outputs for the given set of inputs then your program is right.

Department of Computer Science, Page 97

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

Test Cases for Practice Task-1

Click on the buttons and check if the background colors change accordingly or not.

Input Output
Click on Green Button

Test Cases for Practice Task-2

Select different options from Gender and Height and check if the ideal weight value is according
to the formula

Female Weight = height2/30, Male Weight = height2/28

8 Evaluation Task (Unseen) [Expected time = 55mins for two tasks]

The lab instructor will give you unseen task depending upon the progress of the class.

9 Evaluation criteria

The evaluation criteria for this lab will be based on the completion of the following tasks. Each
task is assigned the marks percentage which will be evaluated by the instructor in the lab whether
the student has finished the complete/partial task(s).

Table 3: Evaluation of the Lab

Sr. No. Task No Description Marks
1 4 Problem Modeling 20
2 6 Procedures and Tools 10
3 7 Practice tasks and Testing 35
4 8 Evaluation Tasks (Unseen) 20
5 Comments 5
6 Good Programming Practices 10

Department of Computer Science, Page 98

C.U.S.T.
 Lab 08: Graphical User Interface (GUI) with Event Handling (Select, Click, Short Key)

10 Further Reading

This section provides the references to further polish your skills.

10.1 Books

Text Book:
 Java: How to Program by Paul J. Deitel, Harvey M. Deitel. Eighth Edition
 Java Beginners Guide: http://www.oracle.com/events/global/en/java-outreach/resources/java-a-
beginners-guide-1720064.pdf
 http://exampledepot.8waytrips.com/ for the package by package examples

10.2 Slides

The slides and reading material can be accessed from the folder of the class instructor available
at \\dataserver\jinnah$\

Department of Computer Science, Page 99

C.U.S.T.