King Faisal University

College of Computer Sciences and

Information Technology

Computer Science Department

CS310: Object Oriented Programming 2

Lab 5 Layout Managers + Handling Item Events

First Semester: (2023/2024)

Instructor: Dr. M Shujah Islam Sameem

[CS220]: [Object Oriented Programming II] Page 1

 King Faisal University

College of Computer Sciences and

Information Technology

Lab 5 Layout Managers + Handling Item Events

Introduction

This lab presents the use of Layout Managers for organizing GUI components in a
frame. Layout Managers implemented in this lab session are FlowLayout and
BorderLayout. In addition, demonstrations of how to implement ItemListener is
provided.

Objectives

1. Practice using FlowLayout.

2. Practice using BorderLayout.
3. Practice using ItemListener.

Tools/Software Requirement

1. NetBeans

[CS220]: [Object Oriented Programming II] Page 2

 King Faisal University

College of Computer Sciences and

Information Technology

Description

A. JFrame
A frame is a window in which different components/control are added and arranged
on it. There are different ways to create a JFrame, in this lab manual the following
way is adopted:

Create two files:

 Subclass of JFrame that demonstrates the GUI concepts
 Application class in which main () creates and displays the application’s
primary window.

To create the former, you have to do the following:

1. Import the following libraries

2. Extend the existing class by JFrame class

3. Implement the constructor of MyJFrame class

4. JFrame’s constructor uses its String argument as the text in the window’s title
bar. Super constructor can be invoked with title sent as its String argument to
set the title of the JFrame.

[CS220]: [Object Oriented Programming II] Page 3

 King Faisal University

College of Computer Sciences and

Information Technology

B. Layout Managers

The LayoutManagers are used to arrange components in a particular manner.

LayoutManager is an interface that is implemented by all the classes of layout
managers. The following are classes that represent the layout managers:

1. java.awt.BorderLayout
2. java.awt.FlowLayout
3. java.awt.GridLayout
4. javax.swing.BoxLayout
5. java.awt.CardLayout
6. java.awt.GridBagLayout
7. javax.swing.GroupLayout
8. javax.swing.ScrollPaneLayout
9. javax.swing.SpringLayout etc.

B.1 BorderLayout

The BorderLayout is used to arrange the components in five regions: north, south,
east, west and center. Each region (area) may contain one component only. It is the
default layout of frame or window. The BorderLayout provides five constants for
each region:
1. public static final int NORTH
2. public static final int SOUTH
3. public static final int EAST
4. public static final int WEST
5. public static final int CENTER

Constructors of BorderLayout class:

Constructor Description
BorderLayout() Creates a border layout but with no gaps between the
components.
BorderLayout(int hgap, int vgap) Creates a border layout with the given horizontal and
vertical gaps between the components.

[CS220]: [Object Oriented Programming II] Page 4

 King Faisal University

College of Computer Sciences and

Information Technology

Example of BorderLayout class:

ExampleB.1
MyJFrame.java

[CS220]: [Object Oriented Programming II] Page 5

 King Faisal University

College of Computer Sciences and

Information Technology

LayoutApp.java

Output

B.2 FlowLayout

The FlowLayout is used to arrange the components in a line, one after another (in a
flow). It is the default layout of applet or panel. The FlowLayout provides five
constants:
1. public static final int LEFT
2. public static final int RIGHT
3. public static final int CENTER
4. public static final int LEADING
5. public static final int TRAILING

[CS220]: [Object Oriented Programming II] Page 6

 King Faisal University

College of Computer Sciences and

Information Technology

Constructors of FlowLayout class:

Constructor Description
FlowLayout() Creates a flow layout with centered alignment
and a default 5 unit horizontal and vertical gap.
FlowLayout( int align) Creates a flow layout with the given alignment
and a default 5 unit horizontal and vertical gap.
FlowLayout( int align, int hgap, Creates a flow layout with the given alignment
int vgap) and the given horizontal and vertical gap.

Example of FlowLayout class:

ExampleB.2
MyJFrame.java

[CS220]: [Object Oriented Programming II] Page 7

 King Faisal University

College of Computer Sciences and

Information Technology

LayoutApp.java

Output

The components flows when the frame is resized

[CS220]: [Object Oriented Programming II] Page 8

 King Faisal University

College of Computer Sciences and

Information Technology

C. Event Handling Process

GUIs are event driven. When the user interacts with a GUI component, the
interaction—known as an event—drives the program to perform a task. The code that
performs a task in response to an event is called an event handler, and the overall
process of responding to events is known as event handling.

Components of Event Handling

