Swing

week date Day 1 (Mon/Tues) Day 2 (Tues/Wed) Day 3 (Thurs/Fri)

1 Jan 9 Intro Ariane 5 More Software Disasters
2 Jan 16 Software Quality Requirements Requirements
(assn 1 due Friday)
3 Jan 23 Assignment Discussion Requirements Testing overflow
4 Jan 30 Test Plans Usability Java/UML
(assn 2 due Thursday)

5 Feb 6 Java/UML Swing Swing

6 Feb 13 Swing Swing Swing
7 Feb 27 Swing Midterm Review no class!
(assn 3 due Tuesday) Midterm: Wed. p.m.
8 Mar 6 Design Patterns Design Patterns Design Patterns
9 Mar 13 Software Testing Software Testing Software Testing
10 Mar 20 Software Testing Software Testing Software Process
(assn 4 due Tuesday)
11 Mar 27 Software Process Software Process Guest lecture
12 Apr 3 overflow overflow Overflow
(assn 5 due Thursday)
CISC 323 winter 2006, Swing 1
 New Topic: GUIs
GUI = Graphical User Interface
Up to now: line-by-line programs:
computer displays text
user types text
With a GUI:
computer displays information all over screen
(text, pictures, symbols, etc.)
user enters information by clicking buttons, choosing menu
options, typing text into special boxes, etc.
Advantages of GUIs:
prettier, more fun
more user-friendly

CISC 323 winter 2006, Swing 2

 Why Study GUIs Now?
1. Good OOP practice
2. Useful (CISC 323 & later)
3. Fun / motivating
4. Learn about event-driven programming

CISC 323 winter 2006, Swing 3

 Goals & Readings
This is a big topic – can't learn it all in 2 weeks!
Goals:
• learn the basics
• lay a foundation so you can look up more

Required Reading: chapter in courseware

Optional Extra Readings:
• listed on web, mostly Java Tutorial if you want more
details, extra examples

CISC 323 winter 2006, Swing 4

 Sub-Topics
1. Basics (getting a Frame up & running)
2. Layouts (how to put things into your Frame)
3. Actions (making your components do things)
4. More kinds of components
5. Making your Frame pretty: colors, fonts, icons
6. Changing frames
7. Dialogs

CISC 323 winter 2006, Swing 5

 GUI Libraries
Early GUIs: write your own, huge amount of work
Common style emerged: buttons, text boxes, menus
Libraries to help you write GUI programs

X-Windows for Unix/Linux

Microsoft Foundation Classes (MFC) for Windows
something else for Macs
none portable
AWT = Abstract Windows Toolkit
part of Java API
classes for writing portable GUI programs
easier to use than MFC

CISC 323 winter 2006, Swing 6

 Swing
Extension to AWT: part of Java API in versions 1.2 & later
• some new features
(file & color choosers, fancier graphics features)
• replaced some items with improved versions
• some improvements to existing features
(double buffering)
• most Swing class start with "J":
• JButton
• JFrame
• etc.

Still use parts of AWT that Swing hasn't replaced:

same old layout managers, basic graphics commands

CISC 323 winter 2006, Swing 7

 Tasks in GUI Programming
1. Getting your screen to look the way you want it to.
(laying out components – buttons, text boxes, etc.)
2. Getting the program to do what you want it to.
(functionality)
These tasks are fairly independent.

Common order:
1. get screen looking right, no functionality
2. add functionality

Another possibility:
1. put components on screen, quick & sloppy
2. add functionality, debug
3. improve appearance
CISC 323 winter 2006, Swing 8
 Kinds of Components
Task for Assignment 3: design user interface
What kinds of components can you use?
• buttons
• text fields
• labels
• pop-up windows (JOptionPane & dialogs)
• combo boxes (drop-down list of choices)
• optional: different fonts & colours, icons

CISC 323 winter 2006, Swing 9

 Getting a Window Running
