Chapter Six

GUI

GUI
Graphical User Interface ("Goo-ee")
Pictoral interface to a program
Distinctive "look" and "feel"

Different applications with consistent GUIs

improve productivity
Example:
Netscape Communicator
Menu bar, text field, label

GUIs built from components

Component: object with which user interacts
Examples: Labels, Text fields, Buttons,
Checkboxes
2

GUI
The graphical user interface allows us to
interact with our programs through mouse
movements, button clicks, key presses,
and so on.
Your Windows or Macintosh operating
system provides you with a GUI so you
don't have to remember all sorts of
instructions to type at the command line.
3

GUI
There are three basic things that are necessary
to develop a graphical user interface
The GUI components sets
form the interface
buttons, labels, check boxes, etc

Component arrangement
the scheme whereby the UI components are arranged to
create the interface

Response to user requests

the act of associating actions to user requests, known as
'events'
4

Implementing GUIs in Java

The Java Foundation Classes (JFC)
Encompass a group of features for
constructing graphical user interfaces (GUI).
encompassing the following APIs:
Abstract Window Toolkit (AWT): native GUI
components
Swing: lightweight GUI components
2D: rendering two-dimensional shapes, text, and
images
Accessibility: allowing compatibility with, for
example, screen readers and screen magnifiers
5

Abstract Window Toolkit

(AWT)
Provides basic UI components:
Buttons, lists, menus, textfields, etc
Event handling mechanism
Clipboard and data transfer
Image manipulation
Font manipulation
Graphics

Platform independence is achieved

through peers, or native GUI components
6

Using AWT Components

AWT is Javas original set of classes for building
GUIs
Uses peer components of the OS; heavyweight
Not truly portable: looks different and lays out
inconsistently on different OSs
Due to OSs underlying display management system

Every GUI component is a subclass of the AWT

Component class (except for menus)
Controls allow simple user input
Labels display text
Containers arrange other components
Use Canvases for custom components

Components and Containers

The AWT set is structured in a class
hierarchy
every UI component is a descendant of
the Component class
This contains the very basic functionality
common to all components

AWT Components
primitive

container

Peers and Platform Independence

Thus an AWT menu on the Solaris platform,
for example, actually creates a Motif menu
object as its peer
UI components that have peers are called
heavyweight because
they are rendered in their own (opaque) windows
and thus are expensive to use,
they must be rectangular and cannot have
transparent backgrounds, and
they are not amenable to being subclassed
10

Using Peers
Java
Program

Java
AWT

Native
Window
System
Peers

A Java program creates and displays an

AWT component,
which creates and displays a native
component, or peer.
By using peers
Platform controls component appearance
Inconsistencies in implementations

11

Lightweight Components
AWT 1.1 introduced the notion of lightweight
components which:
are contained within a heavyweight component's window
do not have peers
are rendered in their container's window rather than one
of their own
do not incur performance penalties and can have
transparent backgrounds

Almost all Swing components are lightweight ones

that extend either
java.awt.Component or java.awt.Container
12

What is Swing?
is Java's graphical user interface library
Abstract Window Toolkit (AWT) V2
100% Pure Java
Requires JDK 1.1.2 or higher

Part of JFC
Components
New high-level components
Pluggable Look & Feel

You MUST import the following packages:

import java.awt.*;
import javax.swing.*;
13

Swing Philosophy
Richer Component Set
Replaces AWT Component Set
Adds more complex components

Swing Components Java-Based

If problems, same problems everywhere

14

The Swing Containment Hierarchy

typically has at least:
a top-level container: the root container that
holds everything together. e.g. JApplet,
JFrame, Window
an intermediate container: a container to
simplify the positioning of atomic components.
e.g. JPanel, JScrollPane
an atomic component: a self-sufficient
component not holding other components. eg.
JButton, JLabel

15

Components and Containers

a Container is a special type of component
you can add other components. Example,
JFrame, JApplet, JPanel etc
All containers have methods to add and
remove components

16

GUI Class Hierarchy (Swing)

Dimension
Font

Classes in the java.awt

package

LayoutManager
1

Heavyweight

FontMetrics
Object

Color

Panel

Applet

JApplet

Window

Frame

JFrame

Dialog

JDialog

Graphics
Component

Container

Swing Components
in the javax.swing package

JComponent

Lightweight

17

Description of Classes
Object: All classes ultimately derive from Object,
thus this class is at the top of the tree.
Component: represents an object that has a
visual representation that can be shown onscreen and that can interact with users. This class
defines some basic methods that are available to
all Swing classes.

18

