CIS016-1 – Principles of
Programming
Week 6
15/05/21
1
Agenda
Graphical User Interfaces I
Swing and AWT
Event-driven Programming
Listeners and Events
GUI Examples
2 15/05/21
Swing and AWT, Simple Input
GUI INPUT WITH
JOPTIONPANE
3 15/05/21
Keyboard Input Classes
There mainly two ways to develop interactive programs in
Java:
GUI classes (JOptionPane, JFrame)
Console Classes (Scanner)
Since any of these classes are not included in java.lang
package, we need to have an import statement at the
beginning.
Depending on which method to use, we need to start with
either of the following import statements.
import javax.swing.JOptionPane;
import javax.swing.JFrame;
import java.util.Scanner;
4 15/05/21
Warming up: A Simple Input Dialog
Keyboard input in Java can be achieved with a GUI
component, a dialog box (JOptionPane)
String aString =
JOptionPane.showInputDialog(“Please enter
something”);
See Person package and PersonDemo.java
5 15/05/21
GUI Introduction
A GUI (Graphical User Interface) is a windowing system that
interacts with the user
The Java AWT (Abstract Window Toolkit) package is the
original Java package for GUIs
The Swing package is an improved version of the AWT.
However, it does not completely replace the AWT. Some AWT
classes are replaced by Swing classes, but other AWT classes are
needed when using Swing
Swing is now part of the Java Foundation Classes (JFC)
Swing GUIs are designed using a form of object-oriented
programming known as event-driven programming
6 15/05/21
Hierarchy of
Taken from Savitch, “Absolute Java”
Swing and
AWT Classes
7 15/05/21
Copyright © 2008 Pearson Addison-Wesley. All rights reserved
EVENT-DRIVEN
PROGRAMMING AND GUIS
8 15/05/21
Events and Event-driven Programming
Event-driven programming is a programming style
that uses a signal-and-response approach to
programming
An event is an object that acts as a signal to another
object known as a listener
The sending of an event is called firing the event
The object that fires the event is often a GUI
component, such as a button that has been clicked
9 15/05/21
Listeners
A listener object performs some action in response
to the event
A given component (ie. a button) may have any
number of listeners
Each listener may respond to a different kind of
event
Or multiple listeners might may respond to the
same events
10 15/05/21
Exception Objects
Handling exceptions (discussed later) is a further
example of event-driven programming
An exception object is an event
The throwing of an exception is an example of firing an
event
The listener for an exception object is the catch
block that catches the event
11 15/05/21
Event Handlers
A listener object has methods that specify what will
happen when events of various kinds are received
by it
These methods are called event handlers
The programmer using the listener object will
define or redefine these event-handler methods
12 15/05/21
Event Firing and Event Listening
Taken from Savitch, “Absolute Java”
13 15/05/21
Copyright © 2008 Pearson Addison-Wesley. All rights reserved
Event-driven Programming vs
Sequential Execution
Event-driven programming is very different from
most programming seen up until now
So far programs have consisted of a list of statements
executed sequentially
Changes in the sequence were controlled by the logic
of the program
Loops (for, while, do-while)
Conditions (if-else, switch)
Method invocation
14 15/05/21
Event-driven Programming vs
Sequential Execution
In event-driven programming, objects are created that
can fire events, and listener objects are created that
can react to the events
The program itself no longer determines the order in
which things can happen
Instead, the events (ie. triggered by the user
interacting with the system through the GUI)
determine the order
15 15/05/21
Event-driven Programming
In an event-driven program, the next thing that
happens depends on the next event
In particular, methods are defined that will never be
explicitly invoked in any program. Instead, methods
are invoked automatically when an event signals that the
method needs to be called
16 15/05/21
GUIS WITH JAVA SWING AND
JFRAME
17 15/05/21
A Simple Window
A simple window can consist of an object of the
JFrame class
A JFrame object includes a border and the usual
three buttons for minimizing, changing the size of,
and closing the window
The JFrame class is found in the javax.swing
package
JFrame objects instantiate as:
JFrame firstWindow = new JFrame();
18 15/05/21
A Simple Window
A JFrame can have components added to it, such as
buttons, menus, and text labels
These components can be programmed for action
firstWindow.add(endButton);
It can be made visible using the setVisible method
firstWindow.setVisible(true);
19 15/05/21
A First Swing Demonstration
Taken from Savitch, “Absolute Java”
20 15/05/21
Copyright © 2008 Pearson Addison-Wesley. All rights reserved
A First Swing Demonstration
Taken from Savitch, “Absolute Java”
21 15/05/21
Copyright © 2008 Pearson Addison-Wesley. All rights reserved
A First Swing Demonstration
Taken from Savitch, “Absolute Java”
22 15/05/21
Copyright © 2008 Pearson Addison-Wesley. All rights reserved
A First Swing Demonstration
Taken from Savitch, “Absolute Java”
23 15/05/21
Copyright © 2008 Pearson Addison-Wesley. All rights reserved
Pixels, Resolution and Size
A pixel is the smallest unit of space on a screen
Both the size and position of Swing objects are measured in
pixels
The more pixels on a screen, the greater the screen resolution
A high-resolution screen of fixed size has many pixels
Therefore, each one is very small
A low-resolution screen of fixed size has fewer pixels
Therefore, each one is much larger
A two-pixel figure on a low-resolution screen will look larger than
a two-pixel figure on a high-resolution screen
Our example program used 200x300 pixels
24 15/05/21
Close-Window Button
The following line from the FirstSwingDemo program ensures that
when the user clicks the close-window button, nothing happens
firstWindow.setDefaultCloseOperation( J
Frame.DO_NOTHING_ON_CLOSE);
If this was not set, the default action would be
JFrame.HIDE_ON_CLOSE
This would make the window invisible and inaccessible, but would not
end the program
Therefore, given this scenario, there would be no way to click the
"Click to end program" button
Note that the close-window and the other two accompanying buttons
are part of the JFrame object, and not separate buttons
25 15/05/21
GUI Components - JFrame
The JFrame class is the fundamental GUI
component that can be used as the GUI frame, or
window.
It needs to be imported from javax.swing.*;
It contains every GUI component
26 15/05/21
GUI Components – JButton,
Container
The Jbutton class is a GUI component that can be
placed directly in a Jframe or in a Container
(ContentPane).
A Container or ContentPane holds components of a
JFrame object
It can contain different layouts
It also needs to be imported from javax.swing.*;
27 15/05/21
JButton and Events
Pressing the button can cause an action to take place.
The action is described in a Listener that is listening for
an Event.
The sequence is:
User interaction with a GUI object – the operating system
detects the hardware action and passes the information to
the JVM (the Java virtual machine) and hence to the
program
The GUI object then produces an event object that is
captured by the ActionListener object in the program which
then executes the programmed action
28 15/05/21
GUI Example – Simple GUI
FirstSwingDemo is a very simple GUI example in
which a frame contains a single JButton to close
the window.
See FirstSwingDemo
29 15/05/21
GUI Components -
JTextArea
One of the actions we could decide to do would be
to capture user input from a JTextArea and
change it or store it or perhaps just to change the
background colour of the JFrame.
The following example shows how to change the
background JFrame colour.
See FirstGUI
30 15/05/21
GUI Components – Event Handling
The event caused by clicking on JButton is handled
by registering a Listener with the JButton object.
The ActionListener is programmed with the action to
take place when the user click event is detected.
31 15/05/21
GUI Components – Event Handling
The code that does this is:
myButton.addActionListener(new ActionListener()
{
public void actionPerformed( ActionEvent e)
{
con.setBackground(Color.red);
}
});
Here we implement the action listener as an anonymous inner
class
Anonymous – no explicit class name
Inner – a class defined within a class
Different GUI object have different Listeners and action
methods.
32 15/05/21
GUI Components -
JTextArea
We would like to capture textual user input
We can do this using a JTextField
We can change the text in a field or store it or
perhaps just perform some other operation, ie. to
change the background colour of the JFrame.
33 15/05/21
GUI Components – Event Handling
We can use the actionPerformed method to
process the contents of a JTextField and display
the contents in another JTextField.
We can also introduce another JButton to do this
showing how different objects are addressed
See NextGUI
34 15/05/21
GUI Components – JLabel
If we want to just display some text (similar
to System.out.print), we can use
JLabel
35 15/05/21
GUI Components – Layout Manager
This works in terms of the functionality we
specified but it doesnt look good because the
layout is unsophisticated.
Layout managers control the GUI appearance
as the next example shows.
This example also looks at setting Label borders
and how to test equality in Strings.
See LastGUI
36 15/05/21
Grid Layout and Container
Example
con
GridLayout(2,1) colourPanel
GridLayout(1,2)
textPanel
GridLayout(2,3)
37 15/05/21
To Take Home
Event-based Programming
Swing GUI demos (frames, buttons, text
input)
Event-based programming with listeners and
action events
38 15/05/21
Further Reading
A useful source is the Java Swing tutorial at
http://docs.oracle.com/javase/tutorial/uiswing/inde
x.html
Chapter 17 and 18 of Savitch’s “Absolute Java”
(5th edition) cover Swing GUIs
39 15/05/21