gui lecture01

8/10/2019 Gui Lecture01

1/44

GUI(Graphical User Interface)bilalAmjad(SlideShare)

1


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


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


4/44

Output

4


5/44

Different JoptionPane Message Icons

5


6/44

JOptionPane Message Icon (cont)

6


7/44

JOptionPane Message Icon (cont)

7


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


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


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


11/44

Swing Component Example

11


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


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


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


15/44

Output of the Program

15


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


17/44

Output of the program

17


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


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


20/44


21/44

Jbutton Example (cont)

Creating

Main

21


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


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


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


25/44

JCheckBox Example (Cont)

Main Class

25


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


27/44

JRadioButton Example

Creating 4 JRadioButtonobjects

And adding them to JFrame 27


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


29/44

JRadioButton (cont)

29


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


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


32/44

JComboBox Example (Cont)

32


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


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


35/44

Jlist (Cont)

Multiple Interval Selection:

The default. Any combination of items can be selected. The user must

explicitly deselect items.

35

Jli


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


37/44

Jlist Example (Cont)

37


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


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 )


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


41/44

Jslider Example (Cont)

41


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


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


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

gui lecture01

Documents