This document provides an introduction to graphical user interfaces (GUIs) in Java. It discusses GUI components such as buttons, checkboxes, lists, sliders, and menus. It explains how to create simple GUIs using Swing components like JFrames, JLabels, and JButtons. Event handling is demonstrated through examples using interfaces like ItemListener. Different types of buttons are presented, including toggle buttons, radio buttons, and checkboxes. Common GUI elements like text fields, lists, sliders and menus are also introduced through examples. The document provides a high-level overview of creating and working with basic GUI components in Java.

1. GUI(Graphical User Interface)
©bilalAmjad
bilalamjad78633@yahoo.com
1

2. An Introduction
• A graphical user interface (GUI) presents a user-friendly
mechanism for interacting with an application. A GUI
(pronounced “GOO-ee”) gives an application a distinctive
“look and feel.” GUIs are built from GUI components. These
are sometimes called controls or widgets—short for window
gadgets. A GUI component is an object with which the user
interacts via the mouse, the keyboard or another form of
input, such as voice recognition. Java’s so-called Swing GUI
components from the javax.swing package.
2

3. Simple GUI-Based Input/Output with JOptionPane
Taking Input from User Using
Input Dialog Box
Converting
String
Into integer
value
3
Showing Message by Message Dialog Box

4. Output
4

5. Different JoptionPane Message Icons
5

6. JOptionPane Message Icon (cont)
6

7. JOptionPane Message Icon (cont)
7

8. An Overview of SWING components
• Though it’s possible to perform input and output using the
JOptionPane dialogs, most GUI applications require more elaborate
user interfaces. Following is the list of some Basic GUI components:
8

9. Swing V/s AWT
• There are actually two sets of GUI components Swing components and AWT
components.
• In Java’s early days, GUIs were built with components from the Abstract
Window Toolkit (AWT) inpackage java.awt.
• It Look like the native GUI components of the platform on which a java
program execute.
For example, a Button object displayed in a Java program running on Microsoft
Windows looks like those in other Windows applications. On Apple Mac OS X,
the Button looks like those in other Mac applications. Sometimes, even the
manner in which a user can interact with an AWT component differs between
platforms. The component’s appearance and the way in which the user
interacts with it are known as its look-and-feel.
9

10. Swing Components
• Swing is the primary Java GUI widget toolkit. It is part of Oracle's
Java Foundation Classes (JFC) — an API for providing a graphical user
interface (GUI) for Java programs.
• Swing was developed to provide a more sophisticated set of GUI
components than the earlier Abstract Window Toolkit (AWT). Swing
provides a native look and feel that emulates the look and feel of
several platforms, and also supports a pluggable look and feel that
allows applications to have a look and feel unrelated to the
underlying platform. It has more powerful and flexible components
than AWT. In addition to familiar components such as buttons, check
box and labels, Swing provides several advanced components such
as tabbed panel, scroll panes, trees, tables and lists.
• Unlike AWT components, Swing components are not implemented
by platform-specific code. Instead they are written entirely in Java
and therefore are platform-independent. The term "lightweight" is
used to describe such an element. 10

11. Swing Component Example
11

12. Awt components
• The Abstract Window Toolkit (AWT) is Java's original platform-
independent windowing, graphics, and user-interface widget toolkit.
The AWT is now part of the Java Foundation Classes (JFC) — the
standard API for providing a graphical user interface (GUI) for a Java
program.
• AWT is also the GUI toolkit for a number of Java ME profiles. For
example, Connected Device Configuration profiles require Java
runtimes on mobile telephones to support AWT.
12

13. Displaying Text and Images in a window
• Most windows you’ll create that can contain Swing GUI components are instances of
class JFrame or a subclass of JFrame.
• JFrame is an indirect subclass of class java.awt.Window that provides the basic
attributes and behaviors of a window—a title bar at the top, and buttons to minimize,
maximize and close the window.
See the Example Program on the Next
Slide
13

14. D Importing
I Classes
S That will be
P Used in the
L
program
A
Y
I Declaring three
N JLabel Instances
G
T
E
X
T
Of the program
A
Constructor
N
D
I
M
A 14
G
E
S

15. Output of the Program
15

16. Labeling GUI components
• A typical GUI consists of many components. GUI designers often provide
text stating the purpose of each. Such text is known as a label and is created
with a JLabel—a subclass of JComponent.AJLabel displays read-only text, an
image, or both text and an image. Applications rarely change a label’s
contents after creating it. Following is the Example program:
16

17. Output of the program
17

18. Common GUI Event Types and Listener Interfaces
• Following Figure illustrates a hierarchy containing many event
classes from the package java.awt.event. These event types
are used with both AWT and Swing components. Additional
event types that are specific to Swing GUI components are
declared in package javax.swing.event.
18

19. Jbutton
• A button is a component the user clicks to trigger a specific action.
• A Java application can use several types of buttons, including command
buttons, checkboxes, toggle buttons and radio buttons.
Following is the Swing Button Hierarchy:
19

20. JbuttonExample
Importing swing and AWT classes
ButtonFram class is extending JFrame
Declaring Jbuttons
Variables plainJButton
And fancyJButton
Adds the Jbutton
To JFrame
Creating Image Icon
Adding button to JFrame
Creating Button Handler
These lines declares
actionPerformed
To display a message 20
Dialog Box containing the
label for the button
The user pressed

21. JbuttonExample (cont)
Creating
Main
21

22. Buttons that Maintains States
• The Swing GUI components contain three types of state
buttons
1. JToggleButton
A toggle button is a button that represents a settings with two
states i.e. on and off.
 Toggle buttons look similar to command buttons and display
