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