Event handling has three main components,
1. Events Source: Event source is an object that generates an event such as
JCheckBox object.
2. Events: an Event is an object that is generated upon the interaction with an
event source such as the ItemEvent object generated when a JCheckBox is
selected or unselected.
3. Event Handler: Event handler is a class that implements an event listener
interface such as a class that implements the ItemListener interface.
4. Listeners: A listener is an object of event handler class that listens to the
event. A listener gets notified when an event occurs such as an object of event
handler class that implements ItemListener interface and registered to listen to
JCheckBox object with addItemListener() method.

How Events are handled?

Event Source generates an Event and sends it to the listener registered with the
source. Once the event is received by the listener, it processes the event and then
returns. Events are supported by a number of Java packages, like java.util, java.awt,
and java.awt.event

Important Event Classes and Interface

[CS220]: [Object Oriented Programming II] Page 9

 King Faisal University

College of Computer Sciences and

Information Technology

Event Classes Description Listener Interface

generated when button is pressed, menu-

ActionEvent item is selected, list-item is double ActionListener
clicked
generated when check-box or list item is
ItemEvent ItemListener
clicked
generated when one or more item is
ListSelectionEvent ListSelectionListener
selected from a JList
generated upon the user interaction with
ChangeEvent ChangeListener
JSlider.
AdjustmentEvent generated when scroll bar is manipulated AdjustmentListener
generated when value of JTextArea or
TextEvent TextListener
JTextField is changed
generated when mouse is dragged,
MouseEvent moved, clicked, pressed, or released and MouseListener
also when it enters or exit a component
MouseWheelEven generated when the mouse wheel is
MouseWheelListener
t moved
generated when the input is received from
KeyEvent KeyListener
the keyboard
generated when a component gains or
FocusEvent FocusListener
loses keyboard focus

C.1. ItemEvent and Item listener

Example of GUI components that generates ItemEvent

Event Source Event Type Listener Listener Method Registration Method

JCheckBox
JRadioButton ItemEvent ItemListerner itemStateChanged() addItemListerner()
JComboBox

[CS220]: [Object Oriented Programming II] Page 10

 King Faisal University

College of Computer Sciences and

Information Technology

In the following example, simple GUI-based input/output application using

JCheckBox and JRadioButton is provided. See the table below for the code and the
sample output:
Example C.1
MyJFrame.java

[CS220]: [Object Oriented Programming II] Page 11

 King Faisal University

College of Computer Sciences and

Information Technology

EventHandlingAppII.java

[CS220]: [Object Oriented Programming II] Page 12

 King Faisal University

College of Computer Sciences and

Information Technology

Output

This application should enable the user to select one or more courses and
choose one major. After selecting the major, the application should get the
user selections and display a JOptionPane message dialog with the user
selections. See below:

When the user make a selection an ItemEvent to be generated. To respond to

an ItemEvent you have to do the following:
1. Import the following libraries

[CS220]: [Object Oriented Programming II] Page 13

 King Faisal University

College of Computer Sciences and

Information Technology

2. Implements an ItemListener interface, this can be done using the same

class. Thus, MyJFrame class is a sub class of JFrame and
EventHandler class at the same time

3. Override its methods

[CS220]: [Object Oriented Programming II] Page 14

 King Faisal University

College of Computer Sciences and

Information Technology

boolean isSelected() Returns the state of the button. True if the toggle
button is selected, false if it's not.

(Defined in AbstractButton)

4. Declare an object of type EventHandler as a member of the existing

class
This step is not needed in this case as the current class is the
EventHandler class, this keyword can be used to as a reference to it.

5. Register an instance of the event handler class as a listener on one or

more components. Below an ItemListener is added only for the
JRadioButton objects:

[CS220]: [Object Oriented Programming II] Page 15

 King Faisal University

College of Computer Sciences and

Information Technology

Example C.1
MyJFrame.java

[CS220]: [Object Oriented Programming II] Page 16

 King Faisal University

College of Computer Sciences and

Information Technology

[CS220]: [Object Oriented Programming II] Page 17

 King Faisal University

College of Computer Sciences and

Information Technology

[CS220]: [Object Oriented Programming II] Page 18

 King Faisal University

College of Computer Sciences and

Information Technology

EventHandlingAppII.java

Output

[CS220]: [Object Oriented Programming II] Page 19

 King Faisal University

College of Computer Sciences and

Information Technology

Lab Task: (5 Points)

 Create a Counter JFrame with a title “Counter App” and a size 350x150 containing:
- One JLabel in the upper region showing the text “Increment/Decrement”.
(1 point)
- One JTextField in the central region. (1 point)
- JButtons with the text “-“, “+” in the Left and Right regions respectively. (2
points)
One JButton with the text “Reset” in the bottom region. (1 point)
-

The result must be identical to the figure below:

[CS220]: [Object Oriented Programming II] Page 20