1 / 67
1
COP 3503 FALL 2012
SHAYAN JAVED
LECTURE 14
Programming Fundamentals using Java
2 / 67
Graphical-User
Interfaces
(GUIs)
3 / 67
So far...

Only created text-based programs

No fancy graphics (buttons! menus! text-fields!)
4 / 67
Graphical-User Interfaces (GUI)

Going to look at how to create GUIs in Java
5 / 67
Graphical-User Interfaces (GUI)

Going to look at how to create GUIs in Java

Use the SWING API (for desktop-programs)
6 / 67
Graphical-User Interfaces (GUI)

Going to look at how to create GUIs in Java

Use the SWING API (for desktop-programs)

Use the AWT API (for Java Applets – on the web)
7 / 67
The SWING API

Used to create desktop applications.
8 / 67
The SWING API

Used to create desktop applications.

Uses the Model-View-Controller software
engineering design pattern.
9 / 67
Model-View-Controller design

Model:
 Manages
the behavior and data of the application.
 Changes state.
10 / 67
Model-View-Controller design

Model:
 Manages
the behavior and data of the application.
 Changes state.

View:
 Renders
the model into a form for interaction.
(Button, textbox, checkbox, etc.)
11 / 67
Model-View-Controller design

Model:
 Manages
the behavior and data of the application.
 Changes state.

View:
 Renders
the model into a form for interaction.
(Button, textbox, checkbox, etc.)

Controller:
 Receives
user input and initiates a response by
interacting with the model.
12 / 67
The SWING API

Example:
Scrabble
13 / 67
The GUI API

Use the NetBeans IDE for easy drag-and-drop
creation.
14 / 67
The GUI API

Use the NetBeans IDE for easy drag-and-drop
creation.

But we are going to focus on basic code
15 / 67
The GUI API

3 Groups of classes:

Component Classes:
 Buttons,
Labels, TextFields, etc.
16 / 67
The GUI API

3 Groups of classes:

Component Classes:
 Buttons,

Labels, TextFields, etc.
Container Classes:
 Frames,
Panels, Applets, etc.
17 / 67
The GUI API

3 Groups of classes:

Component Classes:
 Buttons,

Container Classes:
 Frames,

Labels, TextFields, etc.
Panels, Applets, etc.
Helper Classes:
 Graphics,
Color, Font, etc.
18 / 67
The SWING API

Simple Window