First Swing class to learn: JFrame
A frame is a window
with:
• a border
• a title
• menu bar
(optional)
• minimize,
maximize,
close buttons
• inner area for
contents

CISC 323 winter 2006, Swing 10

 The Basics: Creating a Frame
First practical task: get a window up on your screen
and be able to exit gracefully

"baby" demos
Purpose: show how to get a simple frame onto the screen

Summary:
• convention is to subclass JFrame
• must explicitly make the frame visible
• must set size or get tiny frame
• must specify window-closing behavior

Programs are on the web for your reference

CISC 323 winter 2006, Swing 11

 Next Sub-Topic: Layouts

1. Basics (creating a Frame with one button) 9

2. Layouts (how to put things into your Frame) ←
3. Actions (making your components do things)
4. More kinds of components
5. Making the Frame pretty: colors, fonts, icons
6. Changing frames
7. Dialogs

CISC 323 winter 2006, Swing 12

 Layout Managers
Layout manager decides:
• position of each component in frame
• size of each component
• what changes when window is resized

Programmer's job:
give layout manager some general instructions

CISC 323 winter 2006, Swing 13

 Different Kinds of Layout Managers
We will concentrate on three:
• BorderLayout
• FlowLayout
• GridLayout

Each has different purpose, different layout

algorithms.
Real power comes from combining them -- different
parts of frame.

CISC 323 winter 2006, Swing 14

 Sizes of Components
Every component has a "preferred size"
For buttons and labels, based on the text and the font
Sometimes layout managers "stretch" components

Button at preferred size: Same button, stretched:

CISC 323 winter 2006, Swing 15

 BorderLayout
Default layout manager for frames
Frame has 5 positions:
North, South, East, West, Center
Demo....
Rules:
• max of 1 component in each position
• north & south stretched horizontally to fit frame
• east & west stretched vertically
• center stretched both ways

CISC 323 winter 2006, Swing 16

 GridLayout
Lays out components in a rectangular grid
Demo...
Rules:
• components are stretched to fill frame
• all components are stretched to exactly the same size
• specify number of rows OR number of columns

CISC 323 winter 2006, Swing 17

 FlowLayout
Adds components left to right
Demo....

Rules:
• components always at preferred sizes, never stretched
• breaks into multiple rows if necessary
• can specify alignment

CISC 323 winter 2006, Swing 18

 Combining Layouts

Now we know about 3 kinds of layouts