a graphic or text (or both) to identify the button.
The graphic or button text should remain the same whether
the button is in the on or off state.
The state is indicated by highlighting the background of the
buttons.
 Users can click toggle buttons to turn a setting on or off--for
instance, to switch between italic and plain style in selected 22
text.

23. Button that maintain States (cont)
2-Check Boxes:
A checkbox is a control that represents a setting or value with an on or
off choice.
The setting of an individual checkbox is independent of other
checkboxes--that is, more than one checkbox in a set can be checked at
any given time.
A check mark within the checkbox indicates that the setting is selected.
The following figure shows both available and unavailable checkboxes in
selected and unselected states.

23
The user clicks a checkbox to switch its setting from off to on, or on to
off. When a checkbox is unavailable, the user cannot change its setting.

24. JCheckBoxes Example
Importing the classes
Using method setFont inherited by
JtextField indirectly from class
component
Creating two JCheckBox
object
Creating an instance of class
CheckBoxHandler and register
It with method addItemListener
For both the JCheckBox objects
24
Event Handling is being performed
By an instance of private inner class
checkboxHandler

25. JCheckBox Example (Cont)
Main Class
25

26. Buttons that Maintains States(cont)
3-Radio Buttons
A radio button represents an exclusive choice within a set of related
options.
Within a set of radio buttons, only one button can be on at any given
time.
The following figure shows active radio buttons and inactive radio
buttons in both on and off states.
When users click a radio button, its setting is always set to on. An
inner filled circle within the round button graphic indicates that the
setting is selected. If another button in the set has previously been
selected, its state changes to off.
26
When a radio button is unavailable, users cannot change its setting.

27. JRadioButton Example
Creating 4 JRadioButtonobjects
And adding them to JFrame 27

28. JRadioButton Example (Cont) Instantiates ButtonGroup
Object radioGroup
Using ButtonGroup method add
To associate each of the
JRadioButtons with radio group
Creating four instances of inner class
RadioButtonHandler
Class RadioButtonHandler implements
Interface ItemListener so it can handle
ItemEvents generated by the JRadioButtons
28

29. JRadioButton (cont)
29

30. JComboBox
 A JComboBox, lets the user choose one of several choices, can have two
very different forms.
 The default form is the uneditable combo box, which features a button and
a drop-down list of values.
 The second form, called the editable combo box, features a text field with a
small button abutting it. The user can type a value in the text field or click
the button to display a drop-down list.
30

31. JComboBox Example
Declaring and initializing array
Icons with four new image
icon objects
It contains the names of the four
Image files that are stored in the
Same directory as the application
A constructor initializes a JComboBox
Object with the strings in array names
As the elements in the list
Using JComboBox method setMaximumRowCount
to set Maximum number of elements That are
displayed when the user Clicks JComboBox
Are one statement that declares the event listner’s 31
Class,creates an object of that class and register It as
the listener for imagesJComboBox’s ItemEvents.

32. JComboBoxExample (Cont)
32

33. JList
• A JList presents the user with a group of items, displayed in
one or more columns, to choose from.
• Lists can have many items, so they are often put in scroll
panes.
The following figures shows two applications that use lists.
33

34. Jlist (Cont)
Types of Lists:
 Single Selection
Only one item can be selected at a time. When the user selects an item, any
previously selected item is deselected first.
 Single Interval Selection
Multiple, contiguous items can be selected. When the user begins a new
selection range, any previously selected items are deselected first.
34

35. Jlist (Cont)
 Multiple Interval Selection:
The default. Any combination of items can be selected. The user must
explicitly deselect items.
35

36. Jlist Example
Creating Jlist object colorJList
This line uses Jlist method
setSelectionMode To specify the list’s
selection mode.Class ListSelectMode1
Declares three constants that specify
A Jlist’s selectionMode-SINGLE SELECTION
Adding new instance of class
JScrollPane to the Jframe.
These lines uses Jlist method
addListSelectionListener to register 36
An object that implements ListSelectionListner

37. Jlist Example (Cont)
37

38. JSlider
• A JSlider component is intended to let the user easily enter a
numeric value bounded by a minimum and maximum value.
The following picture shows an application that uses a slider
to control animation speed:
38

39. Jslider Example
Class OvalPanel contains a paintComponent
Method that draws a filled circle.
A setDiameter method that changes the
Circle’s diameter and repaints the OvalPanel
A getPreferredSize method that returns
The preferred width and height of an
OvalPanel
getMinimumSize method that returns
An OvalPanel’s minimum width and height
39

40. Jslider Exapmle (Cont)
These lines creates Jslider object
DiameterSlider to control the diameter
Of the circle drawn on the OvalPanel
These lines customize the appearance
Of the Jslider.Method setMajorTickSpacing
Indicates that each major tick mark
Represents 10 values in the range of
Values supported by the Jslider.
40

41. Jslider Example (Cont)
41

42. Using Frames with Menus
• A menu provides a space-saving way to let the user choose
one of several options.
• Menus are unique in that, by convention, they aren't placed
with the other components in the UI. Instead, a menu usually
appears either in a menu bar or as a popup menu.
• A menu bar contains one or more menus and has a customary,
platform-dependent location — usually along the top of a
window.
• A popup menu is a menu that is invisible until the user makes
a platform-specific mouse action, such as pressing the right
mouse button, over a popup-enabled component. The popup
menu then appears under the cursor. 42

43. Using Frames with Menus (cont)
• The following figure shows many menu-related components:
a menu bar, menus, menu items, radio button menu items,
check box menu items, and separators.
43

44. This Was the Introduction to GUI however you can do more and
more with GUI this was just a lecture to tell you about GUI and
What you can do with it.
That’s All
Thanks For Your Concentration
44