Represented by the JFrame class
19 / 67
The SWING API
import javax.swing.JFrame;
public static void main(String[] args) {
JFrame frame = new JFrame(“A Title”);
frame.setSize(400, 300);
frame.setLocation(10, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
20 / 67
The SWING API – add components
import javax.swing.*;
public static void main(String[] args) {
JFrame frame = new JFrame(“A Title”);
JButton button = new JButton(“OK”);
frame.add(button);
frame.setSize(400, 300);
...
}
21 / 67
The SWING API – add components

A JFrame containts a content pane.
22 / 67
The SWING API – add components

A JFrame containts a content pane.

Content pane = instance of java.awt.Container;
23 / 67
The SWING API – add components

A JFrame containts a content pane.

Content pane = instance of java.awt.Container;

Objects are added to it
 frame.add(
Component )
24 / 67
The SWING API – add components

A JFrame containts a content pane.

Content pane = instance of java.awt.Container;

Objects are added to it
 frame.add(
Component )
 frame.remove( Component )
25 / 67
Layout Managers

Components in content pane are laid out by layout
managers.
26 / 67
Layout Managers

Components in content pane are laid out by layout
managers.

Multiple types:
 FlowLayout
 GridLayout
 BorderLayout
27 / 67
Layout Managers - FlowLayout

Components arranged left to right in order.

One row fills up, a new row is started
28 / 67
Layout Managers - FlowLayout

java.awt.FlowLayout

Properties:
 alignment:
int (CENTER/LEFT/RIGHT/etc.)
 hgap, vgap: int (the gaps – default: 5 pixels)
29 / 67
Layout Managers - FlowLayout

java.awt.FlowLayout

Properties:
 alignment:
int (CENTER/LEFT/RIGHT/etc.)
 hgap, vgap: int (the gaps – default: 5 pixels)

Constructors:
 FlowLayout()
 FlowLayout(alignment,
hgap, vgap)
30 / 67
Layout Managers - FlowLayout
public class ShowFlowLayout extends JFrame {
public ShowFlowLayout() {
// set the flow layout
setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20);
add(new JButton(“Button”));
add(new JTextField(8));
}
}
31 / 67
Layout Managers - GridLayout


Arrange components in a grid (matrix) formation.
Placed left-to-right.
32 / 67
Layout Managers - GridLayout

Arrange components in a grid (matrix) formation.
Placed left-to-right.

Properties:

 rows,
columns: int
 hgap, vgap: int (the gaps – default: 5 pixels)
33 / 67
Layout Managers - GridLayout
public class ShowGridLayout extends JFrame {
public ShowGridLayout() {
// set the Grid layout – 3 rows, 2 columns
setLayout(new GridLayout(3, 2, 10, 10);
add(new JButton(“Button”));
add(new JTextField(8));
}
}
34 / 67
Layout Managers - BorderLayout

Default Layout for ContentPanes (Jframe)

Divides container into 5 areas:
 East,
West, South, North, Center
 Components are added into one of these areas

Properties:
 hgap,
vgap: int (the gaps – default: 5 pixels)
35 / 67
Layout Managers - BorderLayout
public class ShowBorderLayout extends JFrame {
public ShowBorderLayout() {
// set the Border Layout
setLayout(new BorderLayout(10, 10);
add(new JButton(“Button”), BorderLayout.EAST);
add(new JTextField(8), BorderLayout.WEST);
}
}
36 / 67
The SWING API

Looked at adding Components to the Window
(Frame).

And how to lay them out.
37 / 67
The SWING API

Looked at adding Components to the Window
(Frame).

And how to lay them out.

But often need “sub-windows” to create more
complex interfaces.
38 / 67
Using JPanels as Subcontainers

Panels are subcontainers.
39 / 67
Using JPanels as Subcontainers

Panels are subcontainers.

Can add components to them
40 / 67
Using JPanels as Subcontainers

Panels are subcontainers.

Can add components to them

Also set layouts (default: FlowLayout)
41 / 67
Using JPanels as Subcontainers

Panels are subcontainers.

Can add components to them

Also set layouts (default: FlowLayout)
JPanel panel = new JPanel();
panel.add(new JButton(“OK”));
42 / 67
Using JPanels
// set the Border Layout of the JFrame
setLayout(new BorderLayout(10, 10);
// add a Panel to the West and East
JPanel p1 = new JPanel();
add(p1, BorderLayout.WEST);
JPanel p2 = new JPanel(); p2.setLayout(new GridLayout(2, 2, 5, 5));
add(p2, BorderLayout.EAST);
// add components to the east panel
p2.add(new JTextField(8)); p2.add(new JButton(“Button1”));
p2.add(new JTextField(8)); p2.add(new JButton(“Button2”));
// one button to the west panel
p1.add(new JButton(“Button3”));
43 / 67
Adding Components

Need to add components for interaction.
44 / 67
Adding Components

Need to add components for interaction.

Some useful ones:
 JButton
 JTextField
 JCheckBox
 JComboBox
 JMenuBar
 etc...
45 / 67
Model-View-Controller design

Model: (ALREADY IMPLEMENTED)
 Manages
the behavior and data of the application.
 Changes state.

View: DONE
 Renders
the model into a form for interaction.
(Button, textbox, checkbox, etc.)

Controller:
 Receives
user input and initiates a response by
interacting with the model.
46 / 67
Interaction and Events

Need to handle events from various GUI
components.
47 / 67
Interaction and Events

Need to handle events from various GUI
components.

Button clicks, text field changes, menu selection,
etc.
48 / 67
Interaction and Events

Need to handle events from various GUI
components.

Button clicks, text field changes, menu selection,
etc.

Event-driven programming
49 / 67
Interaction and Events

Components generate different kinds of Events
50 / 67
Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent,
MouseEvent, KeyEvent
51 / 67
Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent,
MouseEvent, KeyEvent

Example: JButton generates ActionEvent
52 / 67
Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent,
MouseEvent, KeyEvent

Example: JButton generates ActionEvent
Mouse pressed/moved/dragged: MouseEvent

53 / 67
Interaction and Events

Components generate different kinds of Events

ActionEvent, ItemEvent, ChangeEvent,
MouseEvent, KeyEvent

Example: JButton generates ActionEvent
Mouse pressed/moved/dragged: MouseEvent
JCheckBox: ItemEvent, ActionEvent


54 / 67
Interaction and Events

Need to “listen” for Events.

Source object fires an event, and an object
interested in the event handles it.
 Latter
object called a “listener”
55 / 67
Interaction and Events

For an object to be a listener, it needs to
implement an interface.
56 / 67
Interaction and Events

For an object to be a listener, it needs to
implement an interface.

Interface should correspond to the Event.
 ActionListener for
ActionEvent
 MouseListener for MouseEvent
 KeyListener for KeyEvent
57 / 67
Interaction and Events

For an object to be a listener, it needs to
implement an interface.

Interface should correspond to the Event.
 ActionListener for
ActionEvent
 MouseListener for MouseEvent
 KeyListener for KeyEvent
object.addXListener(...)
58 / 67
ActionListener interface
class AClass implements ActionListener {
public void actionPerformed(ActionEvent e) {
// do whatever you want
}
}
59 / 67
ActionListener interface
class AClass implements ActionListener {
public void actionPerformed(ActionEvent e) {
// do whatever you want
}
}
JButton button = new JButton(“OK”);
button.addActionListener(new AClass());
60 / 67
ActionListener interface

ActionEvent methods:
61 / 67
ActionListener interface


ActionEvent methods:
Object getSource(): returns the object on which
the Event initially occurred.
(in java.util.EventObject)
62 / 67
ActionListener interface



ActionEvent methods:
Object getSource(): returns the object on which
the Event initially occurred.
(in java.util.EventObject)
String getActionCommand():
returns the command string
(text of the button for ex.)
63 / 67
ItemListener interface
Used for check boxes, toggle buttons, etc.
class AClass implements ItemListener {
public void itemStatechanged(ItemEvent e) {
// do whatever you want
}
}
64 / 67
ItemListener interface

ItemEvent methods:

Object getItem(): Component-specific object.

int getStateChange(): The new state of the
associated object.
65 / 67
Interaction and Events

Look at some other useful Events:

MouseEvent
KeyEvent
WindowEvent


66 / 67
Interaction and Events

Look at some other useful Events:


MouseEvent
KeyEvent
WindowEvent

Experiment!

67 / 67
Summary





Windows and Panels
Layouts
Add Components
Add Listeners
Handle Events