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