Each fairly limited by itself
Can sub-divide frame into sections, lay each out individually
(each section called a "panel“)

Java class: JPanel

• a component which is also a Container
• can add other components to a JPanel
• to create:
new JPanel(new GridLayout(2,0));
or:
new JPanel(); // default is FlowLayout
CISC 323 winter 2006, Swing 19
 Panel Example
Suppose we want to put 6 buttons in a frame like this:

on web: SimplePanelDemo.java

CISC 323 winter 2006, Swing 20

 Calculator Example (1)

CISC 323 winter 2006, Swing 21

 Calculator Example (2)
First job: layout 3
Second job: functionality

How to lay out?

1
Identify 3 sections of screen

Section 1: 12 buttons in panel

with 4x3 grid layout
Section 2: 5 buttons in panel
2
5x1 grid
Section 3: text field

Use BorderLayout to lay these sections out on JFrame

CISC 323 winter 2006, Swing 22

 Next Sub-Topic: Actions
1. Basics (creating a frame with one button) 9
2. Layouts (how to put things into your frame) 9
3. Actions (making your components do things) ←
4. More kinds of components
5. Making your frame pretty: colors, fonts, icons
6. Changing frames
7. Dialogs

CISC 323 winter 2006, Swing 23

 Events
GUI programs are "event-driven"
many kinds of events in a GUI program:
• user clicks button
• user types a key
• window is re-sized
• user chooses menu item
• etc.

Programmer chooses which types of events program

will react to and how

CISC 323 winter 2006, Swing 24

 Event-Driven Programming
Normal line-oriented program:
• Program specifies exactly what will happen.
• Knows when input will arrive.
• Makes decision on the basis of the input.

Event-Driven GUI Program:

set things up, then programmer’s responsibility
in infinite loop:
wait for a event Swing’s responsibility
react to the event

CISC 323 winter 2006, Swing 25

 ActionEvent Class
describes a simple event like a button click or menu choice
methods:
getSource(): returns the component that "caused"
the event
(button that was clicked)
getActionCommand(): returns the label from the
component as a String

CISC 323 winter 2006, Swing 26

 Event Handlers
Event Handler = method that reacts to an event.
For every possible event that you care about:
• write an event handler: takes an ActionEvent
object as a parameter
• "register" the handler with a component:
"please call this method when someone clicks this button."

In Java, an event handler is packaged inside an

object called a "listener".

CISC 323 winter 2006, Swing 27

 ActionListener interface
public interface ActionListener {
void actionPerformed(ActionEvent e);
}
This is the event handler method

Program can register an action listener for a button.

Meaning: when button is clicked, call actionPerformed in
this listener

CISC 323 winter 2006, Swing 28

 Sequence of Events
1. User clicks button
2. Does button have action listener?
If no, do nothing.
3. If yes, create an ActionEvent
describing the button click.
4. Call the action listener's
actionPerformed method
with the ActionEvent object
as argument

CISC 323 winter 2006, Swing 29

 Common Trick
Make one class do double-duty: acts as frame and as its own
action listener (contains actionPerformed method)

demo: Add a simple action to a button

CISC 323 winter 2006, Swing 30

 Digression: JOptionPane (1)
Class with useful static methods to provide common kinds of
small "pop-up" windows
JOptionPane.showMessageDialog(parent, "hello, world!");

parent must be a frame

usually use this

pop-up is modal: blocks input to all other windows

CISC 323 winter 2006, Swing 31

 JOptionPane (2)

int result = JOptionPane.showConfirmDialog(parent,

"are you awake?");

result gets one of three values:

YES_OPTION
NO_OPTION
CANCEL_OPTION

CISC 323 winter 2006, Swing 32

 JOptionPane (3)

String name = JOptionPane.showInputDialog(parent,

"what is your name?");

Name gets user input -- or null if user clicks "Cancel"

CISC 323 winter 2006, Swing 33

 JOptionPane (4)

See API documentation for more JOptionPane stuff

• fourth kind of window: select among options
• all have overloaded versions with more parameters
• advice: stick to static methods
Simple demo program for JOptionPane on web site for your
reference

CISC 323 winter 2006, Swing 34

 Sharing an ActionListener
use getActionCommand or getSource to see where event
came from
demo: two buttons with actions

CISC 323 winter 2006, Swing 35

 Next Sub-Topic: More Components
1. Basics (creating a frame with one button) 9
2. Layouts (how to put things into your frame) 9
3. Actions (making your components do things) 9
4. More kinds of components ←
5. Making your frame pretty: colors, fonts, icons
6. Changing frames
7. Dialogs

CISC 323 winter 2006, Swing 36

 Kinds of Components

Required for CISC 323:

JButton
JLabel
JTextField
JComboBox
These are enough for many GUIs
There are many more

CISC 323 winter 2006, Swing 37

 JButton Class
To create:
JButton okButton = new JButton("OK");

Methods:
void setText(String text);
String getText();
void setEnabled(boolean);

Buttons are enabled by default

If not enabled, "greyed out" and user can't click

CISC 323 winter 2006, Swing 38

 Labels
A way of putting text onto a frame
no border, no actions

May be a label for another component

May be a header or informative message

CISC 323 winter 2006, Swing 39

 JLabel Class
To create:
JLabel nameLabel = new JLabel("enter name: ");

Methods:
void setText(String text);
String getText();

CISC 323 winter 2006, Swing 40

 Label Alignment
Text in label is aligned. JLabel has 3 constants for alignment:
LEFT, RIGHT, CENTER

Set in constructor or with setHorizontalAlignment method

Alignment doesn’t matter unless label is stretched horizontally

CISC 323 winter 2006, Swing 41

 Text Components
Two kinds:
• text field (one line)
• text area (multiple lines) (not required for 323)

CISC 323 winter 2006, Swing 42

 JTextField
One line only

to create:
JTextField nameField = new JTextField(10);
or:
JTextField nameField = new JTextField("Fred");
or:
JTextField nameField = new JTextField("Fred", 10);

CISC 323 winter 2006, Swing 43

 JTextField Methods
setText() and getText() like buttons and labels
setEditable(boolean b): if true, user can type in
setHorizontalAlignment like labels

CISC 323 winter 2006, Swing 44

 Putting These Three Together
demo: simple calculator example

CISC 323 winter 2006, Swing 45

 One More Component Type: JComboBox
Used in old CD catalog program.

First, create an array of the choices:

private static final String[] sortingChoices =
{"title","composer","performer"};

Now create the combo box:

sortComboBox = new JComboBox(sortingChoices);

In action listener for the buttons in the dialog:

int indexChosen = sortComboBox.getSelectedIndex();
Gets array index of currently selected item

CISC 323 winter 2006, Swing 46

 Next Sub-Topic: Making a Frame Look
Nice
1. Basics (creating a frame with one button) 9
2. Layouts (how to put things into your frame) 9
3. Actions (making your components do things) 9
4. More kinds of components 9
5. Making your frame pretty: colors, fonts, icons ←
6. Changing frames
7. Dialogs

CISC 323 winter 2006, Swing 47

 Ways to Change Your Frame's Appearance
This material is optional. We won’t test you on it or
require it in assignments.
1. Colours (optional)
2. Fonts (optional)
3. Icons (optional)
4. More fancy graphics: not covered

CISC 323 winter 2006, Swing 48

 Colours
Most components have two colours: background & foreground
Labels have only foreground (background is "transparent")
Frames & panels have only background

yellow background white background

red foreground
blue foreground

frame has gray background (default)

CISC 323 winter 2006, Swing 49

 Color class
Use a Color object to represent a colour.
Easiest way: constants
Color.red
Color.blue
etc. (on summary sheet or look up in API)

For more control, specify red, green and blue components:

new Color(200, 150, 255)
The above makes violet:

Each component from 0 to 255.

CISC 323 winter 2006, Swing 50

 Putting Colours into a Frame
Every component has two methods for setting colours:
setForeground
setBackground
Example:
myButton.setForeground(Color.red);

CISC 323 winter 2006, Swing 51

 Fonts
A font has three components:
name of font:

style (Font.PLAIN, Font.BOLD or Font.ITALIC)

size (in points, as in Word)

In many of our sample programs for demo in class:

button1.setFont(
new Font("Serif", Font.PLAIN, 24));

CISC 323 winter 2006, Swing 52

 Icons
Examples so far: Labels and buttons contain text only
Can put pictures instead of or with text
Icon object represents a picture
Example:
ImageIcon stopIcon =
new ImageIcon("stop.jpg");
stopButton = new JButton(stopIcon);
Image file "stop.jpg" must be in same folder as program.

CISC 323 winter 2006, Swing 53

 Next Sub-Topic: Changing Frames
1. Basics (creating a frame with one button) 9
2. Layouts (how to put things into your frame) 9
3. Actions (making your components do things) 9
4. More kinds of components 9
5. Making your frame pretty: colors, fonts, icons 9
6. Changing frames ←
7. Dialogs

CISC 323 winter 2006, Swing 54

 Changing Contents of Frame Dynamically
So far, frame contents have not changed during program:
• add components to frame at start-up (constructor)
• components don't go away
• no new components added

Often convenient to add/remove components during program.

Program may have different "modes",
or need variable numbers of components

CISC 323 winter 2006, Swing 55

 Reminder: Container Class

contents
JFrame Container

JPanel

CISC 323 winter 2006, Swing 56

 Adding Components To Container
for all but BorderLayout, usual form is:
add(Component comp)
adds to last position in container
another version:
add(Component comp, int index)
adds to a specified position (counting from zero)

CISC 323 winter 2006, Swing 57

 Removing Components From a Container
Container class also has remove methods:
void remove(Component comp)
removes a designated component
void remove(int index)
removes a component by index
(counting from zero)

CISC 323 winter 2006, Swing 58

 Example Program: Area Calculator
User enters dimensions of shape
Program computes & displays the area
Prompts & fields depend on type of shape

demo....

CISC 323 winter 2006, Swing 59

 Two Modes
Program can operate in two modes
Contents of frame is different for each mode

User switches modes by changing the combo box.

CISC 323 winter 2006, Swing 60

 Changing Modes
Initial mode is circle.
Constructor creates all rows.
Only adds the three rows for circle mode to frame.

When user selects rectangle mode, event handler:

• removes radius row
• adds width and height rows

When user selects circle mode again, event handler:

• removes width and height rows
• adds radius row

CISC 323 winter 2006, Swing 61

 More Lessons From This Program
• When contents of frame changes, needs to be re-packed.
• This program must read and write numbers to/from text
fields (we’ve already seen an example of this)
• This program must write a floating-point number to a text
field; it may be too long for the field.

CISC 323 winter 2006, Swing 62

 Putting Numbers Into Text Fields
First draft of program:

Problem: Area is too big to fit into text field.

Solution: round it to a limited number of decimals.

CISC 323 winter 2006, Swing 63

 DecimalFormat Class
A DecimalFormat object contains a format method to
transform a number into a String

To create a DecimalFormat object, give it a pattern –

instructions on how to format numbers
General pattern rules are complicated.

Simple pattern to round a number: "0.0##"

one or more digits before the decimal point
one to three digits after the decimal point

To use scientific notation instead: "0.0##E0"

CISC 323 winter 2006, Swing 64

 Next Sub-Topic: Multi-Window Programs
(Dialogs)
1. Basics (creating a frame with one button) 9
2. Layouts (how to put things into your frame) 9
3. Actions (making your components do things) 9
4. More kinds of components (labels & text 9
components)
5. Making your frame pretty: colors, fonts, icons 9
6. Changing frames 9
7. Dialogs ←
CISC 323 winter 2006, Swing 65
 Multiple-Window Programs
So far, GUIs with one window
Complicated problem: may want to separate into several
windows
One way to organize:
• one "main" window
• can pop up "dialogs" for particular purposes
• display a message (JOptionPane)
• input simple value (JOptionPane)
• custom dialog (subclass of JDialog)

CISC 323 winter 2006, Swing 66

 Custom Dialogs: using the JDialog Class
A JDialog is almost exactly the same as a JFrame.
• same methods
• has a "content pane", can add components

Differences from a JFrame:

• has an owner (a frame or another dialog)
• may be modal

Constructor:
new JDialog(JFrame owner, boolean modal)

or JDialog

CISC 323 winter 2006, Swing 67

 Modal Dialogs
When a modal dialog pops up the "parent" is frozen.
Can't do anything until you deal with the dialog.
Most windows programs use modal dialogs

Parent is suspended only while dialog is visible.

Usual pattern:
• Create custom dialogs during program set-up, all
invisible.
• Make visible when you need them.
• Faster than creating each time you need.

CISC 323 winter 2006, Swing 68

 Example
Demo program uses custom dialog to input information about
people (name, address. phone number, age)

CISC 323 winter 2006, Swing 69

 Person Class
// Simple class to group info about a person
public class Person {
private String name;
private String address;
private String phone;
private int age;

public Person(String name, String address,

String phone, int age) {
this.name = name;
this.address = address;
this.phone = phone;
this.age = age;
} // end constructor

CISC 323 winter 2006, Swing 70

 Person Class (2)
public String getName() {return name;}
public String getAddress() {return address;}
public String getPhone() {return phone;}
public int getAge() {return age;}

// Creates a multi-line String describing the

// person
public String toString() {
return "name: " + name + "\n"
+ "address: " + address + "\n"
+ "phone number: " + phone + "\n"
+ "age: " + age;
} // end toString

} // end class Person

CISC 323 winter 2006, Swing 71

 PersonDialog
public class PersonDialog extends JDialog
implements ActionListener {

// Person object from data entered by the user

private Person thePerson;
public Person getPerson() {return thePerson;}

private JTextField nameField, addressField,

phoneField, ageField;

CISC 323 winter 2006, Swing 72

 PersonDialog (2)
public PersonDialog(JFrame parentFrame) {
// call JDialog constructor, make dialog modal
super(parentFrame, true);

Container contents = getContentPane();

contents.setLayout(new GridLayout(0,1));

// lay out components – just as in a JFrame

setDefaultCloseOperation(DO_NOTHING_ON_CLOSE);
pack();
// Note: no call to setVisible
} // end constructor

CISC 323 winter 2006, Swing 73

 PersonDialog (3)
public void actionPerformed(ActionEvent e) {
if (e.getActionCommand().equals("ok")) {
String name = nameField.getText();
String address = addressField.getText();
String phone = phoneField.getText();
String ageText = ageField.getText();
int age;

try {
age = Integer.parseInt(ageText.trim());
}
catch (NumberFormatException ex) {
JOptionPane.showMessageDialog(this,
"error: \"" + ageText +
"\" is not an integer");
return; // don't continue with actionPerformed
} // end try/catch
CISC 323 winter 2006, Swing 74
 PersonDialog (4)
if (age < 0 || age > 150) {
JOptionPane.showMessageDialog(this,
"error: age must be between 0 and 150");
return;
} // end if

// Create an object out of the data entered.

// Save it in instance variable so parent can
// as for it later.
thePerson = new Person(name, address, phone, age);

// Make dialog disappear and return control to

// its parent
setVisible(false);
}

CISC 323 winter 2006, Swing 75

 PersonDialog (5)
else if (e.getActionCommand().equals("cancel")) {
thePerson = null;
setVisible(false);
}

else {
JOptionPane.showMessageDialog(this,
"internal error: unknown button");
} // end if

} // end actionPerformed

CISC 323 winter 2006, Swing 76

 Main Frame: DialogDemo
public class DialogDemo extends JFrame
implements ActionListener {

private PersonDialog personDialog =

new PersonDialog(this);

private Vector people = new Vector();

private JButton enterButton, searchNameButton,

searchAgeButton, quitButton;

CISC 323 winter 2006, Swing 77

 DialogDemo (2)
public DialogDemo() {
// Does the usual constructor stuff.
// Creates buttons and adds to frame.
// Registers frame as listener for the buttons
....
} // end constructor

CISC 323 winter 2006, Swing 78

 DialogDemo (3)
public void actionPerformed(ActionEvent e) {
// use getSource to identify the button
Object source = e.getSource();
if (source == enterButton) {
personDialog.setVisible(true);
// no return from above until dialog is finished

// Retrieve the person that the user entered

Person newPerson = personDialog.getPerson();
// Add the new person to our list unless
// use cancelled
if (newPerson != null)
people.add(newPerson);
}

CISC 323 winter 2006, Swing 79

 DialogDemo (4)
else if (source == searchNameButton)
{
....
else if (source == searchAgeButton) {
}....
}

else if (source == quitButton)

System.exit(0);
else
JOptionPane.showMessageDialog(this,
"internal error: unknown button");
} // end actionPerformed

CISC 323 winter 2006, Swing 80

 One More Thing
Using PersonDialog a second time: Old input will still be in
the boxes. Do we want this?
Sometimes it's a good thing – if user will be entering a lot of
similar data.
This case, maybe not.
Prevent by adding actions to happen every time dialog becomes
visible.
demo...

CISC 323 winter 2006, Swing 81