Problem Solving with Data
Structures using Java:
A Multimedia Approach
Chapter 13:
User Interface Structures
Chapter Objectives
Story





Building a Graphical User Interface in Java
•
Adding pieces to a JFrame
• Buttons, panels, etc.
Constructing a GUI is building a tree
Layout managers
•
Layout managers are GUI tree renderers
Making out GUIs do something
•
Listeners
Building a tool for picture manipulations
Old style Java:
Abstract Window Toolkit - AWT

Original Graphical User Interface (GUI) Classes
•
•
Container Objects
•
•
•
Frame - Main window with title and border.
Panel - groups components
Canvas - create custom components
Input and Output Classes
•
•
•
•
•
•
Label - not editable text
Button - pushing fires an event
•
Checkboxes and Radio Buttons
TextField - input and output of text
TextArea - input and output of multiple lines of text
List - Select one or more items from a displayed list
Choice - Select one from a drop down list
From AWT to Swing

AWT had many problems.
• Users didn’t like the “look” of AWT user
•

interfaces.
Programmers had a hard time using AWT.
Sun released a new user interface toolkit
called Swing.
• Easier for developers.
• More flexible to make a look that users will
like.
Basic components of Swing


A main window is called a JFrame.
A group of components (e.g., a set of
radio buttons) is collected in a JPanel,
then placed in a JFrame.
Swing - javax.swing


Replacements for most AWT components
•
New GUI components in Swing
•
•
•

JButton – was Button (images and text)
For Viewing Trees - JTree
For showing two things at once:
Split Pane - JSplitPane
Table - JTable
Supports multiple look-and-feel themes
•
Java (also called metal), Windows, Mac, Motif
Swing Top-Level Containers

JFrame - main window with title, maybe a menu bar,
and the ability to minimize, maximize, and close the
window

JApplet - main window for an applet. Inherits from
java.applet.Applet

JDialog – pop-up window for simple communication
with the user
• Like the JFileChooser
Swing General Containers

JPanel - group components

JScrollPane - add scroll bars to a component

JSplitPane - display two separate panes
Working with a JFrame

Pass the title when you create it
JFrame frame = new JFrame("FrameDemo");

Add components to the content pane
JLabel label = new JLabel("Hello World");
frame.getContentPane().add(label, BorderLayout.CENTER);

Set the size of the JFrame
frame.pack(); // as big as needs to be to display contents

Display the JFrame
frame.setVisible(true); // display the frame
JFrame Options

When creating a GUI application
•
Have your main class inherit from JFrame
•
Or have your main class inherit from JPanel
• So the new class is a JFrame
• And create a JFrame in the main() method:
•
•

