Graphical User Interface

|
 Overview
• GUI Design Principles – Prototype Design

• GUI Implementation – Java Components

• Event Handling – Listener Interfaces

Tuesday,
October 17,
2017
OOP I | 2
 Objectives
• Explain the significance of a GUI

• Discuss good design GUI principles.

• Design good GUI prototypes

Tuesday,
October 17,
2017
OOP I | 3
What is GUI

|
 GUI Definition
• GUI stands for Graphical User Interface.

• GUI presents a user-friendly mechanism for interacting

with an application and it gives an application a
distinctive “look” and “feel”.

• The main purpose of a UI is to provide an application

with consistent, intuitive UI components that allows
users to be familiar with the application so that they
learn it more quickly and use it more productively.

Tuesday,
October 17,
2017
OOP I | 5
 Overview
• GUI Design Principles – Prototype Design

• GUI Implementation – Java Components

• Event Handling – Listener Interfaces

Tuesday,
October 17,
2017
OOP I | 9
 Objectives
• Describe the packages containing GUI
components in Java.

• Build well designed GUIs in Java using the

layout managers.

• Implement various GUI components in a

layout Java.

Tuesday,
October 17,
2017
OOP I | 10
Java GUI Components

|
 Java GUI
• Most applications we use on a daily basis use
windows or dialog boxes to interact with the user.

• Unlike C (provides Terminal User Interface), Java

enables programmers to use predefined classes to
provide a Graphical User Interface for the user.

• Java has two sets of GUI components:

– AWT (Abstract Window Toolkit): platform-dependent

– Swing: platform-independent
Tuesday,
October 17,
2017
OOP I | 12
 Java GUI Types
AWT Swing

Heavyweight: (tied to GUI Lightweight: Swing components are

components supported by the local not tied to actual GUI components
platform to determine their supported by the underlying
functionality and look-an-feel – platform on which the application
windows, Linux etc) executes.
Different look-and-feel for Uniform look-and-feel for
application on different platforms application across all platforms.

GUI components are not portable GUI components are more portable
making AWT less flexible and flexible

Components are provides from Components are provides from

package java.awt javax.swing

Tuesday,
October 17,
2017
OOP I | 13
Basic GUI Components
• Any GUI-based programming language must
provide at least the following components:
1. Dialogs
2. Texts: label, textfield, textarea
3. Buttons: button, checkbox, radiobutton
4. List: list
5. Window Layout: frame
6. Layout Managers
• AWT and Swing both provide Java with classes which
provide the components above.
Tuesday,
October 17,
2017
OOP I | 14
Overview of Swing Components
1. Dialogs: JOptionPane
2. Texts: Jlabel, JTextField, JTextArea
3. Buttons: JButton, JCheckBox, JRadioButton
4. List: JList
5. Panels: JPanel
6. Frames: JFrame
7. Layout Managers: FlowLayout, BorderLayout,
GridLayout

Tuesday,
October 17,
2017
OOP I | 15
Overview of Swing Components
Dialog Boxes: JOptionPane
• Java’s JOptionPane class (package javax.swing)
provides prepackaged dialog boxes for both input
and output. These dialogs are displayed by
invoking static JOptionPane methods.
• Static members (instance variables and methods)
are those that are shared by all objects of a
class. Only one copy of the member exists. They
are therefore accessed from the class names.
• JOptionPane provides: Input, Confirm and
Message dialog boxes.

Tuesday,
October 17,
2017
OOP I | 16
Overview of Swing Components
Dialog Boxes: Class Demo

Tuesday,
October 17,
2017
OOP I | 17
Overview of Swing Components
Dialog Boxes: Output

Tuesday,
October 17,
2017
OOP I | 18
Overview of Swing Components
Texts

• JLabel – displays uneditable text or

icons.
• JTextField – enables user to enter data
from the keyboard. Can also be used to
display editable or uneditable text.
• JTextArea – similar to JTextField, but
allows for a lot of text.

Tuesday,
October 17,
2017
OOP I | 19
Overview of Swing Components
Buttons

• JButton – triggers an event when clicked

with the mouse.
• JCheckBox – specifies an option that can
be selected or not selected.
• JRadioButton - specifies an option that
can be selected or not selected.

Tuesday,
October 17,
2017
OOP I | 20
Overview of Swing Components
Other Components
• JList – provides a list of items from which the user
can make a selection by clicking on any item on
the list. Multiple elements can be selected.
• JPanel – provides an area which components can
be placed and organized. Can also be used as a
drawing area for graphics.
• JFrame - It is a top level container used to
represent the minimum requirements for a
window. This includes borders, resizing, title bar,
controls (minimize/maximize).

Tuesday,
October 17,
2017
OOP I | 21
Overview of Swing Components
Layout Managers
• Layout managers are provides to arrange GUI
components in a container for presentation
purposes. All layout managers implement the
interface LayoutManager (in package java.awt).
– FlowLayout – places components sequentially
(left to right) in the order they are added.
– BorderLayout – arranges the components into
five areas: NORTH, SOUTH, EAST, WEST, CENTER.
– GridLayout – arranges the components into rows
and columns

Tuesday,
October 17,
2017
OOP I | 22
Overview of Swing Components
Component Hierarchy

Tuesday,
October 17,
2017
OOP I | 23
Overview of Swing Components
Class Demo: Code [part 1]

Tuesday,
October 17,
2017
OOP I | 24
Event Handling: Demo
Class Demo: Code [part 2]

Tuesday,
October 17,
2017
OOP I | 25
Overview of Swing Components
Class Demo: Output

Tuesday,
October 17,
2017
OOP I | 26
 Class Work (15 Minutes)
• Identify the OOP concepts used in the class
demo

• Using swing components, implement the

GUI prototype that you designed in Class
Exercise 1

Tuesday,
October 17,
2017
OOP I | 28