Description of Classes
(Contd)
Container: builds on the basic visual capabilities
of the Component class by adding the ability to
hold other containers.
Window: a specialized type of container object
that has a border, a title bar, buttons that
minimize, maximize, and close the window, and
that can be repositioned and possibly even
resized by the user.

19

Description of Classes
(Contd)
Frame: a type of Window that serves as the basis
for Java GUI applications. Frame is an AWT class
that has been improved upon by the JFrame
class.
JFrame: the Swing version of the older Frame
class. Most of the Swing applications include at
least one JFrame object.
JComponent: is the basis for all other Swing
components except for frames.
20

Description of Classes
(Contd)
JPanel: used to organize and control the
layout of other components such as labels,
buttons, text fields, etc. In most Swing
applications, one or more panels are added
to a frame. Then, when the frame is
displayed, the components that were added
to its panels are made visible.
JLabel: creates a label that displays a simple
text value.
21

AWT vs. Swing

Swing does not replace the AWT; it is built on

top of it
All 1.0 AWT components are heavyweight;
corresponding Swing components are
lightweight
Swing component names begin with ``J'':
Component (AWT) vs. JComponent (Swing)
Button (AWT) vs. JButton (Swing)

Always use Swing components; however,

since Swing is built on top of AWT, you will
need to know some AWT methods

22

Transitioning from AWT

For most components, add J before
name
Button JButton, Applet JApplet,

Work from Components out to

Containers
Adding to top-level containers different /
delegate

23

Frames
Frame is a window that is not contained
inside another window. Frame is the basis
to contain other user interface components
in Java GUI applications.
The JFrame class can be used to create
windows.
For Swing GUI programs, use JFrame class
to create widows.
24

JFrame
JFrame is the application window class
It is special; it draws the window and
interacts with the operating system
When a JFrame is created, an inner
container called the contentPane is
automatically created
We don't draw graphics directly on
JFrame; we draw on the contentPane
25

Anatomy of a JFrame
title bar

minimize
maximize
close

The contentPane holds your

content; created automatically
when a JFrame is created
26

Example: Empty Frame

package swinglab;
import java.awt.*;
import javax.swing.*;
// extends keyword makes Calc a JFrame
public class Calc extends JFrame{
public Calc() {
// get the contentPane and assign it to cp
Container cp = getContentPane();
// exit program when user closes the window
setDefaultCloseOperation(EXIT_ON_CLOSE);
// sets the layout; will be covered in later slide
cp.setLayout(new FlowLayout());
// sets title to "My Funky Calculator"
setTitle("My Funky Calculator");
setSize(1000,700); // Frame has 0 default size
27
}

Example continued
. . .
public static void main (String[] args){
Calc trial = new Calc();
// Frame is invisible by default
trial.setVisible(true);
// main method exits but user interface
// stays alive
}
}
28

Using the JPanel Class

A panel is a type of container that's designed to hold
a group of components so they can be displayed on
a frame. The normal way to display a group of
controls such as text fields, labels, buttons, and other
GUI widgets is to add those controls to a panel, and
then add the panel to the frame.
You can bypass the panel and add the controls
directly to the frame if you want, but using a separate
panel to hold the frames control is almost always a
good idea.
29

Useful JPanel Constructors

and Methods

Constructor
JPanel ()

JPanel
(LayoutManager
layout)

Description
Creates a new panel.
Creates a new panel with
the specified layout
manager. The default
layout manager is
FIowLayout

30

Useful JPanel Constructors

and Methods (Contd)
Method
void add (Component c)

Description
Adds the specified
component to the
panel.

void remove (Component

c)

Removes the specified

component from the
panel.

void setLayout
(LayoutManager layout)

Sets the layout manager used to

control how components are
arranged when the panel is
displayed. The default is the
31
FIowLayout manager

Useful JPanel Constructors and

Methods (Contd)

Method

void setLocation (int

x, int y)

void setSize (int

width, int height)
void setToolTipText
(String text)

Description
Sets the x and y position
of the frame-screen. The
top-left corner of the
screen is 0, 0.
Sets the size of the frame to
the specified width and
height.
Sets the tooltip text that's
displayed if the user rests
the mouse over an empty
part of the panel.
32

Example:
package swinglab;
import java.awt.*;
import javax.swing.*;
public class Calc extends JFrame{
private JPanel entryPanel;
private JPanel answerPanel;
public Calc() {
Container cp = getContentPane();
setDefaultCloseOperation(EXIT_ON_CLOSE);
cp.setBackground(Color.white);
setTitle("My Funky Calculator");
setSize(1000,700);
entryPanel = new JPanel();
entryPanel.setBackground(Color.orange);
answerPanel = new JPanel();
answerPanel.setBackground(Color.yellow);
// . . .

33

Example:
cp.add(entryPanel);
cp.add(answerPanel);
}
public static void main (String[] args){
Calc trial = new Calc();
trial.setVisible(true);
}
}