Create the main class object
Add the main class object to the content pane of the
JFrame
If your class inherits from JPanel
•
It can be reused in another application
• Even an applet
GUITree
Class
import javax.swing.*; // Need this to reach Swing components
/**
* A GUI that has various components in it, to demonstrate
* UI components and layout managers (rendering)
*/
public class GUItree extends JFrame {
/**
* Constructor that takes no arguments
*/
public GUItree() {
/* create the JFrame with the title */
super("GUI Tree Example");
/* Put in a panel with a label in it */
JPanel panel1 = new JPanel();
this.getContentPane().add(panel1);
JLabel label = new JLabel("This is panel 1!");
panel1.add(label);
//NOTICE THAT THIS IS COMMENTED OUT!
// Put in another panel with two buttons in it
JPanel panel2 = new JPanel();
this.getContentPane().add(panel2);
JButton button1 = new JButton("Make a sound");
panel2.add(button1);
JButton button2 = new JButton("Make a picture");
panel2.add(button2);
//
/* set the size to fit the contents and show it */
this.pack();
this.setVisible(true);
Rest of
GUITree
}
/** test this class */
public static void main(String[] args){
GUItree gt = new GUItree();
}
}
Whole
GUITree
public GUItree(){
super("GUI Tree Example");
/* Put in a panel with a label in it */
JPanel panel1 = new JPanel();
this.getContentPane().add(panel1);
JLabel label = new JLabel("This is panel 1!");
panel1.add(label);
/* Put in another panel with two buttons in it */
JPanel panel2 = new JPanel();
this.getContentPane().add(panel2);
JButton button1 = new JButton("Make a
sound");
panel2.add(button1);
JButton button2 = new JButton("Make a
picture");
panel2.add(button2);
this.pack();
this.setVisible(true);
}
Where did panel1 go?


Why can we see it in the original one
(left), but not with panel2 (right)?
It’s there, but the current rendering is
smashing it all together.
GUItree is a tree
JFrame
JPanel
JLabel “This is panel1!”
JPanel
JButton “Make
a sound”
All the components are there. Which are visible
depends on how the components are placed in the
window display – that is, how they are rendered.
JButton
“Make a
picture”
Layout Managers are renderers

We can specify exactly where things go.
•
setLayout(null) - the programmer must give all
components a size and position
• setBounds(topLeftX,topLeftY,width,height);

Better: Use a Layout Manager!
• Arranges the components in a container and sets their
•
•
size
Handles resizing components when the main window is
resized
The programmer just adds the components to the
container
Layouts - Flow, Border, Grid

Flow Layout - left to right, no extra space

Border Layout - Center item gets extra space

Grid Layout - same size components
Flowed
GUITree
/**
* A GUI that has various components in it, to demonstrate
* UI components and layout managers (rendering)
**/
import javax.swing.*; // Need this to reach Swing components
import java.awt.*; // Need this to reach FlowLayout
public class GUItreeFlowed extends JFrame {
public GUItreeFlowed(){
super("GUI Tree Flowed Example");
this.getContentPane().setLayout(new FlowLayout());
/* Put in a panel with a label in it */
JPanel panel1 = new JPanel();
this.getContentPane().add(panel1);
JLabel label = new JLabel("This is panel 1!");
panel1.add(label);
> GUItreeFlowed gtf
= new
GUItreeFlowed();
/* Put in another panel with two buttons in it */
JPanel panel2 = new JPanel();
this.getContentPane().add(panel2);
JButton button1 = new JButton("Make a sound");
panel2.add(button1);
JButton button2 = new JButton("Make a picture");
panel2.add(button2);
this.pack();
this.setVisible(true);
}
Automatically reflows when
resized
Made bigger
Bordered
GUItree
/**
* A GUI that has various components in it, to demonstrate
* UI components and layout managers (rendering)
**/
import javax.swing.*; // Need this to reach Swing components
import java.awt.*; // Need this to reach BorderLayout
public class GUItreeBordered extends JFrame {
public GUItreeBordered(){
super("GUI Tree Bordered Example");
this.getContentPane().setLayout(new BorderLayout());
/* Put in a panel with a label in it */
JPanel panel1 = new JPanel();
this.getContentPane().add(panel1,BorderLayout.NORTH);
JLabel label = new JLabel("This is panel 1!");
panel1.add(label);
> GUItreeBordered gtb =
new GUItreeBordered();
/* Put in another panel with two buttons in it */
JPanel panel2 = new JPanel();
this.getContentPane().add(panel2,BorderLayout.SOUTH);
JButton button1 = new JButton("Make a sound");
panel2.add(button1);
JButton button2 = new JButton("Make a picture");
panel2.add(button2);
this.pack();
this.setVisible(true);
}
}
Resizing now follows borders
Made bigger
Other Layouts - None, GridBag,
Card

None (null) - programmer specified

GridBag - flexible grid

Card - one card shown at a time
BoxLayout


Two types
•
•
Can use rigidAreas to leave a set amount of
space between components
•

Horizontal - BoxLayout.X_AXIS
Vertical - BoxLayout.Y_AXIS
Box.createRigidArea(new Dimension(0,5)));
Can use horizontal and/or vertical glue to take
up extra space
•
Box.createHorizontalGlue());
Boxed
GUItree
/**
* A GUI that has various components in it, to demonstrate
* UI components and layout managers (rendering)
**/
import javax.swing.*; // Need this to reach Swing components
public class GUItreeBoxed extends JFrame {
public GUItreeBoxed(){
super("GUI Tree Boxed Example");
this.getContentPane().setLayout(new
BoxLayout(this.getContentPane(),
BoxLayout.Y_AXIS));
/* Put in a panel with a label in it */
JPanel panel1 = new JPanel();
this.getContentPane().add(panel1);
JLabel label = new JLabel("This is panel 1!");
panel1.add(label);
BoxLayout is
weird—it takes the
paneas an input,
and whether you
want vertical or
horizontal (Y or
X_AXIS) “boxing”
/* Put in another panel with two buttons in it */
JPanel panel2 = new JPanel();
this.getContentPane().add(panel2);
JButton button1 = new JButton("Make a sound");
panel2.add(button1);
JButton button2 = new JButton("Make a picture");
panel2.add(button2);
this.pack();
this.setVisible(true);
}
}
Differs in resizing behavior:
It’s all in boxes (not borders)
Which Layout to Use?




An applet or application can have multiple panels
(JPanel) and have a different layout in each panel.
• Panels can be inside of other panels.
If you want components to not use extra space and
stay centered then use FlowLayout()
Or use BorderLayout and put one component that
uses all extra space in the center.
Use a Box and line up components vertically or
horizontally
A Calvacade of Swing
Components



Next few slides show you some of the
many user interface components in
Swing.
You don’t have to know all of these!
• They’re here for your benefit.
• These are not in the textbook.
Wait a few slides, and we’ll go through
how to use basic buttons and text.
Swing JScrollPane

JScrollPane - adds scroll bars to component
textArea = new JTextArea(5, 30);
JScrollPane scrollPane = new JScrollPane(textArea);
contentPane.add(scrollPane, BorderLayout.CENTER);
Swing Special Purpose
Containers

JTabbedPane - display contents of current tab

JToolBar - groups buttons with icons

JOptionPane - display dialog box

JInternalFrame - inside frames
Swing Text Components

JLabel - not editable text and/or image
JLabel firstNameLabel = new JLabel(“Label 5”,dukeIcon);

JTextField - one line text entry and/or display
JTextField nameField = new JTextField(40);
String name = nameField.getText();

JPasswordField - hides typed characters
JPasswordField passField = new JPasswordField(8);
String password = passField.getPassword();

JTextArea - multi-line text entry and/or display
JTextArea commentArea = new JTextArea(2,30);
String comment = commentArea.getText();
commentArea.setText(comment);
Swing List Components

JList - displays a list of items and user may
select one or more
Color colors[] = {“Black”, “Blue”, “Green};
JList colorList = new JList(colors);
colorList.setVisibleRowCount(2);
String color = colorList.getSelectedValue();

JComboBox - drop down list with selected
displayed, can set up for text entry too
JComboBox colorBox = new JComboBox(colorList);
String currColor = colorBox.getSelectedItem();
Swing Slider and Progress Bar

JSlider - show a value in a range or pick a value
from a continuous range
s = new JSlider(100, 1000, 400);
s.setPaintTicks(true);
s.setMajorTickSpacing(100);
s.getValue(); // get the current value from a slider

JProgressBar - used to show how long a user
needs to wait yet.
progressBar = new JProgressBar(JProgressBar.HORIZONTAL,
0, text.length());
Color Chooser

JColorChooser - use to pick a color
• Use the static method showDialog and pass it
the parent component, title, and current color
Color newColor = JColorChooser.showDialog(
parentComponent,title,selColor);
• Example
Color newColor = JColorChooser.showDialog(
this, “Pick a new background
color”,this.getBackground());
File Chooser

JFileChooser - use to pick a file
// create the file chooser
final JFileChooser fc = new JFileChooser();
// display the chooser as a dialog and get the return value
int returnVal = fc.showOpenDialog(frame);
// if the return value shows that the user selected a file
if (returnVal == JFileChooser.APPROVE_OPTION) {
File file = fc.getSelectedFile();
}
Key to Interactive User
Interfaces: Events


An event is an object that represents an action:
•
•
•
user clicks the mouse
user presses a key on the keyboard
user closes a window
In Swing, objects add or implement listeners
for events.
•
•
Listeners are interfaces.
Interfaces are not classes: They define functionality
that other classes implement.
• It’s a contract that certain functionality will be provided.
Events and Listeners


Say you want to know
when your favorite band
will be giving a tour in your
city
You might sign-up to be
notified and give your email address
•

Your name and e-mail is
added to a list
When the event is
scheduled in your city
•
You will be notified via email that the tour is coming
Events and Listeners
Event
Listener
Example
ActionEvent
ActionListener
Button Pushed
AdjustmentEvent
AdjustmentListener
Move a scrollbar
FocusEvent
FocusListener
Tab into a textarea
ItemEvent
ItemListener
Checkbox checked
KeyEvent
KeyListener
MouseEvent
MouseListener
Keystroke occurred in a
component
Mouse button click
MouseEvent
MouseMotionListener
Mouse moves or drags
TextEvent
TextListener
WindowEvent
WindowListener
A text’s component text
changed
Window was closed
Adapters

Swing provides abstract classes (adapters)
that agree to implement some implementors.
•
Define methods you need for that listener, but don’t do
anything
• You can inherit from an adapter and only override the
methods you want to handle.
class MyMouseAdapter extends MouseAdapter
{
/** Method to handle the click of a mouse */
public void mouseClicked(MouseEvent e)
{…}
}
Anonymous Inner Classes

You can create a new listener in place with an
Looks like
anonymous inner class
b.addFocusListener(new FocusListener () {
public void focusGained (FocusEvent evt) {
…
}
public void focusLost(FocusEvent evt) {
…
}
});
you’re
creating a new
instance.
Defining
methods on the
unnamed,
anonymous
new class.
Interactive
GUItree: Starting out
/**
* A GUI that has various components in it, to demonstrate
* UI components and layout managers (rendering).
* Now with Interactivity!
**/
import javax.swing.*; // Need this to reach Swing components
import java.awt.*; // Need this to reach FlowLayout
import java.awt.event.*; // Need this for listeners and events
public class GUItreeInteractive extends JFrame {
public GUItreeInteractive(){
super("GUI Tree Interactive Example");
this.getContentPane().setLayout(new FlowLayout());
/* Put in a panel with a label in it */
JPanel panel1 = new JPanel();
this.getContentPane().add(panel1);
JLabel label = new JLabel("This is panel 1!");
panel1.add(label);
Interactive GUItree: First button
/* Put in another panel with two buttons in it */
JPanel panel2 = new JPanel();
this.getContentPane().add(panel2);
JButton button1 = new JButton("Make a sound");
button1.addActionListener(
new ActionListener() { // Here's the listener
// Here's the method we're overriding
public void actionPerformed(ActionEvent fred) {
Sound s = new Sound(FileChooser.getMediaPath("warble-h.wav"));
s.play();
}
}
);
panel2.add(button1);
Interactive GUItree:
Second button
JButton button2 = new JButton("Make a picture");
button2.addActionListener(
new ActionListener() { // Here's the listener
// Here's the method we're overriding
public void actionPerformed(ActionEvent mabel) {
Picture p = new Picture(FileChooser.getMediaPath("shops.jpg"));
p.show();
}
}
);
panel2.add(button2);
An inner class can access
this.pack();
this.setVisible(true);
}
}
instance variables of the
outer class, but not local
variables of the method
(unless they’re final).
Example: A Picture Tool


Negate and flip
picture with GUI.
Use a stack of
pictures to support
undo.
PictureTool
import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
import java.util.Stack;
/**
* Class that demonstrates creating a graphical
* user interface to work with pictures
* @author Barb Ericson
*/
public class PictureTool extends JFrame {
/** picture for the label */
Picture picture = new Picture(300,300);
/** picture label */
JLabel pictureLabel = null;
/** stack to hold old pictures for undo */
Stack<Picture> pictureStack = new
Stack<Picture>();
Constructor
/**
* Constructor that sets up the GUI
*/
public PictureTool() {
// set title on JFrame
super("Picture Tool");
// set up the menu
setUpMenu();
We will use a
JLabel instance to
display our picture.
// set the picture in the label
pictureLabel = new JLabel();
setPicture(picture);
this.getContentPane().add(
pictureLabel,BorderLayout.CENTER);
// set the frame size and show it
this.pack();
this.setVisible(true);
}
Creating
a menu
Private method
because only our
class uses this: To
set up the menus.
This part creates
the pieces. Then
we tell the items
what to do.
/**
* Method to set up the menu
*/
private void setUpMenu() {
// set up the menu bar
JMenuBar menuBar = new JMenuBar();
setJMenuBar(menuBar);
// create the file menu
JMenu fileMenu = new JMenu("File");
menuBar.add(fileMenu);
JMenuItem openItem = new JMenuItem("Open");
JMenuItem saveItem = new JMenuItem("Save");
JMenuItem saveAsItem = new
JMenuItem("Save As");
fileMenu.add(openItem);
fileMenu.add(saveItem);
fileMenu.add(saveAsItem);
Opening a picture file
// handle the open
openItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
addPictureToStack();
String file = FileChooser.pickAFile();
setPicture(new Picture(file));
}
We add current
});
picture to stack, then
do pickAFile and set
the new picture
Saving a picture
// handle the save
saveItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
String file = picture.getFileName();
picture.write(file);
}
});
SaveAs
// handle the save as
saveAsItem.addActionListener(new
ActionListener() {
public void actionPerformed(ActionEvent e) {
String file = SimpleInput.getString
("Enter filename");
picture.write(FileChooser.getMediaPath(file));
}
});
Creating Tools Menu
// create the tools menu
JMenu toolsMenu = new JMenu("Tools");
menuBar.add(toolsMenu);
JMenuItem negateItem = new JMenuItem("Negate");
JMenuItem flipItem = new JMenuItem("Flip");
JMenuItem undoItem = new JMenuItem("Undo");
toolsMenu.add(negateItem);
toolsMenu.add(flipItem);
toolsMenu.add(undoItem);
Negate tool
// handle negate
negateItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
addPictureToStack();
picture.negate();
Each tool saves the
current picture on a
setPicture(picture);
stack (for future undo’s),
}
applys the tool method,
then updates the picture
});
JLabel display.
Flip tool
// handle flip
flipItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
addPictureToStack();
Picture flippedPict = picture.flip();
setPicture(flippedPict);
}
});
What if we need to undo?
// handle undo
undoItem.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
if (!pictureStack.empty()) {
Picture pict = pictureStack.pop();
setPicture(pict);
}
If stack isn’t empty, pop the first one
}
and reset the picture to that.
});
}
Pushing a copy of the picture
on the stack
/**
* Method to save the current picture on the stack
*/
private void addPictureToStack() {
pictureStack.push(picture.copy());
}
Displaying the current picture
/**
* Method to set the picture to a new picture
* @param p the new picture to use
*/
public void setPicture(Picture p) {
picture = p;
pictureLabel.setIcon(new ImageIcon(p.getImage()));
this.pack(); // resize for the new picture
JLabel doesn’t actually
}
show pictures – but it can
show Icons, and we can
convert a picture to an icon.
Main method
/**
* Main method for testing
*/
public static void main(String[] args) {
PictureTool pictTool = new PictureTool();
if (args.length > 0) {
pictTool.setPicture(new Picture(args[0]));
}
}
We check to see if the tool was
started from a command line,
}
with a picture filename as an
opening argument.
Getting arguments from
CommandLine
Trying arguments
in DrJava

