Add to collection(s) Add to saved
  1. Arts & Humanities
  2. Performing Arts
  3. Comedy

GUI Slides

advertisement 
1052 Series for Graphics
Graphics,
Applets
Graphical User Interfaces
1
CLH GUI slides
Outline - Chapter 2
Graphics
Applets
Drawing Shapes
2
CLH GUI slides
Introduction to Graphics

The last few sections of each chapter of the textbook focus
on graphics and graphical user interfaces

A picture or drawing must be digitized for storage on a
computer

A picture is made up of pixels (picture elements), and each
pixel is stored separately

The number of pixels used to represent a picture is called
the picture resolution

The number of pixels that can be displayed by a monitor is
called the monitor resolution
3
CLH GUI slides
Coordinate Systems

Each pixel can be identified using a two-dimensional
coordinate system

When referring to a pixel in a Java program, we use a
coordinate system with the origin in the top-left corner
(0, 0)
112
X
40
(112, 40)
Y
4
CLH GUI slides
The Coordinate System
<0, 0>
X
x
y
<x, y>
Y
<width-1,
height-1>
5
CLH GUI slides
Outline
Graphics
Applets
Drawing Shapes
6
CLH GUI slides
Applets

A Java application is a stand-alone program with a main
method (like the ones we've seen so far)

A Java applet is a program that is intended to transported
over the Web and executed using a web browser

An applet doesn't have a main method

Instead, there are several special methods that serve
specific purposes
7
CLH GUI slides
Applets

A applet is typically embedded in a Web page and can be
run from a browser.

You need a special HTML in the Web page to tell the
browser about the applet.
8
CLH GUI slides
Applets

The class that defines an applet extends the JApplet class

An applet is embedded into an HTML file using a tag that
references the bytecode version of the applet

The bytecode version of the program is transported across
the web and executed by a Java interpreter that is part of
the browser on the receiving site
9
CLH GUI slides
HTML
<html>
<head>
<title> Hi World Applet </title>
</head>
<body>
<applet code="HiWorld.class”
width=300 height=200>
</applet>
</body>
</html>
10
CLH GUI slides
The HTML applet Tag
<html>
<head>
<title>The Einstein Applet</title>
</head>
<body>
<applet code="Einstein.class" </applet>
</body>
</html>
11
CLH GUI slides
Java Applets
local computer
Java source
code
remote
computer
Java
compiler
Java
bytecode
Web browser
Java
interpreter
12
CLH GUI slides
Changing bytecode to machine code

When the bytecode is sent to another computer over the
web,


that computer’s browser will interpret the
bytecode with a java compiler on its computer

change it to the machine code of that computer.

This allows applets to used on both MACS and Windows
machines and Unix servers
13
CLH GUI slides
Drawing Shapes

A shape can be filled or unfilled, depending on which
method is invoked

The method parameters specify coordinates and sizes

Shapes with curves, like an oval, are usually drawn by
specifying the shape’s bounding rectangle

An arc can be thought of as a section of an oval
14
CLH GUI slides
Sample Graphics methods

A Graphics context is something you can paint on.

g.drawString(“Hello, World”, 20, 20);
g.drawRect(x, y, width, height);

g.fillRect(x, y, width, height);





g.drawOval(x, y, width, height);
g.fillOval(x, y, width, height);
To set the color that will fill the Oval use:
g.setColor(Color.red);
15
CLH GUI slides
Drawing a Line
10
150
X
20
45
Y
page.drawLine (10, 20, 150, 45);
or
page.drawLine (150, 45, 10, 20);
16
CLH GUI slides
Drawing a Rectangle
50
X
20
40
100
Y
page.drawRect (50, 20, 100, 40);
Where 50,20 are the x and y values where
The rectangle will start
100 is the width
40 is the length
17
CLH GUI slides
Drawing an Oval
175
X
20
80
bounding
rectangle
Y
50
page.drawOval (175, 20, 50, 80);
We give values for the bounding rectangle –
Start the left side of oval at 175,20
18
CLH GUI slides
public class No_Parking extends applet
{
{
public void paintComponent (Graphics page)
page.drawString (Parking”, 50, 50);
page.drawOval (45, 24, 43, 43);
page.drawLine (82, 30, 51,61);
} //method paintComponent
} // class No_Parking
Appletviewer : No_Parking Class
Parking
Applet Started
19
CLH GUI slides
Drawing Shapes

Every drawing surface has a background color

Every graphics context has a current foreground color

Both can be set explicitly

See Snowman.java (page103)
20
CLH GUI slides
Representing Color

A black and white picture could be stored using one bit per
pixel (0 = white and 1 = black)

A colored picture requires more information; there are
several techniques for representing colors

For example, every color can be represented as a mixture of
the three additive primary colors Red, Green, and Blue

Each color is represented by three numbers between 0 and
255 that collectively are called an RGB value
21
CLH GUI slides
The Color Class

A color in a Java program is represented as an object created
from the Color class

The Color class also contains several predefined colors,
including the following:
Object
RGB Value
Color.black
Color.blue
Color.cyan
Color.orange
Color.white
Color.yellow
0, 0, 0
0, 0, 255
0, 255, 255
255, 200, 0
255, 255, 255
255, 255, 0
22
CLH GUI slides
public class Snowman extends JApplet
{
public void paintComponent (Graphics page)
{
final int MID = 150;
final int TOP = 50;
setBackground (Color.cyan);
page.setColor (Color.blue);
page.fillRect (0, 175, 300, 50); // ground
page.setColor (Color.yellow);
page.fillOval (-40, -40, 80, 80); // sun
page.setColor (Color.white);
page.fillOval (MID-20, TOP, 40, 40);
// head
page.fillOval (MID-35, TOP+35, 70, 50); // upper torso
page.fillOval (MID-50, TOP+80, 100, 60); // lower torso
23
CLH GUI slides
page.setColor (Color.black);
page.fillOval (MID-10, TOP+10, 5, 5); // left eye
page.fillOval (MID+5, TOP+10, 5, 5); // right eye
page.drawArc (MID-10, TOP+20, 20, 10, 190, 160); // smile
page.drawLine (MID-25, TOP+60, MID-50, TOP+40); // left arm
page.drawLine (MID+25, TOP+60, MID+55, TOP+60); // right arm
page.drawLine (MID-20, TOP+5, MID+20, TOP+5);
page.fillRect (MID-15, TOP-20, 30, 25);
// brim of hat
// top of hat
}
}
24
CLH GUI slides
Snowman Applet
25
CLH GUI slides
Applet methods

public void init ()

public void start ()

public void stop ()

public void destroy ()

public void paint (Graphics g)
26
CLH GUI slides

The paint method is executed automatically
when the applet is loaded

The paint method accepts a parameter that is an
object of the Graphics class.

It is used to draw shapes and text e.g
page.drawRect(x, y, width, width)
27
CLH GUI slides
Why an applet works

You write an applet by extending the class
JApplet.
28
CLH GUI slides
public void init ( )

Invoked when the applet is first loaded and again
if the applet is reloaded.

This is the first method to execute

It is an ideal place to initialize variables

It is the best place to define and use buttons, text fields,
sliders, layouts, etc.

Even if you do not use it, it is called anyway
29
CLH GUI slides
The init() Method
Other Common functions implemented in this
method are:
creating threads,
 loading images,
reading images from a file. Init is similar to a
constructor in an application
30
CLH GUI slides
public void start ( )

Not always needed

Automocatically called after init( )


Called each time the page is loaded and
restarted.e.g. after a user leaves and goes to
another web page.
Used mostly in conjunction with stop( )
31
CLH GUI slides
public void stop( )

Not always needed. Used mostly in conjunction with
start().

Called when the browser leaves the page - invoked when
the user moves off the page.


Use stop( ) if the applet is doing heavy computation that
you don’t want to continue when the browser is on some
other page.
When the user leaves the page, any threads the applet has
started—but not completed—will continue to run if stop is
not called.
32
CLH GUI slides
public void destroy( )

Seldom needed

Called after stop( )

Use to explicitly release system resources (like threads)

System resources are usually released automatically
33
CLH GUI slides
Applet flow of control
init( )
start( )
do some work
stop( )
destroy( )
34
CLH GUI slides
Browser Calling Applet Methods
reload
enters web page
init
after init
return to the page
start
exit
CLH GUI slides
stop
leave the page
destroy
35
public void paint(Graphics g)

Do drawing here.

WE call fillboard () and other methods in paint.

If you want to repaint some image:

Don’t call this paint directly. It’s called automatically.

Call repaint( ) instead.
36
CLH GUI slides
repaint( )


Call repaint( ) when you have changed something
and want your changes to show up on the screen
repaint( ) is a request--it might not happen.
37
CLH GUI slides
Applets are not magic!

Anything you can do in an applet, you can do in an
application.

You can do some things in an application that you
can’t do easily if at al in an applet such as writing to
a file.
38
CLH GUI slides

Graphical User Interfaces - GUI’s
A GUI in Java is created with at least three
kinds of objects:
 Components - textfields, buttons
 Events - a button is pressed
 Listeners - react to the event
39
CLH GUI slides
Graphical Applications

These components will serve as a foundation
for programs that USE graphical user
interfaces (GUIs)
40
CLH GUI slides
GUI Components
A
GUI component is an object that
represents a screen element such as
a
button or a text field
41
CLH GUI slides
GUI Containers

A GUI is a container that is used to hold and
organize other components e.g.


Containers include:
 Panels

Frames

dialog boxes
42
CLH GUI slides
A Container holding components
43
Containers

A frame is a container that is used to display
a GUI-based Java application

A frame is displayed as a separate window
with a title bar – it can be repositioned and
resized on the screen as needed
44
CLH GUI slides
THE FRAME HOLDS THE PANEL OF IMAGES
AND DISPLAYS THE NAME OF THE PROGRAM
45
CLH GUI slides
Containers and Components

A GUI container can be classified as either
heavyweight or lightweight

A lightweight container is managed by the
Java program itself

A frame is a heavyweight container and a
panel is a lightweight container
46
CLH GUI slides
GUI Development

Therefore, to create a Java program that
uses a GUI we must:

instantiate and set up the necessary components

implement listener classes for any events we
set up.

establish the relationship between listeners and
components
47
CLH GUI slides
Some types of components
48
CLH GUI slides
Swing Components

There are various Swing GUI components that we
can incorporate into our software:








labels (including images)
text fields and text areas
buttons
check boxes
radio buttons
menus
combo boxes
and many more…
49
CLH GUI slides
Creating components

JLabel lab = new Label (”Hi, Dave!");

JButton but = new Button ("Click me!");

JCheckbox toggle = new Checkbox (”toggle");


JTextField txt =
new JTextField (”Initial text.", 20);
JScrollbar scrolly = new Scrollbar
(Scrollbar.HORIZONTAL, initialValue,
bubbleSize, minValue, maxValue);
50
CLH GUI slides
Labels

A label is a GUI component that displays a line of
text

Labels are used to display information or identify
other components in the interface

Let's look at a program that organizes three labels
in a panel and displays that panel in a frame
51
A LABEL WITH IMAGES AND
TEXT
52
CLH GUI slides
Labels and Image Icons

A label is used to provide information to the user or
to add decoration to the GUI

It can incorporate an image defined by the
ImageIcon class
53
CLH GUI slides
Image Icons

An Imageicon object represents an image

ImageIcon are either JPEG or GIF images

A JLabel can contain a String, or ImageIcon,
or both

The orientation of the label's text and image
can be set explicitly
54
CLH GUI slides
The LabelDemo Program
55
CLH GUI slides
public class LabelDemo
{ //--------------------------------------------------
// Creates and displays three labels
//--------------------------------------------public static void main (String[] args)
{
ImageIcon icon = new ImageIcon ("devil.gif");
// 3 LABELS of class Jlabel
JLabel label1, label2, label3;
// put label in the middle of A panel
label1 = new JLabel ("Devil Left", icon, SwingConstants.CENTER);
56
label2 = new JLabel ("Devil Right", icon,
SwingConstants.CENTER);
label2.setHorizontalTextPosition (SwingConstants.LEFT);
label2.setVerticalTextPosition (SwingConstants.BOTTOM);
label3 = new JLabel ("Devil Above", icon,
SwingConstants.CENTER);
label3.setHorizontalTextPosition (SwingConstants.CENTER);
label3.setVerticalTextPosition (SwingConstants.BOTTOM);
57
//Create a Panel and put the three labels on it
JPanel panel = new JPanel(); // HOLDS THE LABELS
panel.setBackground (Color.cyan);
panel.setPreferredSize (new Dimension (200, 250));
panel.add (label1); // ADD EACH LABEL TO THE PANEL
panel.add (label2);
panel.add (label3);
// get the container to put the panel on
Container c = getContentPane();
c.add(panel); // add the panel to the CONTAINER
}
CLH GUI slides
58
The LabelDemo Program
59
CLH GUI slides
GUI Elements - Events

An event is an object that represents some
interaction with the user.

E.g. pressing a button in Dating Service


selecting an option from checkbox
60
CLH GUI slides
Events
• we may want our program to perform some
action when the following occurs:
– the mouse is moved
– a mouse button is clicked
– the mouse is dragged
– a graphical button is clicked
– a keyboard key is pressed
– a timer expires
61
CLH GUI slides
Making components active

Most components appear to do something—

buttons click, text appears

To associate an particular action with a component,
we

attach a listener to it
62
CLH GUI slides
Buttons fire events

Components fire events,

e.g. a button is pressed

listeners listen for events
63
CLH GUI slides
Listeners

Different components may fire different
events, and require different listeners

A listener is an object that is “waiting for an
event to occur” and

we code what we want it to do when an event
occurs
64
CLH GUI slides
Listeners




Listeners are interfaces, the class below implements
The ActionListener interface
class ButtonListener implements
ActionListener
ActionListener Interface with one method:
public void ActionPerformed(Event e);
65
CLH GUI slides
Events and Listeners
Event
Generator
Listener
This object may
generate an event
This object waits for, and
responds to an event
When an event occurs, the
the appropriate method of the listener is called,
passing an object that describes the event
66
CLH GUI slides
Creating GUIs - Review

Therefore, to create a program with a GUI, we :

define and set up the components

create listener classes

set up the relationships between the listeners
and the components which generate events

define what happens in response to each event
67
CLH GUI slides
Listener class for buttons

The listener class must implement the
ActionListener Interface.

A method is called in the listener class to
respond:
public void actionPerformed(Event e)
68
CLH GUI slides
PushButton applet
69
CLH GUI slides
Push Counter Example

The components of the PushCounter class are

the button which the user presses

a label to display the counter,

a panel to organize the components,

and the main frame to hold the GUI
70
CLH GUI slides
public class PushCounter extends JApplet
{
private int pushes; // set up components
private JLabel label;
private JButton push;
//-----------------------------------------------------------// Now set up the GUI.
//------------------------------------------------------------
CLH GUI slides
71
public void init ()
{
pushes = 0;
push = new JButton ("Push Me!");// create a button
// add the ButtonListener class as the listener for the
//button
push.addActionListener (new ButtonListener());
label = new JLabel ("Pushes: " + Integer.toString (pushes));
Container cp = getContentPane();// cp holds the components
cp.add (push); // add the button to contentPane
cp.add (label); } // add the label
72
CLH GUI slides
73
CLH GUI slides
/******************************************
// Class BUTTONLISTENER listens for when the Jbutton is
pressed AND implements the ActionListener Interface
//******************************************
private class ButtonListener implements ActionListener
{
//----------------------------------------------------------
// Updates the counter when the button is pushed.
// and changes the number of pushed on the label
//----------------------------------------------------------
public void actionPerformed (ActionEvent event)
{
pushes++;
label.setText("Pushes: " + pushes);
repaint (); // tell layout manager to redraw label
} }}
//repaint forces an update to change the label
CLH GUI slides
74
Listeners - Reviewing the Code
// CREATE THE BUTTON
push = new JButton ("Push Me!");
// ADD A LISTENER TO IT - ButtonListener
push.addActionListener (new ButtonListener());

The ButtonListener class is listed as the listener for
for the push buttons - (whenever the button is
pressed).
75
CLH GUI slides
Push Counter Algorithm


When the user presses the button,

An event is fired:

An an ActionEvent object created AND

The program looks for the actionPerformed method
in the ButtonListener class
The actionPerformed method increments the
counter and resets the text of the label
76
CLH GUI slides
Push Counter Example

The ButtonListener class is implemented as an
inner class

This allows the listener class to have access to the
instance variables and methods in the outer class
77
CLH GUI slides
Action Events



Some components have more than one listener
(just to keep things real simple!!!!!)
A list of the Components and their listeners can be
found on either Oracle of Sun’s website.
78
CLH GUI slides
Nested Panels

Containers that contain other components make up
the containment hierarchy

This hierarchy can be as intricate as needed to
create the visual effect desired

The following example nests two panels inside a
third panel – note the effect this has as the frame is
resized
79
CLH GUI slides
Nested Panels
80
CLH GUI slides
public class NestedPanels
{
//-----------------------------------------------------------------
// Presents two colored panels nested within a third.
//-----------------------------------------------------------------
public static void main (String[] args)
{
// Set up first subpanel
JPanel subPanel1 = new JPanel();
// set its preferred size and background color
subPanel1.setPreferredSize (new Dimension(150, 100));
subPanel1.setBackground (Color.green);
81
CLH GUI slides
// create and add another label to a panel
JLabel label1 = new JLabel ("One");
subPanel1.add (label1);
// Set up second subpanel and size it
JPanel subPanel2 = new JPanel();
subPanel2.setPreferredSize (new Dimension(150,
100));
subPanel2.setBackground (Color.red);
// create another label and add to panel 2
JLabel label2 = new JLabel ("Two");
subPanel2.add (label2);
82
CLH GUI slides
// Set up primary panel
JPanel primary = new JPanel();
primary.setBackground (Color.blue);
// add the two panels to the primary panel
primary.add (subPanel1);
primary.add (subPanel2);
// add the primary panel to the contentPane
getContentPane().add(primary);
}
CLH GUI slides
}
83
84
CLH GUI slides
Text Fields
A text field allows the user to enter one line of input

If the cursor is in the text field,

the text field generates an action event when the
enter key is pressed
85
CLH GUI slides
See Farhenheit.doc
86
CLH GUI slides
Fahrenheit.java
public class Fahrenheit
{
//-----------------------------------------------------------------
// Creates and displays the temperature converter GUI.
//----------------------------------------------------------------public static void main (String[] args)
{
final JFrame jFrame = new FahrenheitGUI()); // Main frame
jFrame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
jFrame.pack();
jFrame.setSize(WINDOW_WIDTH,WINDOW_HEIGHT);
jFrame.setVisible(true);
}
}
87
// Demonstrates the use of JFrame and
JTextArea GUI components.
//*****************************************
public class FahrenheitGUI extends JFrame
{
private int WIDTH = 300;
private int HEIGHT = 75;
private JPanel panel; // create a panel
// create two labels and a textfield
private JLabel inputLabel, outputLabel, resultLabel;
private JTextField fahrenheit;
88
CLH GUI slides
// Sets up the GUI.
public FahrenheitGUI() // create the labels
{
super("Farhrenheit Converter");
// Create three labels
inputLabel = new JLabel ("Enter Fahrenheit
temperature:");
outputLabel = new JLabel ("Temperature in
Celcius: ");
resultLabel = new JLabel ("---");
89
CLH GUI slides
// create a textfield with 10 columns, 20 rows
fahrenheit = new JTextField (10, 20);
// add a listener classt o the textfield
fahrenheit.addActionListener (new TempListener());
// when enter is pressed in the textfield, an event is
//fired
// Create a panel to put the components on
panel = new JPanel();
90
CLH GUI slides

// set the background color of the panel
panel.setBackground (Color.yellow);
// Add the labels and the textfield to the panel
panel.add (inputLabel); // add label
panel.add (fahrenheit); // add textfield
panel.add (outputLabel); //label
panel.add (resultLabel);
// Get the contentPane and add the panel to it
Container c = getContentPane();
c.add (panel); // add the panel to the GUI
91
CLH GUI slides
92
CLH GUI slides
The Farenheit Program

The order in which the labels and text fields are
added is the order in how they appear.

The size of the panels determines how they line up
to each other.

Panels by default are governed by a flow layout
which we will explore later.
93
CLH GUI slides
The fahrenheit Program

The program reacts when the user presses the
enter key inside the text field.

A JTextField objects generates an action event
when the enter key is pressed

The TempListener class will handle the action
event when key is pressed . It LISTENS FOR the
event
94
CLH GUI slides
// when the enter key is pressed in the text field.
private class TempListener implements ActionListener
{
public void actionPerformed (ActionEvent event)
{
int fahrenheitTemp, celciusTemp;
// get the text the user entered into the textfield
String text = fahrenheit.getText();
// change the text to an int and store it in celciusTemp
fahrenheitTemp = Integer.parseInt (text);
celciusTemp = (fahrenheitTemp-32) * 5/9;
95
CLH GUI slides
// change the text to an int and store it in celciusTemp
fahrenheitTemp = Integer.parseInt (text);
celciusTemp = (fahrenheitTemp-32) * 5/9;
// change the text in the resultLabel
resultLabel.setText (Integer.toString (celciusTemp));
} // end of method
96
CLH GUI slides
SetText,() getText()

In the above code,

setText(some value) will change what is printed on
the label.

To get a value from a textfield use:
String text = fahrenheit.getText();
97
CLH GUI slides
Listeners for TextFields

A JTextField has two listeners,

ActionListener and TextListener:

An ActionListener listens for hitting the return key

use getText( ) to get the text from whatever is
input into the textfield.
98
CLH GUI slides
Determining Event Sources

The other listener – TextListener - listens for changes to
the text already in the textfield
The TextListener Interface has one method
public void textValueChanged(TextEvent e)
99
CLH GUI slides
What Event?
The source of the event ( which component was

fired e.g a textfield, a button) can be determined by
using the:



getSource() method e.g.

event.getSource()
“event” is the parameter sent to the ActionPerformed
method e.g.
public void actionPerformed (ActionEvent event)
100
CLH GUI slides
public class LeftRight
{
//----------------------------------------------------------------// Creates the main program frame.
//----------------------------------------------------------------public static void main (String[] args)
{
JFrame frame = new JFrame ("Left Right");
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(new LeftRightPanel());
frame.pack();
frame.setVisible(true);
}
}
101
CLH GUI slides
// Puts a Panel on top of a Panel
public class LeftRightPanel extends JPanel
{
// creates components for the Panel
private JButton left, right;
private JLabel label;
private JPanel buttonPanel;
102
CLH GUI slides
Listeners
public LeftRightPanel ()
{
// create two buttons
left = new JButton ("Left");
right = new JButton ("Right");
// attach listener class to them - same listener for both
ButtonListener listener = new ButtonListener();
left.addActionListener (listener);
right.addActionListener (listener);
label = new JLabel ("Push a button"); // create a label
103
CLH GUI slides
104
CLH GUI slides
buttonPanel = new JPanel(); // create a panel
buttonPanel.setPreferredSize (new Dimension(200, 40));
buttonPanel.setBackground (Color.blue);
buttonPanel.add (left); // add buttons to panel
buttonPanel.add (right);
setPreferredSize (new Dimension(200, 80));
setBackground (Color.cyan);
// add the label and the panel to the LeftRightPanel
add (label);
add (buttonPanel);
}
105
//****************************************************
// Class Represents a listener for both buttons.
//****************************************************
private class ButtonListener implements ActionListener
{
//-------------------------------------------------------------// Determines which button was pressed and sets the label
// text accordingly. The event object knows what button was
pressed
//-------------------------------------------------------------public void actionPerformed (ActionEvent event)
{
if (event.getSource() == left) // which event was fired?
label.setText("Left"); // write left on the label
else
label.setText("Right"); } }
106
Layout Managers

A layout manager is an object that determines the way
that components are arranged in a container

There are several predefined layout managers defined in the
Java standard class library:
Flow Layout
Border Layout
Card Layout
Grid Layout
GridBag Layout
Box Layout
Overlay Layout
Defined in the AWT
Defined in Swing
107
CLH GUI slides
Layout Managers

We can explicitly set the layout manager

Each layout manager has its own particular rules
on how the components will be arranged

Some layout managers pay attention to a
component's preferred size or alignment, while
others do not
108
CLH GUI slides
Layout Managers

We can use the setLayout method of a container
to change its layout manager
JPanel panel = new JPanel();
panel.setLayout (new BorderLayout());

The following example uses a tabbed pane, a
container which permits one of several panes to be
selected
109
CLH GUI slides
FlowLayout

Components are added left-to-right

If no room is left , a new row is started

Exact layout depends on size of the container

Components are made as small as possible

FlowLayout is convenient but often ugly
110
CLH GUI slides
Flow Layout

Flow layout puts as many components as possible on
in a row,

and then moves to the next row

Each row of components is centered horizontally in
the window by default,

but could also be aligned left or right


The horizontal and vertical gaps between the
components can be explicitly set also
CLH GUI slides
111
public class FlowPanel extends JPanel
{
//----------------------------------------------------------------// Sets up this panel with some buttons to show
how flow layout affects their position.
//----------------------------------------------------------------public FlowPanel ()
{
setLayout (new FlowLayout());
setBackground (Color.green);
// create 5 buttons
JButton b1 = new JButton ("BUTTON 1");
JButton b2 = new JButton ("BUTTON 2");
JButton b3 = new JButton ("BUTTON 3");
JButton b4 = new JButton ("BUTTON 4");
JButton b5 = new JButton ("BUTTON 5");
}
} slides
CLH GUI
112
Adding the buttons to the panel
Now add all the buttons to the panel
add (b1);
add (b2);
add (b3);
add (b4);
add (b5);
Because FlowPanel extend Jpanel, we add the buttons
directly to it.
113
CLH GUI slides
LayoutDemo - Flow
114
CLH GUI slides
Border Layout

A border layout defines five areas to which
components

can be added
West
North
Center
East
South
115
CLH GUI slides
BorderLayout

At most five components can
be added

If you want more
components, add a Panel,
then add components to it.
setLayout (new BorderLayout());
add (BorderLayout.NORTH, new Button(“NORTH”));
116
CLH GUI slides
BorderLayout with five Buttons
The code to add 4 buttons to a GUI
public void init()
{
setLayout (new BorderLayout ());
}
add (BorderLayout.NORTH, new Button ("NORTH"));
add (BorderLayout.SOUTH, new Button ("SOUTH"));
add (BorderLayout.EAST, new Button ("EAST"));
add (BorderLayout.WEST, new Button ("WEST"));
add (BorderLayout.CENTER, new Button ("CENTER"));
117
CLH GUI slides
Using a Panel within a panel
panel p = new Panel(); // create another panel
add (BorderLayout.SOUTH, p);// set its layout
p.add (new Button (“Button 1”)); //add buttons to it
p.add (new Button (“Button 2”));
118
CLH GUI slides
Border Layout

Each area displays one component (which could be
another container such as a JPanel)

Each of the four outer areas enlarges as needed to
accommodate the component added to it

If nothing is added to the outer areas, they take up no
space and other areas expand to fill the void

The center area expands to fill space as needed
119
CLH GUI slides
LayoutDemo - Border
120
CLH GUI slides
Grid Layout

A grid layout presents a container’s components in a
rectangular grid of rows and columns

One component is placed in each cell of the grid,

and all cells have the same size
121
CLH GUI slides
Grid Layout

As components are added to the container,

they fill the grid from left-to-right and top-tobottom (by default)

The size of each cell is determined by the overall
size of the container
122
CLH GUI slides
public class GridPanel extends JPanel
{
//----------------------------------------------------------------// Sets up this panel with some buttons to show how grid
// layout affects their position, shape, and size.
//-----------------------------------------------------------------
public GridPanel()
{
setLayout (new GridLayout (2, 3)); // 2 rows, 3 columns
setBackground (Color.green);
JButton b1 = new JButton ("BUTTON 1");
JButton b2 = new JButton ("BUTTON 2");
JButton b3 = new JButton ("BUTTON 3");
JButton b4 = new JButton ("BUTTON 4");
JButton b5 = new JButton ("BUTTON 5");
}
}
add (b1); // add all the buttons to the panel
add (b2);
add (b3);
add (b4);
add (b5);
CLH GUI slides
123
LayoutDemo - Grid
124
CLH GUI slides
Box Layout

A box layout organizes components horizontally
(in one row) or vertically (in one column)

Components are placed top-to-bottom or left-to-right
in the order in which they are added to the container
125
CLH GUI slides
BOX Layout

By combining multiple containers using box layout,
many different configurations can be created

Multiple containers with box layouts are often
preferred to one container
126
CLH GUI slides
Gridbag layout

The Gridbag layout uses the more complicated
gridbag layout manager

For GRIDBAG layout you place components
yourself by

Giving the pixel locations of every component
127
CLH GUI slides
Box Layout

Invisible components can be added to a boxlayout
container to take up space between components

Rigid areas have a fixed size

Glue specifies where excess space should go
128
CLH GUI slides
Boxlayout

A rigid area is created using the
createRigidArea() method of the Box class

Glue which allows an area to expand is created
using the methods

createHorizontalGlue () or

createVerticalGlue ()
129
CLH GUI slides
LayoutDemo - Box
130
CLH GUI slides
public class BoxPanel extends Jpanel {
//----------------------------------------------------------------// Sets up this panel with some buttons to show how a
//vertical box layout (and invisible components) affects
//their position.
//-----------------------------------------------------------------
public BoxPanel()
{
setLayout (new BoxLayout (this, BoxLayout.Y_AXIS));
setBackground (Color.green);
JButton b1 = new JButton ("BUTTON 1");
JButton b2 = new JButton ("BUTTON 2");
JButton b3 = new JButton ("BUTTON 3");
JButton b4 = new JButton ("BUTTON 4");
JButton b5 = new JButton ("BUTTON 5");
CLH GUI slides
131
add (b1);
add (Box.createRigidArea (new Dimension (0, 10)));
add (b2);
add (Box.createVerticalGlue());
add (b3);
add (b4);
add (Box.createRigidArea (new Dimension (0, 20)));
add (b5);
}
}
132
CLH GUI slides
Dialog Boxes

A dialog box is a window that appears on top of any
currently active window

It may be used to:






convey information
confirm an action
allow the user to enter data
pick a color
choose a file
A dialog box usually has a specific, solitary purpose, and the
user interaction with it is brief
133
CLH GUI slides
Dialog Boxes

A dialog box is a graphical window that pops up on
top of any currently active window for the user

The Swing API contains a class called

JOptionPane that simplifies the creation and use
of basic dialog boxes
134
CLH GUI slides

There are three categories of JOptionPane dialog
boxes

A message dialog displays an output string

An input dialog presents a prompt and a single
input text field

A confirm dialog presents the user with a simple
yes-or-no question
135
CLH GUI slides
The EvenOdd Program
136
CLH GUI slides
Check Boxes

A check box is a button that can be
toggled on or off

You use the JCheckBox class

Unlike a push button, which generates an
action event, ( a listener)

check box generates an item event

whenever it changes state (is checked on or off)
137
CLH GUI slides

The ItemListener interface is used to define :
item event listeners
which are the listeners for checkboxes

The check box calls the
itemStateChanged() method
when it is toggled
Just like buttons call actionPerformed() method
138
CLH GUI slides
Check Boxes

Let's examine a program that uses check boxes to
determine the style of a label's text string

It uses the Font class, which represents a
character’s font: You can specify:

family name (such as Times or Courier)

style (bold, italic, or both)

font size
139
CLH GUI slides
Checkbox – choose
bold or italic
140
CLH GUI slides
public class StyleOptionsPanel extends
JPanel
{
private JLabel saying; // label to place the saying
private JCheckBox bold, italic; // two checkboxs
//----------------------------------------------------------------// Sets up a panel with a label and some check boxes
// and controls the style of the label's font.
//-----------------------------------------------------------------
141
//Setting the font for the Jlabel and the checkboxes
**************************************************
public StyleOptionsPanel()
{
saying = new JLabel ("Say it with style!");
saying.setFont (new Font ("Helvetica", Font.PLAIN, 36));
bold = new JCheckBox ("Bold");
bold.setBackground (Color.cyan);
italic = new JCheckBox ("Italic");
italic.setBackground (Color.cyan);
142
CLH GUI slides
// set up a listener classs for the checkboxes
StyleListener listener = new StyleListener();
bold.addItemListener (listener);// add listeners
italic.addItemListener (listener);
add (saying); // add checkboxes and label
add (bold);
add (italic);
setBackground (Color.cyan);
setPreferredSize (new Dimension(300, 100));
143
Setting up listeners for checkboxes
// set up a listener classs for the checkboxes
StyleListener listener = new StyleListener();
// add listeners to the checkboxes
bold.addItemListener (listener);// add listeners
italic.addItemListener (listener);
add (saying); // add checkboxes and label to panel
add (bold);
add (italic);
setBackground (Color.cyan);
setPreferredSize (new Dimension(300, 100));
144
CLH GUI slides
//****************************************************
// Represents the listener class for both check
//***************************************************
box.
private class StyleListener implements ItemListener
{
//-------------------------------------------------------------// Updates the style of the label font style.
//-------------------------------------------------------------public void itemStateChanged (ItemEvent event)
{
int style = Font.PLAIN;
if (bold.isSelected()) // if the bold checkbox is selected
style = Font.BOLD; // set the style to BOLD
if (italic.isSelected()) // if italic checkbox is selected
style = Font.ITALIC; // set the style to italic
saying.setFont (new Font ("Helvetica", style, 36));
}
}}
145
The StyleOptions Program
146
CLH GUI slides
Radio Buttons

A group of radio buttons represents a set of mutually
exclusive options –

only one can be selected at any given time

When a radio button from a group is selected,

the button that is currently "on" in the group is
automatically toggled off
147
CLH GUI slides

To define the group of radio buttons
that will work together,

each radio button is added to a ButtonGroup
object

A radio button generates an action event
148
CLH GUI slides
Radio Buttons

Compare and contrast check boxes and radio buttons

Check boxes work independently to provide a boolean
option – do you want skim milk or whole milk?

Radio buttons work as a group to provide a set of
mutually exclusive options –

do you want to hear classical, rock, or country music?
149
CLH GUI slides
QuoteOptions Program
// Creates and presents the program frame.
//----------------------------------------------------------------public static void main (String[] args)
{
JFrame frame = new JFrame ("Quote Options");
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
QuoteOptionsPanel panel = new QuoteOptionsPanel();
frame.getContentPane().add (panel);
frame.pack();
frame.setVisible(true);
}
}
150
CLH GUI slides
public class QuoteOptionsPanel extends JPanel
{
private JLabel quote;
private JRadioButton comedy, philosophy, carpentry;
private String comedyQuote, philosophyQuote,
carpentryQuote; // strings to be placed on buttons
//----------------------------------------------------------------// Sets up a panel with a label and
// a set of radio buttons
// that control its text.
//-----------------------------------------------------------------
151
CLH GUI slides

public QuoteOptionsPanel()
{
comedyQuote = "Take my wife, please.";
philosophyQuote = "I think, therefore I am.";
carpentryQuote = "Measure twice. Cut once.";
quote = new JLabel (comedyQuote);
quote.setFont (new Font ("Helvetica", Font.BOLD, 24))
152
CLH GUI slides
Create three radio buttons
comedy = new JRadioButton ("Comedy", true);
comedy.setBackground (Color.green);
philosophy = new JRadioButton ("Philosophy");
philosophy.setBackground (Color.green);
carpentry = new JRadioButton ("Carpentry");
carpentry.setBackground (Color.green);
// puts the buttons into a group - this is required
ButtonGroup group = new ButtonGroup();
group.add (comedy);
group.add (philosophy);
group.add (carpentry);
153
CLH GUI slides
QuoteOptions.java
// see slide 156 first
// set up a listener for the buttons
QuoteListener listener = new QuoteListener();
comedy.addActionListener (listener);
philosophy.addActionListener (listener);
carpentry.addActionListener (listener);
// Add the buttons to this panel
add (quote);
add (comedy);
add (philosophy);
add (carpentry);
}
setBackground (Color.green);
setPreferredSize (new Dimension(300, 100));
CLH GUI slides
154
//********************************************************
// Represents the listener class for all radio buttons
/***********************************************************
private class QuoteListener implements ActionListener
{
}
}
//-------------------------------------------------------------// Sets the text on the label depending on which radio
// button was pressed.
//-------------------------------------------------------------public void actionPerformed (ActionEvent event)
{
if (event.getSource() == comedy // if the comedy button is pressed
quote.setText (comedyQuote);
else
// if the philosophy button is pressed
}
CLH GUI slides
if (event.getSource() == philosophy)
quote.setText (philosophyQuote);
else
quote.setText (carpentryQuote);
155
The QuoteOptions Program
156
CLH GUI slides
Combo Boxes

A JCombobox displays a particular option with a pull down
menu from which the user can choose a different option

The currently selected option is shown in the combo box

A combo box can be editable, so that the user can type their
option directly into the box

See JukeBox.java
See JukeBoxControls.java

157
CLH GUI slides
Combo Boxes

Unlike a JList , a combo box shows its options only when
the user presses it using the mouse

Options can be established using an array of strings or using
the addItem method

A combo box generates an action event when the user
makes a selection from it
158
CLH GUI slides
The JukeBox Program

See JukeBox.java

See JukeBoxControls.java
159
CLH GUI slides
//---------------------------------------------------------------// Sets up the GUI for the juke box.
// You need to create URL’s to load the sound files
//----------------------------------------------------------------public JukeBoxControls()
{
URL url1, url2, url3, url4, url5, url6;
url1 = url2 = url3 = url4 = url5 = url6 = null;
// Obtain and store the audio clips to play
try
{
url1 = new URL ("file", "localhost", "westernBeat.wav");
url2 = new URL ("file", "localhost", "classical.wav");
url3 = new URL ("file", "localhost", "jeopardy.au");
url4 = new URL ("file", "localhost", "newAgeRythm.wav");
url5 = new URL ("file", "localhost", "eightiesJam.wav");
url6 = new URL ("file", "localhost", "hitchcock.wav");
}
catch (Exception exception) {}
}
CLH GUI slides
160
// now create an array of AudioClips
music = new AudioClip[7];
music[0] = null; // Corresponds to "Make a Selection..."
music[1] = JApplet.newAudioClip (url1);
music[2] = JApplet.newAudioClip (url2);
music[3] = JApplet.newAudioClip (url3);
music[4] = JApplet.newAudioClip (url4);
music[5] = JApplet.newAudioClip (url5);
music[6] = JApplet.newAudioClip (url6);
// Create a Jlable and set its alignment
Jlabel titleLabel = new JLabel ("Java Juke Box");
titleLabel.setAlignmentX (Component.CENTER_ALIGNMENT);
161
CLH GUI slides
// Create the list of strings for the combo box options
String[] musicNames = {"Make A Selection...", "Western Beat",
"Classical Melody", "Jeopardy Theme", "New Age Rythm",
"Eighties Jam", "Alfred Hitchcock's Theme"};
// Create the Combo Box and put the musicnames above in it
musicCombo = new JComboBox (musicNames);
musicCombo.setAlignmentX
(Component.CENTER_ALIGNMENT);
// add a listener to the combo box
// ComboListener()
is the listener class for the combo box
musicCombo.addActionListener (new ComboListener());
162
CLH GUI slides
// Set up the buttons
playButton = new JButton ("Play", new ImageIcon
("play.gif"))playButton.setBackground (Color.white);
playButton.setMnemonic ('p');
stopButton = new JButton ("Stop", new ImageIcon ("stop.gif"));
stopButton.setBackground (Color.white);
stopButton.setMnemonic ('s'); // keyboard
// add action listeners to the buttons
stopButton.addActionListener (new ButtonListener());
playButton.addActionListener (new ButtonListener());
current = null;
163
CLH GUI slides
JPanel buttons = new JPanel();
// USE A BOXLAYOUT
// set the horizontal layout for the buttons panel to BoxLayout
buttons.setLayout (new BoxLayout (buttons,
BoxLayout.X_AXIS))
// ADD THE BUTTONS
buttons.add (playButton);
buttons.add (Box.createRigidArea (new Dimension(5,0)));
buttons.add (stopButton);
buttons.setBackground (Color.cyan);
setPreferredSize (new Dimension (300, 100));
setBackground (Color.cyan);
164
CLH GUI slides
Set up a Box Layout
setLayout (new BoxLayout (this, BoxLayout.Y_AXIS));
// put in a rigid area of 5 pixels
add (Box.createRigidArea (new Dimension(0,5)));
add (titleLabel);
// put in a rigid area of 5 pixels
add (Box.createRigidArea (new Dimension(0,5)));
add (musicCombo);
// put in a rigid area of 5 pixels
add (Box.createRigidArea (new Dimension(0,5)));
add (buttons);
add (Box.createRigidArea (new Dimension(0,5)));
165
CLH GUI slides
Listener for the Combo Boxes
private class ComboListener implements ActionListener
{
//-------------------------------------------------------------// Stops playing the current selection (if any) and resets
// the current selection to the new one chosen.
//--------------------------------------------------------------
public void actionPerformed (ActionEvent event)
{
if (current != null)
current.stop();
// stores the selected music from the combo box in current
current = music[musicCombo.getSelectedIndex()];
}
}
166
CLH GUI slides
//*****************************************************************
// Represents the action listener for both control buttons.
//*****************************************************************
private class ButtonListener implements ActionListener
{
//
//-------------------------------------------------------------// Stops the current selection (if any) .
// If the play button was pressed, start playing it again.
//--------------------------------------------------------------
public void actionPerformed (ActionEvent event)
{
if (current != null)
current.stop();
}
if (event.getSource() == playButton)
if (current != null)
current.play();
}
167
CLH GUI slides
Class JukeBox
public class JukeBox
{
//----------------------------------------------------------------// Creates and displays the JukeBoxControls frame.
//----------------------------------------------------------------public static void main (String[] args)
{
JukeBoxControls frame = new JukeBoxControls();
frame.addWindowListener (new
GenericWindowListener());
frame.show();
}
}
168
CLH GUI slides
Outline
Mouse Events and Key Events
169
CLH GUI slides
Mouse Events

Events related to the mouse are separated into mouse
events and mouse motion events

Mouse Events:
mouse pressed
the mouse button is pressed down
mouse released
the mouse button is released
mouse clicked
the mouse button is pressed down and
released without moving the mouse in
between
mouse entered
the mouse pointer is moved onto (over) a
component
mouse exited
the mouse pointer is moved off of a
component
170
CLH GUI slides
Mouse Events

Mouse Motion Events:
mouse moved
the mouse is moved
mouse dragged
the mouse is moved while the mouse button
is pressed down

Listeners for mouse events are created using the
MouseListener and MouseMotionListener
interfaces

A MouseEvent object is passed to the appropriate
method when a mouse event occurs
171
CLH GUI slides
The Dots Program
172
CLH GUI slides
Mouse Events

For a given program, we may only care about one or two
mouse events

To satisfy the implementation of a listener interface,
empty methods must be provided for unused events

See Dots.java (page 413) Lewis Book
See DotsPanel.java (page 414)

173
CLH GUI slides
Extending Event Adapter
Classes

Creating listener classes by implementing a particular
interface (such as MouseListener interface) is not the
only way.

A listener can also be created by extending a special adapter
class of the Java class library

Each listener interface has a corresponding adapter class
(such as the MouseAdapter class)

Each adapter class implements the corresponding listener
and provides empty method definitions
174
CLH GUI slides
Event Adapter Classes

Each adapter class implements the corresponding listener and
provides empty method definitions

When you derive a listener class from an adapter class, you
only need to override the event methods that pertain to the
program

Empty definitions for unused event methods do not need to
be defined because they are provided via inheritance
175
CLH GUI slides
public class OffCenter
{
//----------------------------------------------------------------// Creates the main frame of the program.
//----------------------------------------------------------------public static void main (String[] args)
{
JFrame frame = new JFrame ("Off Center");
frame.setDefaultCloseOperation
(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add(new OffCenterPanel());
frame.pack();
frame.setVisible(true);
}
}
176
CLH GUI slides
public class OffCenterPanel extends JPanel
{
private final int WIDTH=300, HEIGHT=300;
private DecimalFormat fmt;
private Point current;
private int centerX, centerY;
private double length;
//----------------------------------------------------------------public OffCenterPanel()
{
addMouseListener (new OffCenterListener());
centerX = WIDTH / 2;
centerY = HEIGHT / 2;
fmt = new DecimalFormat ("0.##");
setPreferredSize (new Dimension(WIDTH, HEIGHT));
setBackground (Color.yellow);
}
177
CLH GUI slides
//----------------------------------------------------------------// Draws a line from the mouse pointer to the center point of
// the applet and displays the distance.
//----------------------------------------------------------------public void paintComponent (Graphics page)
{
super.paintComponent (page);
page.setColor (Color.black);
page.drawOval (centerX-3, centerY-3, 6, 6);
if (current != null)
{
page.drawLine (current.x, current.y, centerX, centerY);
page.drawString ("Distance: " + fmt.format(length), 10, 15);
}
}
178
CLH GUI slides
//*****************************************************************
// Represents the listener for mouse events. Demonstrates the
// ability to extend an adaptor class.
//*****************************************************************
private class OffCenterListener extends MouseAdapter
{
//-------------------------------------------------------------// Computes the distance from the mouse pointer to the center
// point of the applet.
//-------------------------------------------------------------public void mouseClicked (MouseEvent event)
{
current = event.getPoint();
length = Math.sqrt(Math.pow((current.x-centerX), 2) +
Math.pow((current.y-centerY), 2));
repaint();
}
179
CLH GUI slides
The user clicks on a point on panel and distance is calculated
180
CLH GUI slides
Key Events

A key event is generated when the user types on the
keyboard
key pressed
a key on the keyboard is pressed down
key released
a key on the keyboard is released
key typed
a key on the keyboard is pressed down and
released

Listeners for key events are created by implementing the
KeyListener interface

A KeyEvent object is passed to the appropriate method
when a key event occurs
181
CLH GUI slides
Key Events

The component that generates a key event is the one that
has the current keyboard focus

Constants in the KeyEvent class can be used to determine
which key was pressed

The following example "moves" an image of an arrow as the
user types the keyboard arrow keys
182
CLH GUI slides
public class Direction
{
//----------------------------------------------------------------// Creates and displays the application frame.
//----------------------------------------------------------------public static void main (String[] args)
{
JFrame frame = new JFrame ("Direction");
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
frame.getContentPane().add (new DirectionPanel());
frame.pack();
frame.setVisible(true);
}
}
183
CLH GUI slides
The Direction Program
184
CLH GUI slides
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class DirectionPanel extends JPanel
{
private final int WIDTH = 300, HEIGHT = 200;
private final int JUMP = 10;
// increment for image movement
private final int IMAGE_SIZE = 31;
private ImageIcon up, down, right, left, currentImage;
private int x, y;
//----------------------------------------------------------
185
CLH GUI slides
//----------------------------------------------------------------// Constructor: Sets up this panel and loads the images.
//----------------------------------------------------------------public DirectionPanel()
{
addKeyListener (new DirectionListener());
x = WIDTH / 2;
y = HEIGHT / 2;
up = new ImageIcon ("arrowUp.gif");
down = new ImageIcon ("arrowDown.gif");
left = new ImageIcon ("arrowLeft.gif");
right = new ImageIcon ("arrowRight.gif");
currentImage = right;
setBackground (Color.black);
setPreferredSize (new Dimension(WIDTH, HEIGHT));
setFocusable(true);
}
186
CLH GUI slides
//--------------------------------------------------------// Draws the image in the current location.
//-----------------------------------------------------public void paintComponent (Graphics page)
{
super.paintComponent (page);
currentImage.paintIcon (this, page, x, y);
}
// close class
The paintIcon method draws the current image at the
specified x and y location
187
CLH GUI slides
//*****************************************************************
// Represents the listener for keyboard activity.
//*****************************************************************
private class DirectionListener implements KeyListener
{
//-------------------------------------------------------------// Responds to the user pressing arrow keys by adjusting the
// image and image location accordingly using
//-------------------------------------------------------------public void keyPressed (KeyEvent event)
{
switch (event.getKeyCode())
{
case KeyEvent.VK_UP:
currentImage = up;
y -= JUMP;
break;
case KeyEvent.VK_DOWN:
currentImage = down;
y += JUMP;
break;
188
CLH GUI slides
case KeyEvent.VK_LEFT:
currentImage = left;
x -= JUMP;
break;
case KeyEvent.VK_RIGHT:
currentImage = right;
x += JUMP;
break;
}
repaint();
}
//-------------------------------------------------------------// Provide empty definitions for unused event methods.
// Had the listener implement KeyAdaptor – this would not be necessary
//-------------------------------------------------------------public void keyTyped (KeyEvent event) {}
public void keyReleased (KeyEvent event) {}
}
}
189
CLH GUI slides
Some of the methods available on KeyEvents:
Method Purpose
int getKeyChar() Obtains the Unicode character associated
with this event. Only rely on this value for key-typed events.
int getKeyCode() Obtains the key code associated with this
event. The key code identifies the particular key on the
keyboard that the user pressed or released.
The KeyEvent class defines many key code constants for
commonly seen keys.
For example, VK_A specifies the key labeled A, and
VK_ESCAPE specifies the Escape key.
CLH GUI slides
190
KeyEvents

See this site for examples of all key events:

http://download.oracle.com/javase/1.4.2/docs/api/java/a
wt/event/KeyEvent.html
191
CLH GUI slides
The Timer Class

The Timer class of the javax.swing package is a GUI
component, but it has no visual representation

A Timer object generates an action event at specified
intervals

Timers can be used to manage any events that are based on
a timed interval, such as an animation

To create the illusion of movement, we use a timer to
change the scene after an timed delay
192
CLH GUI slides
The Timer Class

The start and stop methods of the Timer class start and
stop the timer

The delay can be set using the Timer constructor or using
the setDelay method
193
CLH GUI slides
Animations

An animation is a constantly changing series of
pictures or images that create the illusion of
movement

We can create animations in Java by changing a
picture slightly over time

The speed of a Java animation is usually controlled
by a Timer object
194
CLH GUI slides
The Rebound Program
195
CLH GUI slides
Animations

A Timer object generates and ActionEvent
every n milliseconds (where n is set by the object
creator)

The ActionListener interface contains an
actionPerformed method

Whenever the timer expires (generating an
ActionEvent) the animation can be updated
196
CLH GUI slides
Rebound Program

public class ReboundPanel extends JPanel
{
private final int WIDTH = 300, HEIGHT = 100;
private final int DELAY = 20, IMAGE_SIZE = 35;
private ImageIcon image;

// be sure to declare timer at top of program
private Timer timer;

private int x, y, moveX, moveY;
197
CLH GUI slides
//Sets up the panel,
//including the timer for the animation.
public ReboundPanel() {
// create the timer and its listener class
timer = new Timer(DELAY, new ReboundListener());
image = new ImageIcon ("happyFace.gif");
x = 0;
y = 40;
moveX = moveY = 3; // # of pixels to move each time
setPreferredSize (new Dimension(WIDTH, HEIGHT));
setBackground (Color.black);
timer.start(); // START TIMER
}
CLH GUI slides
198

// Class Represents the action listener for the timer.
//***********************************
private class ReboundListener implements ActionListener
{
/ Updates the position and direction of the image
// whenever the timer fires an action event.
//-------------------------------------------------------------public void actionPerformed (ActionEvent event)
{
x += moveX;
y += moveY;
if (x <= 0 || x >= WIDTH-IMAGE_SIZE)
moveX = moveX * -1;
if (y <= 0 || y >= HEIGHT-IMAGE_SIZE)
moveY = moveY * -1;
repaint(); // calls paintComponet() to redraw image
} } }
GUI slides
199
//----------------------------------------------------------------// is called from actionPerformed method
// to Draws the image in the new location.
// when the timer fires.
// Each time the timer fires, it will redraw the image at a
// new location
//----------------------------------------------------------------public void paintComponent (Graphics page)
{
super.paintComponent (page);
// draw the image on “this “ panel at location values of x and y
image.paintIcon (this, page, x, y);
}
200
CLH GUI slides
Containment Hierarchies
201
CLH GUI slides
Special Features

Swing components offer special features to facilitate
and enhance their use
Special Feature
Description
Tool tip
Causes a line of text to appear when the mouse
cursor pauses over a component
Mnemonic
Allows an action to occur in response to a
keyboard key combination
Disable
Allows a component to be explicitly enabled or
disabled
Border
Surrounds a component with a border
202
CLH GUI slides
Tool Tips

Tool tips provide a short pop-up description when the
mouse cursor rests momentarily on a component

A tool tip is assigned using the setToolTipText method
of a Swing component
JButton button = new JButton ("Compute");
button.setToolTipText ("Calculate size.");
203
CLH GUI slides
Mnemonics

A mnemonic provides a keyboard alternative for pushing a
button or selecting a menu option

The mnemonic character should be chosen from the
component's label, and is underlined

The user activates the component by holding down the ALT
key and pressing the mnemonic character

A mnemonic is established using the setMnemonic method
JButton button = new JButton ("Calculate");
button.setMnemonic ("C");
204
CLH GUI slides
Disabled Components

Components can be disabled if they should not be used

A disabled component is "grayed out" and will not respond to
user interaction

The status is set using the setEnabled method:
JButton button = new JButton (“Do It”);
button.setEnabled (false);
205
CLH GUI slides
Special Features

The right combination of special features and components
can enhance the usefulness of a GUI

See LightBulb.java(page 530)

See LightBulbPanel.java(page 531)

See LightBulbControls.java(page 533)
206
CLH GUI slides
The LightBulb Program
207
CLH GUI slides
File Choosers

Situations often arise where we want the user to select a file
stored on a disk drive, usually so that its contents can be
read and processed

A file chooser, represented by the JFileChooser class,
simplifies this process

A file chooser is a specialized dialog box created using the
JFileChooser class

The user can browse the disk and filter the file types
displayed

See DisplayFile.java (page 516)
208
CLH GUI slides
The DisplayFile Program
209
CLH GUI slides
Color Choosers

In many situations we want to allow the user to select a
color

A color chooser , represented by the JColorChooser
class, simplifies this process

The user can choose a color from a palette or specify the
color using RGB values

A color can be selected using swatches or RGB values

See DisplayColor.java (page 519)
210
CLH GUI slides
The DisplayColor Program
211
CLH GUI slides
In this application, radio buttons were displayed with
various colors and the option for users to choose their
own color with the colorChooser
// a radio Button was selected to choose a color in main
program
public void actionPerformed(ActionEvent event)
{
// If the other radio button is pressed the JColorChooser
pops up
if(event.getActionCommand().equals("Other"))
{
// Allows user to pick another color , otherPanel is the
panel it will be displayed on
212
CLH GUI slides


// colorChosen is the color the user picks
colorChosen = JColorChooser.showDialog(otherPanel,
"Pick a Color!", colorChosen);




// Sets a panel displayed next to radiobuttons to the
current color being used
colorPanel.setBackground(colorChosen);
}// close if

213
CLH GUI slides
else
{
// Sets current color to the radiobutton selected
colorChosen = mycolor;
// Sets panel next to radiobuttons to the current color
being used
colorPanel.setBackground(colorChosen);
}
}// Close actionPerformed
214
CLH GUI slides
Scroll Panes

A scroll pane is useful for images or information too large to
fit in a reasonably-sized area

A scroll pane offers a limited view of the component it
contains

It provides vertical and/or horizontal scroll bars that allow
the user to scroll to other areas of the component

No event listener is needed for a scroll pane

See TransitMap.java (page 540)
215
CLH GUI slides
The TransitMap Program
216
CLH GUI slides
Split Panes

A split pane (JSplitPane) is a container that displays two components
separated by a moveable divider bar

The two components can be displayed side by side, or one on top of the
other
Moveable Divider Bar
Top Component
Left
Component
Right
Component
Bottom Component
217
CLH GUI slides
Split Panes

The orientation of the split pane is set using the
HORIZONTAL_SPLIT or VERTICAL_SPLIT constants

The divider bar can be set so that it can be fully expanded
with one click of the mouse

The components can be continuously adjusted as the divider
bar is moved, or wait until it stops moving

Split panes can be nested
218
CLH GUI slides
Lists

The Swing Jlist class represents a list of items from which
the user can choose

The contents of a JList object can be specified using an
array of objects

A JList object generates a list selection event when the
current selection changes

See PickImage.java (page 544)

See ListPanel.java (page 546)
219
CLH GUI slides
The PickImage Program
220
CLH GUI slides
Lists

A JList object can be set so that multiple items can be selected at the
same time

The list selection mode can be one of three options:



single selection – only one item can be selected at a time
single interval selection – multiple, contiguous items can be selected
at a time
multiple interval selection – any combination of items can be
selected

The list selection mode is defined by a ListSelectionModel object

We used the DefaultListModel because it contains a vector
221
CLH GUI slides
Sliders

A slider is a GUI component that allows the user to specify a
value within a numeric range

A slider can be oriented vertically or horizontally and can
have optional tick marks and labels

The minimum and maximum values for the slider are set
using the JSlider constructor

A slider produces a change event when the slider is moved,
indicating that the slider and the value it represents has
changed
222
CLH GUI slides
Sliders

The following example uses three sliders to change values
representing the color components of an RGB value

See SlideColor.java (page 522)
See SlideColorPanel.java (page 523)

223
CLH GUI slides
224
CLH GUI slides
public class SlideColorPanel extends JPanel
{
private JPanel controls, colorPanel;
private JSlider rSlider, gSlider, bSlider;
private JLabel rLabel, gLabel, bLabel;
//----------------------------------------------------------------// Sets up the sliders and their labels, aligning them along
// their left edge using a box layout.
//----------------------------------------------------------------public SlideColorPanel()
{
rSlider = new JSlider (JSlider.HORIZONTAL, 0, 255, 0);
rSlider.setMajorTickSpacing (50); // set values for ticks
rSlider.setMinorTickSpacing (10);
rSlider.setPaintTicks (true); // necessary to have ticks appear
rSlider.setPaintLabels (true); // set labels for the ticks
rSlider.setAlignmentX (Component.LEFT_ALIGNMENT);
// sets up two other sliders
CLH GUI slides
225
By default, spacing for major and minor tick marks is zero.
To see tick marks, you must explicitly set the spacing for
either major or minor tick marks (or both) to a non-zero
value and call the setPaintTicks(true) method.
However, you also need labels for your tick marks.
To display standard, numeric labels at major tick mark
locations,
Set the major tick spacing(rSlider.setMajorTickSpacing
(50);, then call the setPaintLabels(true) method.
226
CLH GUI slides
SliderListener listener = new SliderListener();
// set change listeners for the sliders
rSlider.addChangeListener (listener);
gSlider.addChangeListener (listener);
bSlider.addChangeListener (listener);
create the labels and set alignment LEFT
rLabel = new JLabel ("Red: 0");
rLabel.setAlignmentX (Component.LEFT_ALIGNMENT);
gLabel = new JLabel ("Green: 0");
gLabel.setAlignmentX (Component.LEFT_ALIGNMENT);
bLabel = new JLabel ("Blue: 0");
bLabel.setAlignmentX (Component.LEFT_ALIGNMENT);
227
CLH GUI slides
Create a boxlayout for label/slider

controls = new JPanel();
BoxLayout layout = new BoxLayout (controls,
BoxLayout.Y_AXIS);
controls.setLayout (layout);
controls.add (rLabel);
controls.add (rSlider);
controls.add (Box.createRigidArea (new Dimension (0,
20)));
controls.add (gLabel);
controls.add (gSlider);
controls.add (Box.createRigidArea (new Dimension (0,
20)));
controls.add (bLabel);
controls.add (bSlider);
228
CLH GUI slides
// Create a Panel to display a color
colorPanel = new JPanel();
colorPanel.setPreferredSize (new Dimension (100, 100));
colorPanel.setBackground (new Color (0, 0, 0));
add (controls);
add (colorPanel);
229
CLH GUI slides
//*****************************************************************
// Represents the listener for all three sliders.
//*****************************************************************
private class SliderListener implements ChangeListener
{
private int red, green, blue;
//-------------------------------------------------------------// Gets the value of each slider, then updates the labels and the color panel.
//-------------------------------------------------------------public void stateChanged (ChangeEvent event)
{
red = rSlider.getValue(); // get all the slider values
green = gSlider.getValue();
blue = bSlider.getValue();
rLabel.setText ("Red: " + red);
gLabel.setText ("Green: " + green);
bLabel.setText ("Blue: " + blue);
// set the colorpanel to that color
colorPanel.setBackground (new Color (red, green, blue));
}
CLH GUI slides
}
230
Polygons and Polylines

Arrays can be helpful in graphics processing

For example, they can be used to store a list of coordinates

A polygon is a multisided, closed shape

A polyline is similar to a polygon except that its endpoints do
not meet, and it cannot be filled

See Rocket.java (page 409)
See RocketPanel.java (page 410)

231
CLH GUI slides
The Polygon Class

The Polygon class can also be used to define and draw a
polygon

It is part of the java.awt pacakage

Versions of the overloaded drawPolygon and
fillPolygon methods take a single Polygon object as a
parameter instead of arrays of coordinates

A Polygon object encapsulates the coordinates of the
polygon
232
CLH GUI slides
GUI Design

We must remember that the goal of software is to help the
user solve the problem

To that end, the GUI designer should:


Know the user

Prevent user errors

Optimize user abilities

Be consistent
Let's discuss each of these in more detail
233
CLH GUI slides
Know the User

Knowing the user implies an understanding of:

the user's true needs

the user's common activities

the user's level of expertise in the problem domain and in
computer processing

We should also realize these issues may differ for different
users

Remember, to the user, the interface is the program
234
CLH GUI slides
Prevent User Errors

Whenever possible, we should design user interfaces that
minimize possible user mistakes. Automate as much as
possible by using components that limit the number of
choices.

We should choose the best GUI components for each task

For example, in a situation where there are only a few valid
options, using a menu or radio buttons would be better than
an open text field

Error messages should guide the user appropriately
235
CLH GUI slides
Optimize User Abilities

Not all users are alike – some may be more familiar with the
system than others

Knowledgeable users are sometimes called power users

We should provide multiple ways to accomplish a task
whenever reasonable



"wizards" to walk a user through a process
short cuts for power users
Help facilities should be available but not intrusive
236
CLH GUI slides
Be Consistent

Consistency is important – users get used to things
appearing and working in certain ways

Colors should be used consistently to indicate similar types
of information or processing

Screen layout should be consistent from one part of a
system to another –

For example, error messages should appear in consistent
locations e.g. A JtextArea. This way the user knows to look
there if there is a problem
237
CLH GUI slides
Designing for Inheritance

As we've discussed, taking the time to create a good
software design reaps long-term benefits

Inheritance issues are an important part of an objectoriented design

Properly designed inheritance relationships can contribute
greatly to the elegance, maintainabilty, and reuse of the
software

Let's summarize some of the issues regarding inheritance
that relate to a good software design
238
CLH GUI slides
Inheritance Design Issues

Every derivation should be an is-a relationship

Think about the potential future of a class hierarchy, and
design classes to be reusable and flexible

Find common characteristics of classes and push them as
high in the class hierarchy as appropriate

Override methods as appropriate to tailor or change the
functionality of a child

Add new variables to children, but don't redefine
(shadow) inherited variables
239
CLH GUI slides
Inheritance Design Issues

Allow each class to manage its own data; use the super
reference to invoke the parent's constructor to set up its
data

Even if there are no current uses for them, override general
methods such as toString and equals with appropriate
definitions

Use abstract classes to represent general concepts that
lower classes have in common

Use visibility modifiers carefully to provide needed access
without violating encapsulation
240
CLH GUI slides
Restricting Inheritance

The final modifier can be used to curtail inheritance

If the final modifier is applied to a method, then that
method cannot be overridden in any descendent classes

If the final modifier is applied to an entire class, then that
class cannot be used to derive any children at all


Thus, an abstract class cannot be declared as final
These are key design decisions, establishing that a method
or class should be used as is
241
CLH GUI slides
The Component Class
Hierarchy

The Java classes that define GUI components are part of a
class hierarchy

Swing GUI components typically are derived from the
JComponent class which is derived from the Container
class which is derived from the Component class

Many Swing components can serve as (limited) containers,
because they are derived from the Container class

For example, a JLabel object can contain an ImageIcon
242
CLH GUI slides
The Component Class
Hierarchy

An applet is a good example of inheritance

Recall that when we define an applet, we extend the
Applet class or the JApplet class

The Applet and JApplet classes already handle all the
details about applet creation and execution, including:

interaction with a Web browser

accepting applet parameters through HTML

enforcing security restrictions
243
CLH GUI slides
The Component Class Hierarchy

Our applet classes only have to deal with issues that
specifically relate to what our particular applet will do

When we define paintComponent method of an applet,
we are actually overriding a method defined originally in the
JComponent class and inherited by the JApplet class
244
CLH GUI slides
Event Processing

Polymorphism plays an important role in the development
of a Java graphical user interface

As we've seen, we establish a relationship between a
component and a listener:
JButton button = new JButton();
button.addActionListener(new MyListener());

Note that the addActionListener method is accepting
a MyListener object as a parameter

In fact, we can pass the addActionListener method
any object that implements the ActionListener
interface
245
CLH GUI slides
Event Processing

The source code for the addActionListener method
accepts a parameter of type ActionListener (the
interface)

Because of polymorphism, any object that implements that
interface is compatible with the parameter reference
variable

The component can call the actionPerformed method
because of the relationship between the listener class and
the interface

Extending an adapter class to create a listener represents
the same situation; the adapter class implements the
appropriate interface already
246
CLH GUI slides
Containment Hierarchies

The way components are grouped into containers and the
way those containers are nested within each other
establishes the containment hierarchy for the GUI

Each container can have its own layout manager

The appearance of a GUI is determined by:


the containment hierarchy

the layout manager of each container

the properties of individual components
All of these issues work together to determine the final
visual effect
247
CLH GUI slides
The BorderDemo Program
248
CLH GUI slides
Borders

A border can be put around any Swing component to
define how the edges of the component should be drawn

Borders can be used effectively to group components
visually

The BorderFactory class contains several static
methods for creating border objects

A border is applied to a component using the
setBorder method
249
CLH GUI slides
Borders



An empty border

buffers the space around the edge of a component

otherwise has no visual effect
A line border

surrounds the component with a simple line

the line's color and thickness can be specified
An etched border

creates the effect of an etched groove around a
component

uses colors for the highlight and shadow
250
CLH GUI slides
Borders



A bevel border

can be raised or lowered

uses colors for the outer and inner highlights and
shadows
A titled border

places a title on or around the border

the title can be oriented in many ways
A matte border

specifies the sizes of the top, left, bottom, and right
edges of the border separately

uses either a solid color or an image
251
CLH GUI slides
Borders


A compound border

is a combination of two borders

one or both of the borders can be a compound border
See BorderDemo.java (page 355)
252
CLH GUI slides
public static void main (String[] args)
{
JPanel panel = new JPanel();
panel.setLayout (new GridLayout (0, 2, 5, 10));
panel.setBorder (BorderFactory.createEmptyBorder (5, 5, 5, 5));
JPanel p1 = new JPanel();
p1.setBorder (BorderFactory.createLineBorder (Color.red, 3));
p1.add (new JLabel ("Line Border"));
panel.add (p1);
253
CLH GUI slides
JPanel p2 = new JPanel();
p2.setBorder (BorderFactory.createEtchedBorder ());
p2.add (new JLabel ("Etched Border"));
panel.add (p2);
JPanel p3 = new JPanel();
p3.setBorder (BorderFactory.createRaisedBevelBorder ());
p3.add (new JLabel ("Raised Bevel Border"));
panel.add (p3);
254
CLH GUI slides
JPanel p4 = new JPanel();
p4.setBorder (BorderFactory.createLoweredBevelBorder
());
p4.add (new JLabel ("Lowered Bevel Border"));
panel.add (p4);
JPanel p5 = new JPanel();
p5.setBorder (BorderFactory.createTitledBorder ("Title"));
p5.add (new JLabel ("Titled Border"));
panel.add (p5);
255
CLH GUI slides
JPanel p6 = new JPanel();
TitledBorder tb = BorderFactory.createTitledBorder ("Title");
tb.setTitleJustification (TitledBorder.RIGHT);
p6.setBorder (tb);
p6.add (new JLabel ("Titled Border (right)"));
panel.add (p6);
JPanel p7 = new JPanel();
Border b1 = BorderFactory.createLineBorder (Color.blue, 2);
Border b2 = BorderFactory.createEtchedBorder ();
p7.setBorder (BorderFactory.createCompoundBorder (b1, b2));
p7.add (new JLabel ("Compound Border"));
panel.add (p7);
256
CLH GUI slides
JPanel p8 = new JPanel();
Border mb = BorderFactory.createMatteBorder (1, 5, 1, 1,
Color.yellow);
p8.setBorder (mb);
p8.add (new JLabel ("Matte Border"));
panel.add (p8);
}
}
257
CLH GUI slides
Tiled Pictures

Consider the task of repeatedly displaying a set of images in
a mosaic


Three quadrants contain individual images
Upper-left quadrant repeats pattern

The base case is reached when the area for the images
shrinks to a certain size

See TiledPictures.java (page 594)
258
CLH GUI slides
Tiled Pictures
259
CLH GUI slides
Fractals

A fractal is a geometric shape made up of the same pattern
repeated in different sizes and orientations

The Koch Snowflake is a particular fractal that begins with
an equilateral triangle

To get a higher order of the fractal, the sides of the triangle
are replaced with angled line segments

See KochSnowflake.java (page 597)
See KochPanel.java (page 600)

260
CLH GUI slides
Koch Snowflakes
< x5 , y5 >
< x 5 , y5 >
< x 4 , y4 >
Becomes
< x3 , y 3 >
< x 2 , y2 >
< x1 , y1 >
< x 1 , y1 >
261
CLH GUI slides
Koch Snowflakes
262
CLH GUI slides
Koch Snowflakes
263
CLH GUI slides
The Component Class Hierarchy

The Java classes that define GUI components are part of a
class hierarchy

Swing GUI components typically are derived from the
JComponent class which is derived from the Container
class which is derived from the Component class

Many Swing components can serve as (limited) containers,
because they are derived from the Container class
264
CLH GUI slides
Graphics Class Hierarchy (Swing)
AWTEvent
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
265
CLH GUI slides
JComponent
.
JCheckBoxMenuItem
AbstractButton
JMenuItem
JMenu
JButton
.JRadioButtonMenuItem
.JToggleButton
JCheckBox
JRadioButton
.JEditorPane
JComponent
.JTextComponent
.JTextField
.JPasswordField
.JTextArea
.JLabel
.JList
.JComboBox
.JMenuBar
.JPanel
.JOptionPane
.JScrollBar
.JScrollPane
.JPopupMenu
.JSeparator
.JSlider
.JTabbedPane
.JRootPane
.JPane
.JProgressBar
.JToolBar
.JSplitPane
.JTable
.JTree
.JColorChooser
.JInternalFrame
.JToolTip
.JLayeredPane
.JTableHeader
.JFileChooser
266
CLH GUI slides
AWT (Optional)
AWTEvent
Font
FontMetrics
Object
Color
Graphics
Component
Container
Panel
Applet
Button
Window
Frame
Label
TextField
Dialog
FileDialog
TextComponent
List
TextArea
Choice
CheckBox
LayoutManager
CheckBoxGroup
Canvas
MenuComponent
Scrollbar
MenuItem
Menu
MenuBar
267
CLH GUI slides
Related documents
14 - crossword
14 - crossword
User Interfaces
User Interfaces
Unit 1 Plan/Study Guide
Unit 1 Plan/Study Guide
Rule * Based GUI Modification
Rule * Based GUI Modification
Computer Basics
Computer Basics
Download
advertisement