Download - Gui Lecture01
-
8/10/2019 Gui Lecture01
1/44
GUI(Graphical User Interface)bilalAmjad(SlideShare)
1
-
8/10/2019 Gui Lecture01
2/44
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 widgetsshort for windowgadgets. 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. Javas so-called Swing GUI
components from thejavax.swing package.
2
-
8/10/2019 Gui Lecture01
3/44
Simple GUI-Based Input/Output with JOptionPane
Taking Input from User Using
Input Dialog Box
Converting
String
Into integer
value
Showing Message by Message Dialog Box
3
-
8/10/2019 Gui Lecture01
4/44
Output
4
-
8/10/2019 Gui Lecture01
5/44
Different JoptionPane Message Icons
5
-
8/10/2019 Gui Lecture01
6/44
JOptionPane Message Icon (cont)
6
-
8/10/2019 Gui Lecture01
7/44
JOptionPane Message Icon (cont)
7
-
8/10/2019 Gui Lecture01
8/44
An Overview of SWING components
Though its 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
-
8/10/2019 Gui Lecture01
9/44
Swing V/s AWT
There are actually two sets of GUI components Swing components and AWT
components.
In Javas early days, GUIs were built with components from the Abstract
Window Toolkit (AWT) inpackagejava.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 components appearance and the way in which the user
interacts with it are known as its look-and-feel.
9
-
8/10/2019 Gui Lecture01
10/44
Swing Components
Swingis the primary Java GUI widget toolkit. It is part of Oracle'sJava Foundation Classes (JFC) an API for providing a graphical userinterface (GUI) for Java programs.
Swing was developed to provide a more sophisticated set of GUIcomponents than the earlier Abstract Window Toolkit (AWT). Swing
provides a native look and feel that emulates the look and feel ofseveral platforms, and also supports a pluggable look and feel thatallows applications to have a look and feel unrelated to theunderlying platform. It has more powerful and flexible componentsthan AWT. In addition to familiar components such as buttons, checkbox and labels, Swing provides several advanced components such
as tabbed panel, scroll panes, trees, tables and lists. UnlikeAWT components, Swing components are not implemented
by platform-specific code. Instead they are written entirely in Javaand therefore are platform-independent. The term "lightweight" isused to describe such an element. 10
-
8/10/2019 Gui Lecture01
11/44
Swing Component Example
11
-
8/10/2019 Gui Lecture01
12/44
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
-
8/10/2019 Gui Lecture01
13/44
Displaying Text and Images in a window
Most windows youll 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 windowa title bar at the top, and buttons to minimize,
maximize and close the window.
See the Example Program on the Next
Slide
13
-
8/10/2019 Gui Lecture01
14/44
D
I
S
P
L
AY
I
N
G
T
E
X
T
A
N
D
I
M
A
G
E
S
Importing
Classes
That will be
Used in the
program
Declaring three
JLabel Instances
Constructor
Ofthe
program
14
-
8/10/2019 Gui Lecture01
15/44
Output of the Program
15
-
8/10/2019 Gui Lecture01
16/44
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 JLabela subclass of JComponent.AJLabel displays read-only text, an
image, or both text and an image. Applications rarely change a labels
contents after creating it. Following is the Example program:
16
-
8/10/2019 Gui Lecture01
17/44
Output of the program
17
-
8/10/2019 Gui Lecture01
18/44
Common GUI Event Types and Listener Interfaces Following Figure illustrates a hierarchy containing many event
classes from the packagejava.awt.event. These event types
are used with both AWT and Swing components. Additionalevent types that are specific to Swing GUI components aredeclared in packagejavax.swing.event.
18
-
8/10/2019 Gui Lecture01
19/44
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
-
8/10/2019 Gui Lecture01
20/44
-
8/10/2019 Gui Lecture01
21/44
Jbutton Example (cont)
Creating
Main
21
-
8/10/2019 Gui Lecture01
22/44
Buttons that Maintains States
The Swing GUI components contain three types of statebuttons
1. JToggleButtonA toggle button is a button that represents a settings with twostates i.e. on and off.
Toggle buttons look similar to command buttons and displaya graphic or text (or both) to identify the button.
The graphic or button text should remain the same whetherthe button is in the on or off state.
The state is indicated by highlighting the background of thebuttons.
Users can click toggle buttons to turn a setting on or off--forinstance, to switch between italic and plain style in selectedtext.
22
-
8/10/2019 Gui Lecture01
23/44
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 atany 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.
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.
23
J
-
8/10/2019 Gui Lecture01
24/44
CheckBoxesExample
Importing the classes
Using method setFont inherited by
JtextField indirectly from classcomponent
Creating two JCheckBox
object
Creating an instance of classCheckBoxHandler and register
It with method addItemListener
For both the JCheckBox objects
Event Handling is being performed
By an instance of private inner classcheckboxHandler
24
-
8/10/2019 Gui Lecture01
25/44
JCheckBox Example (Cont)
Main Class
25
-
8/10/2019 Gui Lecture01
26/44
Buttons that Maintains States(cont)
3-Radio ButtonsA 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 giventime.
The following figure shows active radio buttons and inactive radiobuttons in both on and off states.
When users click a radio button, its setting is always set to on. Aninner filled circle within the round button graphic indicates that thesetting is selected. If another button in the set has previously beenselected, its state changes to off.
When a radio button is unavailable, users cannot change its setting.26
-
8/10/2019 Gui Lecture01
27/44
JRadioButton Example
Creating 4 JRadioButtonobjects
And adding them to JFrame 27
-
8/10/2019 Gui Lecture01
28/44
JRadioButton Example (Cont)
Using ButtonGroup method add
To associate each of the
JRadioButtons with radio group
Instantiates ButtonGroup
Object radioGroup
Creating four instances of inner classRadioButtonHandler
Class RadioButtonHandler implements
Interface ItemListener so it can handle
ItemEvents generated by the JRadioButtons
28
-
8/10/2019 Gui Lecture01
29/44
JRadioButton (cont)
29
-
8/10/2019 Gui Lecture01
30/44
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
-
8/10/2019 Gui Lecture01
31/44
JComboBox Example
It contains the names of the four
Image files that are stored in the
Same directory as the application
Declaring and initializing array
Icons with four new image
icon objects
A constructor initializes a JComboBox
Object with the strings in array names
As the elements in the list
Using JComboBox method setMaximumRowCountto set Maximum number of elements That are
displayed when the user Clicks JComboBox
Are one statement that declares the event listners
Class,creates an object of that class and register It as
the listener for imagesJComboBoxs ItemEvents.
31
-
8/10/2019 Gui Lecture01
32/44
JComboBox Example (Cont)
32
-
8/10/2019 Gui Lecture01
33/44
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
-
8/10/2019 Gui Lecture01
34/44
Jlist (Cont)
Types of Lists:
Single SelectionOnly one item can be selected at a time. When the user selects an item, any
previously selected item is deselected first.
Single Interval SelectionMultiple, contiguous items can be selected. When the user begins a new
selection range, any previously selected items are deselected first.
34
-
8/10/2019 Gui Lecture01
35/44
Jlist (Cont)
Multiple Interval Selection:
The default. Any combination of items can be selected. The user must
explicitly deselect items.
35
Jli
-
8/10/2019 Gui Lecture01
36/44
stExample
Creating Jlist object colorJList
This line uses Jlist method
setSelectionMode To specify the lists
selection mode.Class ListSelectMode1
Declares three constants that specify
A JlistsselectionMode-SINGLE SELECTION
Adding new instance of classJScrollPane to the Jframe.
These lines uses Jlist method
addListSelectionListener to register
An object that implements ListSelectionListner
36
-
8/10/2019 Gui Lecture01
37/44
Jlist Example (Cont)
37
-
8/10/2019 Gui Lecture01
38/44
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
-
8/10/2019 Gui Lecture01
39/44
Jslider Example
Class OvalPanel contains a paintComponent
Method that draws a filled circle.
A setDiameter method that changes the
Circles diameter and repaints the OvalPanel
A getPreferredSize method that returns
The preferred width and height of anOvalPanel
getMinimumSize method that returns
An OvalPanelsminimum width and height39
J lid E l (C )
-
8/10/2019 Gui Lecture01
40/44
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 setMajorTickSpacingIndicates that each major tick mark
Represents 10 values in the range of
Values supported by the Jslider.
40
-
8/10/2019 Gui Lecture01
41/44
Jslider Example (Cont)
41
-
8/10/2019 Gui Lecture01
42/44
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 baror as apopup 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
-
8/10/2019 Gui Lecture01
43/44
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
-
8/10/2019 Gui Lecture01
44/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.
Thats AllThanks For Your Concentration
44