ITI 1121. Introduction to Computing II – subtitle
ITI 1121. Introduction to Computing II
Graphical User Interface (GUI)
by
Marcel Turcotte
Version April 4, 2020
Preamble
Preamble
Overview
Overview
Graphical User Interface (GUI)
We explore the application of previously seen concepts, including interfaces and
inheritance, to the design of graphical user interfaces. We will see that graphical user
interfaces require a special style of programming called “event-driven programming”.
General objective:
This week you will be able to design the graphical user interface of a simple
application.
1 39
Preamble
Learning objectives
Learning objectives
Apply inheritance concepts to produce the visual rendering of a graphical user
interface.
Design an event handler to produce the necessary behaviors following a user action.
2 39
Preamble
Plan
Plan
1 Preamble
2 Graphic rendering
3 LayoutManager
4 Event-oriented programming
5 Prologue
3 39
Graphic rendering
AWT, Swing, and JavaFX
Abstract Window Toolkit (AWT) is the oldest class library used to build graphical
interfaces in Java. AWT has been part of Java since its very beginning.
Swing is an improved and newer library.
JavaFX is the latest.
4 39
JComponent
A graphical element is called a graphical component. Consequently, there is a class
named JComponent which defines the characteristics co mmunes of the
components.
Subclasses of JComponent include: JLabel, JList, JMenuBar, JPanel, JScrollBar,
JTextComponent, etc.
JComponent
JLabel JList JPanel JTextComponent
JEditorPane JTextArea JTextField
5 39
javax.swing.JComponent
JLabel JList JPanel JTextComponent
JEditorPane JTextArea JTextField
java.awt.Container
java.awt.Component
Object
AWT and Swing use inheritance heavily. The Component class defines the set of
methods common to graphical objects, such as setBackground(Color c) and
getX().
The class Container defines the behavior of graphical objects that can contain
graphical objects, the class defines the methods add(Component component) and
setLayout(LayoutManager mgr), among others.
6 39
Hello World (1.0)
The JFrame class describes a graphical element with a title and a border.
import j a v a x . swing . JFrame ;
pub l i c c l a s s H e l l o {
pub l i c s t a t i c vo id main ( S t r i n g [ ] a r g s ) {
JFrame f ;
f = new JFrame ( ” H e l l o World ! ” ) ;
f . s e t S i z e ( 2 0 0 , 3 0 0 ) ;
f . s e t V i s i b l e ( t rue ) ;
}
}
Objects of the classes JFrame, JDialog and JApplet cannot be inserted inside other
graphical components (we say that they are “top-level components”).
7 39
Hello World (1.0)
8 39
DrJava: Hello World (1.0)
We can also experiment from the interaction window in DrJava ∗. Run the following
statements one by one.
> import j a v a x . swing . JFrame ;
> JFrame f = new JFrame ( ” H e l l o World ! ” ) ;
> f . s e t S i z e ( 1 0 0 , 2 0 0 ) ;
> f . s e t V i s i b l e ( t rue ) ;
> f . s e t V i s i b l e ( f a l s e ) ;
> f . s e t V i s i b l e ( t rue ) ;
> f . s e t V i s i b l e ( f a l s e ) ;
You will see that the window is not visible at first.
∗Alternatively, you can use jshell.
9 39
DrJava: Hello World (1.0)
10 39
Hello World (2.0):
An illustration of inheritance
A specialized class of JFrame with all the characteristics required for this
application.
The constructor is responsible for determining the initial appearance of the window.
pub l i c c l a s s MyFrame extends JFrame {
pub l i c MyFrame( S t r i n g t i t l e ) {
super ( t i t l e ) ;
s e t S i z e ( 2 0 0 , 3 0 0 ) ;
s e t V i s i b l e ( t rue ) ;
}
}
11 39
Hello World (2.0)
pub l i c c l a s s MyFrame extends JFrame {
pub l i c MyFrame( S t r i n g t i t l e ) {
super ( t i t l e ) ;
s e t S i z e ( 2 0 0 , 3 0 0 ) ;
s e t V i s i b l e ( t rue ) ;
}
}
that we use like this:
pub l i c c l a s s Run {
pub l i c s t a t i c vo id main ( S t r i n g [ ] a r g s ) {
MyFrame f ;
j = new MyFrame( ” H e l l o World ” ) ;
}
}
12 39
Hello World (2.0)
13 39
Adding graphic elements
MyFrame is a specialization of the class JFrame, which is itself a specialization of the
class Frame, which specializes the class Window, which itself specializes Container.
Thus, MyFrame can contain other graphical elements.
import j a v a x . swing . ∗ ;
pub l i c c l a s s MyFrame extends JFrame {
pub l i c MyFrame( S t r i n g t i t l e ) {
super ( t i t l e ) ;
add (new JLabe l ( “Some t e x t ! ” ) ) ; // <−−− s e t S i z e ( 2 0 0 , 3 0 0 ) ; s e t V i s i b l e ( t rue ) ; } } Which method add is that? 14 39 LayoutManager LayoutManager When adding graphical elements, you want to control their layout. We call layout manager, the object that controls the layout and size of objects in a container. LayoutManager is a interface and Java provides over 20 implementations for it. The main classes are: FlowLayout adds the graphical elements from left to right and top to bottom; this is the default manager for JPanel (the simplest of the containers). BorderLayout divides the container into 5 zones: north, south, east, west and center, the default for the class JFrame. GridLayout divides the container into m × n zones. 16 39 BorderLayout import j a v a . awt . ∗ ; import j a v a x . swing . ∗ ; pub l i c c l a s s MyFrame extends JFrame { pub l i c MyFrame( S t r i n g t i t l e ) { super ( t i t l e ) ; add (new JLabe l ( " Nord " ) , BorderLayout .NORTH) ; add (new JLabe l ( "Sud" ) , BorderLayout .SOUTH) ; add (new JLabe l ( " Est " ) , BorderLayout . EAST ) ; add (new JLabe l ( " Ouest " ) , BorderLayout .WEST) ; add (new JLabe l ( " Cent re " ) , BorderLayout .CENTER ) ; s e t S i z e ( 2 0 0 , 3 0 0 ) ; s e t V i s i b l e ( t rue ) ; } } 17 39 FlowLayout import j a v a . awt . ∗ ; import j a v a x . swing . ∗ ; pub l i c c l a s s MyFrame extends JFrame { pub l i c MyFrame( S t r i n g t i t l e ) { super ( t i t l e ) ; s e tLayou t (new FlowLayout ( ) ) ; add (new JLabe l ( "−a−" ) ) ; add (new JLabe l ( "−b−" ) ) ; add (new JLabe l ( "−c−" ) ) ; add (new JLabe l ( "−d−" ) ) ; add (new JLabe l ( "−e−" ) ) ; s e t S i z e ( 2 0 0 , 3 0 0 ) ; s e t V i s i b l e ( t rue ) ; } } 19 39 JPanel: create complex visual renderings The class JPanel defines the simplest container. A JPanel is used to group together several graphical elements and associate them with a layout manager. 21 39 import j a v a . awt . ∗ ; import j a v a x . swing . ∗ ; pub l i c c l a s s MyFrame extends JFrame { pub l i c MyFrame( S t r i n g t i t l e ) { super ( t i t l e ) ; s e tLayou t (new BorderLayout ( ) ) ; add (new JLabe l ( " Nord " ) , BorderLayout .NORTH) ; add (new JLabe l ( " Est " ) , BorderLayout . EAST ) ; add (new JLabe l ( " Ouest " ) , BorderLayout .WEST) ; add (new JLabe l ( " Cent re " ) , BorderLayout .CENTER ) ; JPane l p = new JPane l ( ) ; // <−−−− p . s e tLayou t (new FlowLayout ( ) ) ; p . add (new JLabe l ( "−a−" ) ) ; p . add (new JLabe l ( "−b−" ) ) ; p . add (new JLabe l ( "−c−" ) ) ; p . add (new JLabe l ( "−d−" ) ) ; add (p , BorderLayout .SOUTH) ; // <−−−− s e t S i z e ( 2 0 0 , 3 0 0 ) ; s e t V i s i b l e ( t rue ) ; } } 22 39 Event-oriented programming Event-oriented programming (event-driven programming) Graphical applications are programmed in a paradigm that differs from other types of applications. The application is almost always waiting for an action from the user; click on a button for example. An event is an object that represents the user’s action within the graphical application. 24 39 Event-oriented programming In Java, the graphical elements (Component) are the source of the events. An object is said to either generate an event or be the source of one. When a button is pressed and released, AWT sends an instance of the class ActionEvent to the button, through the processEvent method of the object of the class JButton. 25 39 Callback methods (functions) How do you associate actions with graphical elements? Let’s put ourselves in the shoes of the person in charge of the Java JButton class implementation. When the button is pressed and released, the button will receive an ActionEvent object, via a call to its processEvent(ActionEvent e) method. What to do? We’d have to make a call to a method of the application. That method will do the necessary processing. What concept can we use in order to force the programmer to implement a method with a well-defined signature? (A specific name, a specific list of parameters) 26 39 ActionListener Indeed, the concept of interface can be used to force the implementation of a method, here actionPerformed. pub l i c i n t e r f a c e A c t i o n L i s t e n e r extends E v e n t L i s t e n e r { /∗∗ ∗ I nvoked when an a c t i o n o c c u r s . ∗/ pub l i c vo id ac t i onPe r f o rmed ( Act ionEvent e ) ; } 27 39 Answering machine analogy We are still in the skin of the programmer of the Java JButton class implementation. Our strategy will be the following: let’s ask the application to leave us its “coordinates” (addListener) and we will call it back (actionPerformed) when the button has been pressed. The button’s addListener(. . . ) method allows an object to register as a listener: “when the button has been pressed, call me” What is the parameter type of the addListener(. . . ) method? Um, how will you interact with this listener? Its method actionPerformed(ActionEvent e)! This object will have to implement the ActionListener interface! 28 39 Example: Square In order to better understand, we will create a small application displaying the square of a number! 29 39 Here are the declarations necessary to create the graphical aspect of the application. pub l i c c l a s s Square extends JFrame { p r i v a t e J T e x t F i e l d i n p u t = new J T e x t F i e l d ( ) ; pub l i c Square ( ) { super ( " Square GUI" ) ; s e tLayou t (new Gr idLayout ( 1 , 2 ) ) ; add ( i n p u t ) ; JButton button = new JButton ( " Square " ) ; add ( but ton ) ; pack ( ) ; s e t V i s i b l e ( t rue ) ; } } 30 39 Doing the work! The class JTextField has a method getText(), which we will use to obtain the user’s string. As well as a method setText(String), which we will use to replace the user’s string by its square. So this is the content of the square method: p r i v a t e vo id squa r e ( ) { i n t v = I n t e g e r . p a r s e I n t ( i n p u t . getText ( ) ) ; i n p u t . s e tTex t ( I n t e g e r . t o S t r i n g ( v∗v ) ) ; } } 31 39 import j a v a . awt . ∗ ; import j a v a x . swing . ∗ ; pub l i c c l a s s Square extends JFrame { p r i v a t e J T e x t F i e l d i n p u t = new J T e x t F i e l d ( ) ; pub l i c Square ( ) { super ( " Square GUI" ) ; s e tLayou t (new Gr idLayout ( 1 , 2 ) ) ; add ( i n p u t ) ; JButton button = new JButton ( " Square " ) ; add ( but ton ) ; pack ( ) ; s e t V i s i b l e ( t rue ) ; } p r i v a t e vo id squa r e ( ) { i n t v = I n t e g e r . p a r s e I n t ( i n p u t . getText ( ) ) ; i n p u t . s e tTex t ( I n t e g e r . t o S t r i n g ( v∗v ) ) ; } } 32 39 What’s missing from our application? What’s missing from our application? The application must know to call the method square when the button is pressed! 33 39 import j a v a . awt . even t . ∗ ; import j a v a x . swing . ∗ ; pub l i c c l a s s Square extends JFrame implements A c t i o n L i s t e n e r { p r i v a t e JButton button = new JButton ( " Square " ) ; p r i v a t e J T e x t F i e l d i n p u t = new J T e x t F i e l d ( ) ; pub l i c Square ( ) { super ( " Square GUI" ) ; s e tLayou t (new Gr idLayout ( 1 , 2 ) ) ; add ( but ton ) ; add ( i n p u t ) ; but ton . a d d A c t i o n L i s t e n e r ( t h i s ) ; pack ( ) ; s e t V i s i b l e ( t rue ) ; } pub l i c vo id ac t i onPe r f o rmed ( Act ionEvent e ) { i n t v = I n t e g e r . p a r s e I n t ( i n p u t . getText ( ) ) ; i n p u t . s e tTex t ( I n t e g e r . t o S t r i n g ( v∗v ) ) ; } } JFrame.EXIT_ON_CLOSE pub l i c Square ( ) { super ( " Square GUI" ) ; s e t D e f a u l t C l o s e O p e r a t i o n ( JFrame . EXIT_ON_CLOSE ) ; s e tLayou t (new Gr idLayout ( 1 , 2 ) ) ; add ( button ) ; add ( i n p u t ) ; but ton . a d d A c t i o n L i s t e n e r ( t h i s ) ; pack ( ) ; s e t V i s i b l e ( t rue ) ; } 35 39 Prologue Summary The classes of AWT and Swing are organized hierarchically (inheritance). The placement of the graphical elements is under the control of a manager, an object that realizes the LayoutManager interface. Graphical user applications are programmed according to the event driven programming model. A class must realize the interface ActionListener This class must implement the method actionPerformed. The reference of an object whose class realizes the ActionListener interface is provided to the button via the method addActionListener. 36 39 Next module Parameterized types (« generics ») 37 39 References I E. B. Koffman and Wolfgang P. A. T. Data Structures: Abstraction and Design Using Java. John Wiley & Sons, 3e edition, 2016. 38 39 Marcel Turcotte Marcel. School of Electrical Engineering and Computer Science (EECS) University of Ottawa 39 / 39 Marcel. Preamble Overview Learning objectives Plan Graphic rendering LayoutManager Event-oriented programming Prologue