1

CSC 413 - Software Development

6. Introduction to GUI Development

2/10/18

John Roberts

2
Overview
• Swing

• Event Driven Programming

• Layouts

• Calculator Example

• Paint Example

3
Overview

• Part of Java Foundation Classes (JFC)

• Provides a rich set of GUI components

• Used to create Java programs with a GUI

 4
Features

• Components: Table, list, tree, button, label, checkbox,

etc.

• Java 2D API: Images, figures, animation

• Pluggable look and feel - can use samples or create your

own

5
Overview
• Swing

• Event Driven Programming

• Layouts

• Calculator Example

• Paint Example

6
Event Driven Programming

• When you do something, an event is generated - that

event drives the program

• e.g. Pressing a button “makes something happen”

• Programmers can write listeners that allow us to

connect to a control’s action (event) with code

• We’ll look at ActionListeners, MouseListeners,

and MouseMotionListeners
 7
Event Driven Programming

• We may add listeners to controls to drive the program:


someButton.addActionListener( listener )

panel.addMouseListener( listener )

// etc…

• Where listener is an object that implements the appropriate

interface

• Example: ActionListener interface


void actionPerformed( ActionEvent event )

• We will look at some examples in the small example projects in

a minute

8
Overview
• Swing

• Event Driven Programming

• Layouts

• Calculator Example

• Paint Example

9
Layouts

• Java provides some layout managers to help us organize

components in our UI

• Containers (JFrames and Panels, typically) provide

a .setLayout() method that takes an object that
implements the LayoutManager interface

• Container’s add method takes arguments specific to the

layout (we’ll see some examples shortly)
 10 Images from oracle docs
FlowLayout

• Default layout

• Puts components in a row, sized at their preferred size

• If the horizontal space in the container is too small to put

all of the components in one row, FlowLayout will use
multiple rows

11
BorderLayout

• Border layouts have five areas: PAGE_START,

PAGE_END, LINE_START, LINE_END, and CENTER,
provided as static constants on the BorderLayout
class

• Just in case you see the points of the compass

(NORTH, SOUTH, EAST, WEST) - these used to be used
instead of the above

12
GridLayout

• Places components in a grid of cells, where each

component takes all available space in its cell, and each
cell is the same size
 13
Layout Composition

• Layout types may be composed for more complex

layouts

• We’ll see this in the first example

14
Reference

• https://docs.oracle.com/javase/tutorial/uiswing/layout/
visual.html

15
Overview
• Swing

• Event Driven Programming

• Layouts

• Calculator Example

• Paint Example
 16
Calculator

• Very basic calculator application

• The UI in our first assignment functions similarly - this

example is really bad code - lots of repetition; it’s made
*a little* better in the assignment…

17
Layout

• We will use both BorderLayout and GridLayout

• The BorderLayout will allow us to position the text

area at PAGE_START, and the button display in CENTER
(leaving PAGE_END, LINE_START, and LINE_END
empty)

• We’ll use another layout (GridLayout) for a Panel in

the CENTER of the BorderLayout

18
Layout

PAGE_START

CENTER
 19 This is your assignment

Implementation It’s bad because repetition and the UI is doing all the calculations (not SRP)
• Github Calculator.java

• The code in this example only works for add - let’s talk
about what needs to change in order to make it work for
all of the operations…

• Also, I said this code is bad - why?

20
Overview
• Swing

• Event Driven Programming

• Layouts

• Calculator Example

• Paint Example

21
Basic Paint

• Very basic painting application

• Github Paint
 22
Handling Mouse Events
• MouseListener interface (javadocs)

• void mouseClicked( MouseEvent e ) - mouse button clicked

(pressed and released)

• void mouseEntered( MouseEvent e ) - mouse enters a

component

• void mouseExited( MouseEvent e ) - mouse exits a component

• void mousePressed( MouseEvent e ) - mouse button pressed

(but not released)

• void mouseReleased( MouseEvent e ) - mouse button released

23
Handling Mouse Events

• MouseMotionListener interface (javadocs)

• void mouseDragged( MouseEvent e ) - mouse

button is pressed on a component and then dragged

• void mouseMoved( MouseEvent e ) - mouse

cursor has been moved onto a component but no
mouse buttons have been pushed

24
Paint Implementation

• Add a Panel, and obtain a reference to the Graphics

object on that Panel

• When the mousePressed event fires, save the startX

and startY coordinates (event.getX() and
event.getY())

• When the mouseDragged event fires, draw a line from

(startX, startY) to (event.getX(), event.getY())

• Then, update startX and startY

 25
Possible Improvements

• Add a color selection panel

• Add a menu with the ability to save