Graphical User Interface (GUI)

Programming I
 Lecture Objectives
• Understand the basic concepts of Graphical User
Interfaces (GUIs)
• Practice Basic GUI Programming in Java
• Develop Basic GUI Applications
• Study Layout Management and Managers for GUI
Applications
 Outline
Graphical User Interfaces (GUIs)
-- Overview
-- Essential elements

Containers
-- Overview
-- Examples

Components
-- Overview
-- Examples

Layout Managers
-- Overview
-- Examples
 Graphical User Interface (GUI)
• A Graphical User Interface (GUI) is one variety of user
interface.
• User interacts with objects on the screen (icons, JButtons,
scroll-bars, etc.) via mouse clicks or keyboard actions.

Downloading libcrypt ...

File Edit 40%

Cancel Enter
Open
Save
Save As...
Ok
Quit
 GUI Popularity
• Popularized in 1980s by the Macintosh.

• Now state of the practice, and not final word in UI

• Intended to replace text-based "command line" and "function

key" interfaces.

• Despite similarities, GUIs are typically platform-specific

(Windows 95/98/NT/1900, MacOS, X Windows look-and-
feel standards).

• Some graphical toolkits now provide cross-platform APIs.

E.g. wxWindows, GTK+, Java.
 Java’s GUI Capabilities
Java provides essentially two related toolkits for making
GUIs:

1. The Abstract Windowing Toolkit ("AWT"), and

2. The Java Foundation Classes ("Swing")

Swing is merely an expanded version of the AWT,

and provides greater control and convenience.
 Cautionary Note
Java has two flavors of toolkits:
1. Swing.
2. AWT.
It is not wise to mix AWT and Swing Components. For your
first programs, stick with one toolkit (swing!!!).

How do you tell them apart?

Generally, but not always, Swing Components will have a
"J" in front of the class name:

AWT Swing

JButton JJButton
 Keep in Mind