34

Colors
There are 13 predefined colors
You can access them using Color.x where
x is
orange, pink, cyan, magenta, yellow, black, blue,
white, gray, lightGray, darkGray, red, green

You can define your own colors

Color ugly = new Color(30,90,120);
//RGB(red-green-blue); values between 0-255;
35

Frames, Panes and Panels

36

JComponents

JComponent: The base class for all Swing components

except top-level containers
JComponents do not extend their AWT counterparts:
For example, the JButton class is not a subclass (direct or
indirect) of Button

Note that JComponents are containers

However, some Swing components are not
JComponents
For example, some Swing containers are direct subclasses of
their AWT counterparts

Its subclasses present information or interact with the

user
Examples:labels(JLabels), buttons(JButtons),
textfields(JTextField)
- Containers are some JComponents that are designed to hold
other components (no interaction with the user)
- Examples: JPanel, JScrollPane

37

Using Labels
A label is a component that simply displays
text. Labels are used for a variety of
purposes: to display captions for other
controls such as text fields or combo boxes,
to display informational messages, or to
show the results of a calculation or a
database lookup.

38

Using Labels
A label can also display an image, or it can
display both an image and some text. And
you have complete control over the
appearance of the text.
You can specify the font, size, whether the
text is bold, italic, or underlined, what color
the text is displayed as, and so on.
39

Useful JLabels Constructors and

Methods

Constructor
JLabel ( )

Method
String getText ( )
void setText (String
text)
void setToolTipText
(String text)

Description
Creates a new label with no
initial text.
Description
Returns the text displayed
by the label.
Sets the text displayed by
the label.

Sets the tooltip text that's

displayed if the user rests
the mouse over the label
40
for a few moments

Swing Example
import java.awt.*;
import javax.swing.*;
public class MyTest extends JFrame {
JLabel myLabel = new JLabel("Hello, World!");
public MyTest() {
super("MyTest");
setSize(350, 100);
getContentPane().add(myLabel);
setDefaultCloseOperation(EXIT_ON_CLOSE);
setVisible(true);
}
public static void main (String args[]) {
MyTest m = new MyTest();
}
}

41

Simple Swing Application

42

Creating Buttons
Next to labels, the Swing component used
most is the JButton component which
creates a button the user can click.
The constructors of the JButton class are
similar to the constructors for the JLabel
class. You can either create an empty
button or a button with text.
43

Useful JButton Constructors

and Methods
Constructor
JButton ( )
JButton (String text)
String getText ()

Description
Creates a new button
with no initial text.
Creates a new button
with the specified text.
Returns the text
displayed by the
button.
44

Useful JButton Constructors and

Methods (Contd)
Method

Description

void
setRolloverEnabled
(boolean value)

Enables or disables the

rollover effect, which
causes the border to get
thicker when the mouse
moves over the button.
The default setting is true
(rollover effect enabled).

void setEnabled
(boolean value)

Enables or disables the

button. The default setting is
45
true (enabled).

Useful JButton Constructors

and Methods (Contd)
Method
void setText
(String text)

Description
Sets the text displayed by the
button.

void setToolTipText Sets the tooltip text that's

(String text)
displayed if the user lets the

mouse rest over the button.

void setVisible
(boolean value)

Shows or hides the button.

The default setting is true (the
button is visible).
46

JTextField - JPassWordField
They are single-line areas in which text can be
entered by the user from the keyboard or text can
simply be displayed

Constructors
JTextField(int columns)
Creates an empty text field with the specified number of
columns.

JTextField(String text)
Creates a text field initialized with the specified text.

JTextField(String text, int columns)

Creates a text field initialized with the specified text and the
column size.

JTextField (String, int maximumNumberCharaters)

47

 Methods
int getColomns(int col);
void setColoumns(int col);
getText()
Returns the string from the text field.

setText(String text)
Puts the given string in the text field.

setEditable(boolean editable)
Enables or disables the text field to be edited. By default,
editable is true.

setColumns(int)
Sets the number of columns in this text field. The length of
the text field is changeable.
48

 When the user types data into them and presses

