Graphical User Interface

Course Code: CSC1205 Course Title: Object Oriented Programming 1 (JAVA)

Dept. of Computer Science

Faculty of Science and Technology

Lecturer No: Week No: Semester:

Lecturer: Md. Mahmudur Rahman (mahmudur@aiub.edu)
Graphical User Interface

1. What is a Graphical User Interface?

2. Components of a GUI
3. Java library classes for making a GUI.
4. Customizing Color and Font of a GUI component
5. Different EventListeners
6. Steps to design a GUI
 Graphical User Interface
What is Graphical User Interface?

A user interface is the medium that a user uses while interacting with a system. The
programs we have done so far are called Console Applications as Console is the
interface that the user is interacting with. User is giving input in the console and also
getting the output in the console.
A user interface that uses different graphical components for users to interact with
the system is known as a Graphical User Interface. Example:

• The slide you are reading right now is a GUI.

• The text editor you use while coding is also a GUI.

If GUI was not here, using a computer would have become boring and irritating.
 Graphical User Interface
Components of GUI

There are numerous Name of Component General Purpose

GUI components. These Label View plain text
components can be TextField Type anything as Text
used to develop a GUI PasswordField Type anything as Password
as per requirements. Button Trigger any event or to navigate
Some basic and Radio Button Select any Option
frequently used GUI
Check Box Select Multiple Options
components are:
Button Group Grouping Multiple Radio Buttons or Check Boxes
Drop Down List View items as a list and select one from the list
Text Area Type anything as Text in a large area
Image View an Image
Table View Data in a Table
Panel Create a panel
Frame Design a GUI
Graphical User Interface
Illustration of GUI Components

Label

TextField
PasswordFiel
d
Button

Frame
Graphical User Interface
Illustration of GUI Components

Drop Down List

Radio Buttons

Check Boxes
 Graphical User Interface
Java library classes for making a GUI

All these GUI components can be Name of Component Java Library Class Name
created using java library classes. Label JLabel
These classes are inside javax.swing TextField JTextField
package. PasswordField JPasswordField
Button JButton
Radio Button JRadioButton
Check Box JCheckBox
Button Group ButtonGroup
Drop Down List JComboBox
Text Area JTextArea
Image ImageIcon
Table JTable
Panel JPanel
Frame JFrame
 Graphical User Interface
Customizing Color and Font

Color and Font of GUI components Both of these classes are in java.awt package.
can be customized/changed by These classes have constructors to create color
using the following library classes: and font according to user preference. These
user defined colors and fonts can be used for
• Color GUI components by calling library methods of
• Font their respective classes.
Constructors and Methods Description
Color(int r, int g, int b) Creates a color having the RGB value as per the parameters
Changes the background color as per the Color object passed in the
setBackground(Color c)
parameter
setForeground(Color c) Changes the font color as per the Color object passed in the parameter
Creates a font having the name, style and size as per the parameter
Font(String name, int style, int size)
values
setFont(Font f) Changes the font as per the Font object passed in the parameter
 Graphical User Interface
Different Event Listeners

The following four are the frequently used event listeners:

• ActonListener All of these listeners are java library interfaces. They are
• MouseListener inside the java.awt.event package. Each type of listener
• KeyListener handles their own type of event.
• FocusListener

EventListener Event A frame that wants to perform some operation or

ActionListener ActionEvent task whenever any event occurs, needs to
implement the respective EventListeners.
MouseListener MouseEvent
As these event listeners are interfaces, our class
KeyListener KeyEvent
has to override the all the abstract methods of the
FocusListener FocusEvent implemented interfaces.
 Graphical User Interface
Different Event Listeners

The followings are the abstract methods that these interfaces have:

MouseListener KeyListener
mouseClicked(MouseEvent me) keyTyped(KeyEvent ke)
mousePressed(MouseEvent me) keyPressed(KeyEvent ke)
mouseReleased(MouseEvent me) keyReleased(KeyEvent ke)
mouseEntered(MouseEvent me)
mouseExited(MouseEvent me) FocusListener
focusGained(FocusEvent fe)
ActionListener focusLost(FocusEvent fe)
actionPerformed(ActionEvent ae)
 Graphical User Interface
Steps to Design a GUI

We need to write a class to develop a GUI. The object of our class will be the GUI. It will
be easier to develop a GUI, if we do the followings first:
• Draw a sketch of the GUI in a paper.
• Make a list of the components of the GUI.
• Make a list of color and fonts that the components will have (optional).
• Make a list of events that might happen in the GUI.
The followings steps should be followed while writing the class:
Step 0: Import Necessary library classes.
Step 1: Our class needs to extend the JFrame class and implement necessary listeners.
Step 2: The components used in the GUI will be the attributes of our class.
Step 3: The colors and fonts used in the GUI should also be in the attributes (optional).
Step 4: Write a constructor for the class. The body of the constructor can be divided
into several parts:
 Graphical User Interface
Steps to Design a GUI

(a) Initialize the Frame Header, the size of the frame.

(b) Create the panel object and set its layout as null.
(c) Initialize Custom Color and Custom Font (Optional).
(d) For each of the components (except for ImageIcon, JTable, ButtonGroup
and JComboBox) follow the pattern of “Three Statements”.
1. Create an object for the component.
2. Initialize its size and position.
3. Add the component in the panel.
(e) Change color and font for the components and add necessary event
listeners(optional).
(f) Add the panel in the frame.
Step 5: Override the abstract methods of the implemented listener interfaces.
Step 6: Write a main method in a separate class to create display the GUI.
Graphical User Interface
Steps to Design a GUI

Example
In Code
Books

• Java Complete Reference, 7th Edition, By Herbert Schildt.

• A Programmer’s Guide to Java™ SCJP Certification A Comprehensive Primer,
3rd edition, by Khalid A. Mughal and Rolf W. Rasmussen
• Java How to Program Java, 9th Edition, By Deitel and Deitel.
• The Java Language Specification, By J. Gosling, B. Joy, G. Steele, G.Bracha and
A. Buckley
• Introduction to Programming Using Java, 6th Edition, By David j. Eck
• Head First Java, By Kathy Sierra and Bert Bates
References

• Java Complete Reference, 7th Edition, By Herbert Schildt.

• A Programmer’s Guide to Java™ SCJP Certification A Comprehensive Primer,
3rd edition, by Khalid A. Mughal and Rolf W. Rasmussen
• The Java Language Specification, By J. Gosling, B. Joy, G. Steele, G.Bracha and
A. Buckley
• docs.oracle.com