• We will program graphical elements in source
code.
▪ There are drag and drop systems (graphical integrated
development environments (IDEs).

• Java is designed to work across different

platforms.
▪ This poses special challenges!!!
 Steps to GUI Construction
We will learn GUI creation in two steps: the "view", and then
the "controls" or event handling.

In Java, to create a GUI, you (1): 1. i.e. UI form and

appearance
• Specify a Container, using . . .
• a Layout Manager to . . .
• place Components and/or
Containers of Components . . . TODAY
on the screen as desired.
LATER
2.
In Java, to make a GUI act as the
interface for a program, you (2)
i.e. UI interaction
and behavior • Design human/computer dialog, using
Listeners and component-generated
events
 GUI Design & Creation
There are three essential constructs in any GUI:

Containers
-- used to hold items (e.g., the frame)

File Edit Help

offset
Components
-- the widgets or interactors (e.g.,
JButtons) CLICK ME

LayoutManagers
-- the hidden algorithm used to offset
organize the widgets inside the
container
 GUI Basic Constructs
The three basic constructs used in every GUI are:

1.
Containers
File Edit Help

offset
2.
Components CLICK ME

3.
LayoutManagers
offset
 Containers

Containers are special components that may contain

other components.

Examples of Containers:
AWT Swing
• Panel • JPanel
• Frame • JFrame
• Applet • JApplet
• Window • JWindow

Note: Containment is not the same as inheritance

extension. A Frame may contain JButtons, but JButtons
are not subclasses of Frame.
 Containers (Cont’d)

A Container is a class that extends from

java.awt.Container
Object

As it turns out, the class "Container" is itself a

Component. Component

Containers can have:

Container

• Layouts set on them (discussed later)

• Other components or containers added to them.

 Containers: An Example
Let’s make a simple Frame.

When working with

GUIs, you often have to
consult the API.

Note the inheritance structure

of your classes.
 Containers: An Example (Cont’d)
So far, we’ve used the API to learn how to make a Frame.

We found constructors for:

public JFrame ();

public JFrame (String strTitle);

Now, how can we set the size of the Frame?

We again return to the API.

 Containers: An Example (Cont’d)
The class java.awt.Frame does not contain a method to set
its size. But such a method was inherited from
java.awt.Component:
 Containers: An Example (Cont’d)
Likewise, there’s no method in java.awt.Frame to make the
Frame visible. Instead, we find the method "show()" was
inherited from java.awt.Window
 Hello GUI – The Program

import javax.swing.*;
public class HelloGUI {

public static void main (String[ ] arg) {

System.out.println("About to make GUI");
JFrame f = new JFrame ("Hello GUIs");
f.setSize( 200, 200 );
f.show();
System.out.println("Finished making GUI");
} // main()
} // class HelloGUI
 Hello GUI – The Program (Cont’d)
Our program runs, and the frame never goes away. When
we reach the end of main (as our print statement indicates)
why doesn’t the program end?
 Hello GUI – The Program (Cont’d)
When the Java VM created our
Frame, it entered into a kind of
‘infinite loop’, while(true){
waiting for input and //get user input
// handle event
events. (This is common }
for all graphical toolkits.)
import javax.swing.*;
public class HelloGUI {
public static void main (String[ ] arg) {
System.out.println Since we didn’t write
("About to make GUI");
JFrame f = new JFrame ("Hello GUIs"); any event handlers,
f.setSize( 200, 200 );
f.show();
not even the "window
System.out.println disposal" JButton will
("Finished making GUI");
}// main work.
}// class HelloGUI
 Hello GUI – The Program (Cont’d)
Solution: To fix this problem, we’ll have to write some event
handling code. But in order to write some event handling
code, we have to create some components…

So, for now, you’ll just have to use Ctrl-C to end the program.
Once the basics of GUI construction are covered, we’ll return
to this problem.
 GUI Design Idea

We really have two choices when working with top-level

containers:

1. Inheritance javax.swing.JFrame
-- our class extends a container
MyGUI

2. Composition MyGUI
-- our class holds a container
java.awt.Frame
 GUI Design Idea: Example
We save our
import javax.swing.*; single inheritance
public class HelloComposition {
JFrame f;
public HelloComposition() {
f = new Frame("Composition Test");
f.setSize(200,200);
f.setBackground(Color.red);
f.show();
Check the API
}
public static void main(String[] args) {
HelloComposition h = new HelloComposition();
}
}

Will call constructor,

so the show() method gets called
 GUI Design Idea: Example
A few changes allows us to convert between the two
solutions:
import java.awt.*;
public class HelloInheritance extends Frame {
Frame f;
public HelloInheritance(){
f = new Frame super("Composition Test");
f this.setSize(200,200);
f this.setBackground (Color.red);
f this.show();
}
public static void main (String[] args) {
HelloInheritance h = new HelloInheritance();
}
}

Note: Even the statement this. could be safely removed!

 Which Solution Works Better?

Inheritance Composition
• Use up our single inheritance • Saves the single inheritance

• "Wasted inheritance" occurs • Useful when you want the

where we subclass, but fail to "factory settings" for a GUI, with
override anything. no changed behavior

• Easier to change basic GUI • Often requires more code,

behavior more references
 Container Summary
• Creating containers requires careful study of the API.
Watch the inheritance structure of the classes.

• A top-level container, like a Frame, requires event

handlers (covered later).

• There are many useful methods for customizing

containers. Just look them up in the API documentation:

myFrame.setBackground(Color.red);

An inherited
A class, also
method
in the API
 Container Summary
We may often use "composition" where:

-- We don’t anticipate changing behaviors

-- We need to save our single inheritance

We may often use "inheritance" where:

-- We need to change basic GUI behaviors

 Components
Most interactions in a Java GUI are with Components.
• Another generic term for Component in other GUIs
(e.g. X Windows) is "widget".
• Different types of components for different types of
interaction (e.g. JButtons, etc.)

User interactions with components create events (thus,

allow event-driven programming)

As a rule, a Component cannot have other components

inside:
• Exceptions to rule: pop up menus may have menu items
added to them. And Containers are themselves
components due to inheritance.
Component Examples

Demo: HelloWidget
 Component Examples (Cont’d)
Component - generic widget that you can interact with

JButton - a widget that you can press

Canvas - a widget that you can draw on
Recall:
Checkbox - a widget that is checked or not checked
A Container
"is a" Choice - an option menu that drops down
Component Container - a generic class that contains Components
Panel - a Container to be used inside another
container; used to split an existing window
Label - a single line of read-only text
List - a list of Strings
Scrollbar - a horizontal or vertical scrollbar
TextComponent
TextArea - multi-line editable text
TextField - single-line editable text
 Component Examples (Cont’d)
Canvas:

• Typically a drawing surface on which shapes, graphs, pictures, etc can

be drawn.

• Utilize mouse events and mouse motion events to interact with the
user to accomplish the drawing tasks.

TextField:

• A one-line data entry area.

• Theoretically infinite in length.

• Can generate Key events to indicate that the user has typed a key.

• More typically, it generates an Action event when the user finishes the
data entry and hits Return in the TextField.
 Component Examples (Cont’d)
JButton:
• Simply a clickable component.

• Appears as a standard JButton on whatever graphical environment

the user happens to be running at the time.

• Generates an Action event when clicked.

Label:
• A one-line field of text.

• User cannot change this text directly; program changes text with
setText( ) method.

• Usually not used to capture events (but could).

• Usually used as a one-way information source to provide a message

to the user.
 Joining Components & Containers
Containers have a method:

public void add (Component c)

that allows us to place items inside. Thus:

JPanel p = new JPanel();

JJButton b1 = new JJButton ("Example 1");
JJButton b2 = new JJButton ("Example 2");
p.add (b1);
p.add(b2);

In this example, two JButtons are added to the panel.

 An Example
import javax.swing.*;
public class HelloComponent {
JFrame f;

public HelloComponent(){
f = new JFrame("Component Test");
f.setSize(200,200);
f.setBackground(Color.red);
JPanel p = new JPanel();
JJButton b = new JJButton("Hello
Components");
p.add(b);
f.add(p);
f.show();
}
public static void main (String[] args) {
new HelloComponent();
}
}
 Layout Managers
We can now create Components and Containers.

But how can they be organized? We might be tempted to

call methods that set the x, y location of a component in a
container.

Consulting the API, we find some likely methods:

public void setLocation(int x, int y);

public void setSize(int width, int height);

 Layout Managers: Motivation
• To arrange items, one could specify the location of a Component by
specific x and y coordinates. The Component class contains the
method setLocation(int width, int height):

JFrame f = new JFrame();

f.setSize(500,500); What’s
wrong
JJButton myJButton = new JJButton ("Click");
with this
add(myJButton); approach???
myJButton.setLocation(25, 75);

NOTE: Origin 0,0 75 pixels down

at top left!

Click

Note: JButton’s
x and y coordinate
starts from top left 25 pixels over
 Layout Managers: Motivation (Cont’d)
Problems with specifying (x, y) coordinates for Components:

• This becomes tedious for even mildly complex GUIs.

• Addition of more components requires recalculation of every

component’s x, y coordinate.

• If container resizes (e.g., user expands window), calculations

have to be redone!

Solution:

• Position components based on a percentage of available

container size. Or create an algorithm to place components . . .

But Java already does this for you !!!

 Layout Managers: AWT-Based
• Java provides several layout managers.

• We will concentrate here on several of them:

• BorderLayout
• GridLayout
• FlowLayout
• BoxLayout

• To tell a container which layout manager to use, invoke the method

setLayout( );
and specify a type of layout.

For example:
To specify a BorderLayout:

setLayout (new BorderLayout());

 Layout Managers: Two General Flavors
• One can conceptually divide layout managers
into two types:
▪ Those that attach constraints to their
components.
▪ Those that do not.

• What does this mean, "attach constraints“?

If a manager attaches constraints to a component,
then information about a component’s location
(e.g., compass points) is stored with the object.
 Layout Managers: Constraints

• BorderLayout specifies constraints corresponding to

compass regions of a container:

NORTH

WEST CENTER EAST

SOUTH
 Layout Managers: Constraints (Cont’d)
• BorderLayout then appends constraint information on
all components, e.g.:

this.setLayout (new BorderLayout());

JButton e = new JButton ("East");
JButton w = new JButton ("West");
JButton n = new JButton ("North");
add(e, "East"); // deprecated
add("West", w); // works; deprecated
add(n, BorderLayout.NORTH); // preferred
Layout Managers: Constraints (Cont’d)
 Layout Managers: Another Example
import javax.swing.*;
public class Test extends JFrame {

public Test() {
super ("BorderLayout Demo");
this.setSize(200,200);
this.setLayout(new BorderLayout());
this.add (new JButton ("North"), BorderLayout.NORTH);
this.add (new JButton ("South"), BorderLayout.SOUTH);
this.add (new JButton ("East"), BorderLayout.EAST);
this.add (new JButton ("West"), BorderLayout.WEST);
this.add (new JButton ("Center"), BorderLayout.CENTER);
}

public static void main (String[ ] args) {

new Test().show();
}
} // Test
Layout Managers: Another Example (Cont’d)
Program Output:
 BorderLayout
BorderLayout specifies the arrangement:
NORTH
WEST

EAST
CENTER

SOUTH

• To add components to a BorderLayout, specify the

position in which the component will reside.

• Only one component (or container) can go in each of the

five positions.
BorderLayout: An Example

setLayout (new BorderLayout());

add(new Label ("Hello!"), "North");
Canvas myCanvas = new Canvas();
// more about Canvas in a moment
add (myCanvas, "Center");
Hello!

{ a fresh canvas
for drawing here}
BorderLayout: Simple Example

import javax.swing.*;
public class HelloLayout {
public static void main(String[] args) {
JFrame f = new JFrame();
f.setSize(400,400);
BorderLayout bord = new BorderLayout();
f.setLayout(bord);

JButton b = new JButton ("Hello");

f.add(b, BorderLayout.SOUTH);
}
} // HelloLayout
Will this work?

Let’s run it
and find out...
BorderLayout: Simple Example (Cont’d)

import javax.swing.*;
public class HelloLayout {
public static void main(String[] args) {
JFrame f = new JFrame();
f.setSize(400,400);
BorderLayout bord = new BorderLayout();
f.setLayout(bord);

JButton b = new JButton ("Hello");

f.add(b, BorderLayout.SOUTH);
f.show();
}
} // HelloLayout
Ahh.. We forgot to set our Frame visible. Now it
works.
Welcome to the exciting world
of GUI debugging.
 Layout Managers: No Constraints
• The second type of LayoutManager does not specify
constraints for the objects it holds.

• Examples:
▪ GridLayout()
▪ FlowLayout()

• Without constraints, you cannot accurately predict

layout behavior across platforms.
Layout Managers: No Constraints (Cont’d)
import javax.swing.*;
public class FlowTest extends JFrame {
String Labels[] = {"Short", "Short", "Long Label",
"Really Long Label", "Really, really long"};
public FlowTest(){
this.setSize(400,200);
setLayout(new FlowLayout());
for (int i = 0; i < Labels.length; i++){
JButton temp = new JButton (Labels[i]);
add (temp);
}
}
public static void main (String arg[]){
new FlowTest().show();
}
} //class FlowTest
Layout Managers: No Constraints (Cont’d)
Program Output:
Layout Managers: No Constraints (Cont’d)
Program Output is also:
Layout Managers: No Constraints (Cont’d)
Note:
▪ Since pixels, fonts and insets vary with each platform, layout
without constraints will vary greatly.
Lesson:
▪ Use layout managers without constraints only when you
have few components, or you’ve anticipated their possible
movement.
Layout Managers: No Constraints (Cont’d)
• Don’t think that layout managers without constraints
are not useful!
• One of the most useful constraint-free layout
manager is "GridLayout".

public GridLayout();

public GridLayout(int rows, int cols);

public GridLayout(int rows, int cols, int hgap, int vgap);

 GridLayout
GridLayout specifies a grid pattern via:

setLayout (new GridLayout (rows, columns));

For example:

setLayout (new GridLayout(2,3));

generates:
 GridLayout (Cont’d)
• To add components (or containers) to a GridLayout, particular
locations are not specified (unlike BorderLayout).

• Instead, the components (or containers) are positioned by the

sequence in which they are added, as indicated by numerals
below.

• Significantly, GridLayout is distortive, meaning components are stretched to fill

the available space in the grid.

1 2 3

4 5 6
 GridLayout (Cont’d)
Optionally, two additional parameters may be used with
GridLayout to specify the horizontal and vertical spacing (in pixels)
between grid elements:

setLayout (new GridLayout (rows, columns, hspace, vspace));

where hspace specifies horizontal size, and vspace specifies vertical size
e.g.,
setLayout (new GridLayout (2, 2, 7, 5));
hspace

vspace
 GridLayout: Example 1
import javax.swing.*;
public class CalcPad extends JFrame {
public CalcPad() {
setLayout(new GridLayout(5,3));
add (new JButton ("7"));
public static void main (String[] args){
add (new JButton ("8"));
CalcPad ti = new CalcPad();
add (new JButton ("9"));
ti.setSize(150,150);
add (new JButton ("4"));
ti.show();
add (new JButton ("5"));
}
add (new JButton ("6")); Program Output:
}//CalcPad
add (new JButton ("1"));
add (new JButton ("2"));
add (new JButton ("3"));
add (new JButton ("."));
add (new JButton ("0"));
add (new JButton ("+/-"));
add (new Panel());
}
 GridLayout: Example 2
import javax.swing.*;
public class CalcPad extends JFrame {
public CalcPad() {
setLayout(new GridLayout(5,3));
int off[]={-2,2,0};
for (int i=9; i >= 1; i--)
add (new JButton (""+(i+off[i%3])));
add (new JButton ("."));
add (new JButton ("0"));
Program Output:
add (new JButton ("+/-"));
add (new Panel());
}
public static void main (String[] arg){
CalcPad ti = new CalcPad();
ti.setSize(150,150);
ti.show();
} }//CalcPad
 BoxLayout: Motivation
Often, it is desirable to place items in horizontal or vertical direction. A
grid layout may not be the best choice, since grid components are
resized to fit the available space--it’s a distorts its contents.

container

component

Desired look A (3, 1) grid forces

size changes
 BoxLayout Manager
A BoxLayout provides this feature. It resembles a
FlowLayout, but with directional control, and other features.

Horizontal and vertical flow control

 BoxLayout: How?
The BoxLayout has a single constructor:

BoxLayout(Container target, int axis);

The ‘target’ is the container we wish to layout.

The ‘axis’ is a static field:

BoxLayout.X_AXIS;
BoxLayout.Y_AXIS;

JPanel JButtonPanel = new JPanel();

BoxLayout bLayout = new BoxLayout
(JButtonPanel, BoxLayout.X_AXIS);
JButtonPanel.setLayout(bLayout);