the Enter key, an action event occurs. If the
program registers an event listener, the listener
processes the event and can use the data in the
text field at the time of the event in the program
JTextField textField1 = new JTextField("This is the
initial text");
JTextField textField2 = new JTextField("Initial text",
columns);
textField.setText(hi);
49

JPasswordField class extends JTextField class

Methods

Char[ ] getPassword();

//To obtain the password

JTextArea: a component used to accept multiple

line text.
Constructors

JTextArea( )

Default constructor - Create an empty text area

JTextArea(int rows, int columns)

Creates a text area with the specified number of

rows and columns.

JTextArea(String s, int rows, int columns)

Creates a text area with the initial text and

the number of rows and columns specified.
50

Other JComponents
JComboBox
drop-down list of items from which the user can
makes selection by clicking an item or possibly
by typing into the box
Constructor
JComboBox(String str[]);

Methods
getSelectedItem();//returns the selected item
getSelectedIndex();
setMaximumRowCount(int n) - maximum of n items
will be displayed if there are more items adds
scrollbar.
51

import java.awt.*;
import javax.swing.*;
import java.util.*;
public class Calc extends JFrame{
private
private
private
private
private
private
private
private
private
static
static
static
static

JLabel letLabel;
JLabel answerLabel;
JTextField num1;
JTextField num2;
JComboBox operation;
JButton calculate;
JButton quit;
JPanel entryPanel;
JPanel answerPanel;

final
final
final
final

String
String
String
String

ADD_OP
SUB_OP
MUL_OP
DIV_OP

=
=
=
=

"ADDITION";
"SUBTRACTION";
"MULTIPLICATION";
"DIVISION";
52

private static final int XSIZE = 1000;

private static final int YSIZE = 700;
public Calc() {
Container cp = getContentPane();
setDefaultCloseOperation(EXIT_ON_CLOSE);
cp.setLayout(new FlowLayout());
cp.setBackground(Color.WHITE);
setTitle("My Funky Calculator");
setSize(XSIZE,YSIZE);
entryPanel = new JPanel();
entryPanel.setBackground(Color.ORANGE);
answerPanel = new JPanel();
answerPanel.setBackground(Color.YELLOW);
letLabel = new JLabel("Let's Calculate!");
entryPanel.add(letLabel);
letLabel.setForeground(Color.GREEN);

53

num1 = new JTextField("1st Number", 10);

entryPanel.add(num1);
num1.setBackground(Color. LIGHT_GRAY);
num2= new JTextField("2nd Number", 10);
entryPanel.add(num2);
num2.setBackground(Color.LIGHT_GRAY);
operation = new JComboBox();
operation.addItem(ADD_OP);
operation.addItem(SUB_OP);
operation.addItem(MUL_OP);
operation.addItem(DIV_OP);
entryPanel.add(operation);
operation.setBackground(Color.BLUE);
answerLabel = new JLabel("Answer");

54

entryPanel.add(answerLabel);
answerLabel.setForeground(Color.red);
calculate = new JButton("Calculate");
calculate.setBackground(Color.pink);
answerPanel.add(calculate);
quit = new JButton("Quit");
answerPanel.add(quit);
Color quitter = new Color(50,100,50);
quit.setBackground(quitter);
cp.add(entryPanel);
cp.add(answerPanel);
}
public static void main(String[] args){
Calc trial = new Calc();
trial.setVisible(true);
}
}

55

56

Layout Managers
Associated with containers
Automate the layout of elements
When elements are added to the container
When the window is resized
automatically adjust the positions and sizes of the elements.

Layout managers control:

Where components appear
What sizes they are
How they react when they are resized
57

Hierarchy of Layout Managers

58

BorderLayout
It uses five areas to hold components:
north, south, east, west, and center.
All extra space is placed in the center
area.

59

FlowLayout
It simply lays out components from left to
right, starting new rows if necessary

60

CardLayout
Use the CardLayout class when you have
an area that can contain different
components at different times

61

GridLayout
GridLayouts simply make a bunch of
Components have equal size, displaying
them in the requested number of rows and
columns

62

Using Layout Managers

BorderLayout
<nameofcontainer>.setLayout(new BorderLayout());
When adding components to the container:
<nameofcontainer>.add(<nameofcomponent>,
BorderLayout.REGION);
where REGION is either NORTH, SOUTH, WEST,
CENTER OR EAST.
JPanel panel = new JPanel(); // default
// FlowLayout
panel.setLayout(new BorderLayout());
panel.add(button,BorderLayout.NORTH);

63

Using Layout Managers

FlowLayout
<nameofcontainer>.setLayout(new FlowLayout());
When adding components to the container:
<nameofcontainer>.add(<nameofcomponent>);
JPanel panel = new JPanel(); // default
// FlowLayout
//following line is redundant
panel.setLayout(new FlowLayout());
panel.add(button);

64