Can open picture with
PictureTool: From Command line
Extra Example: A Rhythm
Constructing Tool

Take a name of a sound to add to a root

Play the result
Solves exercise 13.2

• Weave a number of times
• Repeat a number times
Building the RhythmTool class
/**
* A Rhythm-constructing tool
**/
import javax.swing.*; // Need this to reach Swing components
import java.awt.*; // Need this to reach FlowLayout
import java.awt.event.*; // Need this for listeners and events
public class RhythmTool extends JFrame {
Each of the values that we’ll
access from inside the listeners
must be declared as instance
variables (fields) of the tools.
/* Base of sound that we're creating */
public SoundElement root;
/* Sound that we're creating to add in. */
public SoundElement newSound;
/* Declare these here so we can reach them inside listeners */
private JTextField filename;
private JTextField count;
int num;
Starting the Window (JFrame)
public RhythmTool(){
super("Rhythm Tool");
FileChooser.setMediaPath("D:/cs1316/mediasources/"); //CHANGE
ME!
root = new SoundElement(new Sound(1)); // Nearly empty sound
newSound = new SoundElement(new Sound(1)); // Ditto
// Layout for the window overall
this.getContentPane().setLayout(new BorderLayout());
Filename
field
/* First panel has new sound field */
JPanel panel1 = new JPanel();
// Put panel one at the top
this.getContentPane().add(panel1,BorderLayout.NORTH);
// Create a space for entering a new sound filename
filename = new JTextField("soundfilename.wav");
filename.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e) {
/* When hit return in filename field,
* create a new sound with that name.
* Printing is for debugging purposes.
**/
newSound = new SoundElement(
new Sound(
FileChooser.getMediaPath(filename.getText())));
System.out.println("New sound from "+
FileChooser.getMediaPath(filename.getText()));
}
}
);
panel1.add(filename);
Number
field
/* Put in another panel with number field
* and repeat & weave buttons */
JPanel panel2 = new JPanel();
// This layout is for the PANEL, not the WINDOW
panel2.setLayout(new BorderLayout());
// Add to MIDDLE of WINDOW
this.getContentPane().add(panel2,BorderLayout.CEN
TER);
// Add a field for arguments for Repeat and Weave
count = new JTextField("10");
num = 10; // Default value
count.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e) {
// Here's how we convert a string to a number
num = Integer.parseInt(count.getText());
}
}
);
// Add to top of panel
panel2.add(count,BorderLayout.NORTH);
Repeat
button
// Now do the Repeat button
JButton button1 = new JButton("Repeat");
button1.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e) {
// Repeat the number of times specified
root.repeatNext(newSound,num);
}
}
);
// Add to RIGHT of PANEL
panel2.add(button1,BorderLayout.EAST);
Weave
button
// Now do the Weave button
JButton button2 = new JButton("Weave");
button2.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e) {
// We'll weave 10 copies in
// every num times
root.weave(newSound,10,num);
}
}
);
// Add to LEFT of PANEL
panel2.add(button2,BorderLayout.WEST);
Play
Button
(and end)
/* Put in another panel with the Play button */
JPanel panel3 = new JPanel();
// Put in bottom of WINDOW
this.getContentPane().add(panel3,BorderLayout.SOUTH);
JButton button3 = new JButton("Play");
button3.addActionListener(
new ActionListener() {
// If this gets triggered, play the composed sound
public void actionPerformed(ActionEvent e) {
root.playFromMeOn();
}
}
);
panel3.add(button3); // No layout manager here
this.pack();
this.setVisible(true);
}
}