Department of Computer Science

Dr. John S. Mallozzi

CS 202HY
Computer Science II

5. Graphical User Interfaces

Basics, Layouts, Components
Frames

• Overview
• Frame methods
• Drawing text using a label
• Drawing in a frame

Copyright © 2008 by John S. Mallozzi 2

Overview
• A modern graphical user interface (GUI) is based
on drawing windows on the screen
• Each GUI application has a main window
• in Java, the main window is called a frame
• To write a program, you first construct a frame,
then send it messages to give it a particular size,
appear in a particular part of the screen, etc
• You place drawings into a frame by adding
components, which are things like text boxes,
buttons, etc (each of which is a small window)

Copyright © 2008 by John S. Mallozzi 3

Constructing a Frame
• A frame is an object constructed using the class
JFrame, which is part of the “Swing” library,
javax.swing, which you must import
• After you create a frame, you should
– Set its title, using setTitle
– Set its size, using setSize
– Set its location, using setLocation
– Tell Java to end the program when someone closes
the window, using setDefaultCloseOperation
– Tell Java to make the window visible using
setVisible

Copyright © 2008 by John S. Mallozzi 4

Frame Methods
• setTitle
– public void setTitle(String titleToUse)
– Places titleToUse in “blue bar” at top of frame
• setSize
– public void setSize(int width, int height)
– Makes the window width pixels wide and height pixels
high
• setLocation
– public void setLocation(int fromLeft, int fromTop)
– Places window fromLeft pixels from the left side of
the screen and fromTop pixels from the top of the
screen

Copyright © 2008 by John S. Mallozzi 5

Frame Methods
• setDefaultCloseOperation
– public void setDefaultCloseOperation(int operation)
– Depending on the value of operation, tells Java what
to do when user closes the window (by pressing in
upper-right-hand corner of window)
– Values are given using named constants
– To end the program, use JFrame.EXIT_ON_CLOSE
• setVisible
– public void setVisible(boolean whetherToShow)
– Shows window or not, depending on value of
whetherToShow (true or false)
• And many more… Documentation
Copyright © 2008 by John S. Mallozzi 6
Example

Copyright © 2008 by John S. Mallozzi 7

Drawing Text using a Label
• You can't work directly with a frame
– You don't put text directly into a frame
– You don't draw directly into a frame
• Instead
– Put text or drawings into a component
– Add the component to the frame
• For text, the component you use is a label
• The class JLabel holds text
– Construct a JLabel containing the text you want
– Add the label to the frame
Documentation
Copyright © 2008 by John S. Mallozzi 8
Example

Copyright © 2008 by John S. Mallozzi 9

Drawing Text using a Label
• You can use methods setFont and setColor of
JLabel to change the appearance of the text
• Class Font is in the “awt” library
– Make a new font, using a name for the font (such as
“arial”), a style (such as italics), and a point size
(such as 64)
• Class Color is also in the “awt” library
– Each color is specified by three numbers – the
amounts of red, green, and blue in the color
– Instead of the three numbers, you can use one of the
named constants, Color.RED, Color.BLUE, etc
Font Documentation Color Documentation
Copyright © 2008 by John S. Mallozzi 10
Example

Copyright © 2008 by John S. Mallozzi 11

Drawing in a Frame
• The component you use to draw in a frame is a
panel
• This is an object of class JPanel
• In order to draw, you must have a graphics
context, which is an object of type Graphics
• Steps
– Make a JPanel object, and obtain a graphics context
– Use the context to put graphics into the panel
– Add the panel to the frame

Copyright © 2008 by John S. Mallozzi 12

Shapes and Colors
• The Java geometry library (java.awt.geom)
provides a number of basic shapes
– Points, lines, rectangles, ellipses (which include
circles), and others
– The class names have 2D appended, and you have to
indicate what kind of numbers you are using for
coordinates (Double or Float)
– Example: the class for a line specified using numbers
of type double is called Line2D.Double

Copyright © 2008 by John S. Mallozzi 13

Example

Copyright © 2008 by John S. Mallozzi 14

Example (continued)

Copyright © 2008 by John S. Mallozzi 15

Shapes and Colors
• If you change the window – by resizing it, for
example – the drawings disappear
• You must tell Java how to repaint your picture
when necessary
• Instead of drawing a panel in the program, you
must make a new class that extends the
JPanel class, and write a paintComponent
method within this class
– Context is a parameter – no need to get it
• The method contains the same code formerly
placed in the program, except for getting the
graphics context

Copyright © 2008 by John S. Mallozzi 16

Example

Copyright © 2008 by John S. Mallozzi 17

Reading Input
• In a graphical program, there are several ways
to read input
• A simple way is to use an option pane input
dialog:
– Use the showInputDialog method of the JOptionPane
class (in the Swing library)
– The method shows a dialog box, which asks for input
and returns what is entered as a string
• A dialog of this kind forces the user to deal with
it before doing anything else

Copyright © 2008 by John S. Mallozzi 18

Example

Copyright © 2008 by John S. Mallozzi 19

Visual vs. Numerical Information
• Visualization of information is very helpful
• A picture of some sort that represents numerical
information is frequently easier to interpret
• Programs to visualize information are therefore
very important
• Example: Information on an examination
– The number of grades in the categories F, D, C, B,
and A are 3, 4, 15, 9, 5
– Better: The percentages of grades in the categories
are 8.3%, 11.1%, 41.7%, 25%, and 13.9%
– Better yet: a picture

Copyright © 2008 by John S. Mallozzi 20

Picture – a Bar Graph

Copyright © 2008 by John S. Mallozzi 21

Bar Graph – main

Copyright © 2008 by John S. Mallozzi 22

Bar Graph Panel
Fields and Constructor

Copyright © 2008 by John S. Mallozzi 23

Bar Graph Panel
paintComponent

Copyright © 2008 by John S. Mallozzi 24

Spreadsheets
• An example of a program that makes use of
data visualization is a spreadsheet
• A spreadsheet allows its user to use a
rectangular table of rows and columns to enter
and display data
• It also allows calculations such as adding
elements of a row or column, to be specified
easily
• You can request various visualizations of your
data, such as a bar graph
Excel

Copyright © 2008 by John S. Mallozzi 25

Events And Listeners

• Using inheritance
• Event-driven programs
• Listeners
• Implementing and using listeners
• Using inner classes

Copyright © 2008 by John S. Mallozzi 26

Using Inheritance
• Review
– Main window of a Java GUI is called a frame
• A frame holds other GUI components
• The content pane of a frame is the part you can draw on
– Doesn't interfere with menus, etc
– A simple component that holds other components is a
panel
– You can make a panel and put it into a frame
• Instead of constructing a frame and changing it,
you can define your own subclass of JFrame

Copyright © 2008 by John S. Mallozzi 27

Panel into Frame

Copyright © 2008 by John S. Mallozzi 28

Inheriting from JFrame – main

Copyright © 2008 by John S. Mallozzi 29

Inheriting from JFrame –
Constructor

Copyright © 2008 by John S. Mallozzi 30

Event-driven Programs
• “Old-fashioned” programs are completely under
the control of the programmer
– Ordinarily, one statement is executed after another
– Changes in execution order are brought about using
conditional statements and loops
– When a method is called, execution of program
“waits” until the method finishes, then continues
• Modern programs – using a graphical user
interface (GUI) – are event-driven
• The controller of an event-driven program is the
GUI framework

Copyright © 2008 by John S. Mallozzi 31

Event-driven Programs
• The GUI framework is the (behind-the-scenes)
"main program"
– Your main method usually just gets thing started
• You write methods that react to events
– The user can perform any one of many different
actions, which your program cannot anticipate
– The GUI framework detects that an event has
occurred
– The framework “informs” your program, which can
then react to the event
– This is done by the framework, using your methods

Copyright © 2008 by John S. Mallozzi 32

Listeners
• Many events can occur
– Press mouse button, enter text, etc.
• The framework must inform your program
somehow
• If each of your objects were told about all
events, they would be overwhelmed with often
irrelevant information
– Example: only the window in which text is entered
would “care” that text was entered there
• An object that “cares” about an event, registers
a listener with the GUI framework
• Only listeners are informed about events
Copyright © 2008 by John S. Mallozzi 33
Implementing And Using Listeners
• Each listener is a class written by the
programmer
• In order that the framework know which method
to call, the listener class must implement a
particular interface
• Once a listener class is implemented, an object
of that type is created, and registered as a
listener
• Everything after creating original frame is event
driven – events occur, listeners are informed,
and their methods are called, by the framework
Documentation for MouseListener interface
Copyright © 2008 by John S. Mallozzi 34
Using Inner Classes
• Example: a "hello" message that changes to a
"goodbye" message when the user clicks it
• Several different classes are needed for the
event-driven approach, and these classes must
communicate
– The frame is the main application window and must
• Create a label to hold the messages
• Create and register a listener for the mouse click
– The label holds the message and must
• Be available to both the frame (which sets it up) and the
listener (which changes its message)
– The listener for a mouse click which must
• Be available to the frame (for creation and registration)
• React to a mouse click
Copyright © 2008 by John S. Mallozzi 35
Using Inner Classes
• Note that no part of your program actually calls
any listener methods – this is done by the
framework
• Except for the frame itself, the other classes are
not needed by any other class
• If the extra classes are made inner classes of
the frame class
– Their names will not “pollute” the environment
– Each of the classes can use the data of each of the
others

Copyright © 2008 by John S. Mallozzi 36

Example (1) – Constructor

Copyright © 2008 by John S. Mallozzi 37

Example (2) – An Inner Class

Copyright © 2008 by John S. Mallozzi 38

Example (3) – Listener Class

Copyright © 2008 by John S. Mallozzi 39

Layouts

• Basics
• Flow layout
• Border layout
• Other layouts

Copyright © 2008 by John S. Mallozzi 40

Basics
• A typical GUI application contains many
components
– Also called “controls” or “widgets”
– Examples: labels, buttons, text fields
• These components must be laid out, i.e., placed
on the screen
• Rather than specify exact locations on the
screen, you can leave placement to a layout
manager, which does the layout automatically
– Redone when window is redrawn or resized

Copyright © 2008 by John S. Mallozzi 41

Flow Layout

• A flow layout places components one after the

other, left-to-right and top-to-bottom
• If you put your content into a panel, a flow
layout will be used by default
• You can also tell Java to use a flow layout for a
component that would not otherwise use one

Copyright © 2008 by John S. Mallozzi 42

Example

Copyright © 2008 by John S. Mallozzi 43

Border Layout
• A border layout places components in different
“regions” chosen when you add them
• Sizes of added components will be changed
• You can change the layout of a panel – or just
place components into the frame directly, since
frames use border layouts by default

Copyright © 2008 by John S. Mallozzi 44

Giving a Panel a Border Layout

Copyright © 2008 by John S. Mallozzi 45

Using the Frame’s Border Layout

Copyright © 2008 by John S. Mallozzi 46

Other Layouts

• Border and flow layouts are generally all

you need
• Some other layouts you can use (see
documentation)
– Grid layout
– Grid bag layout
– Box layout
• (You don't actually use a box layout; you just use
a Box instead of a JPanel)

Copyright © 2008 by John S. Mallozzi 47

Components

• Panels
• Buttons
• Text components
• Choices
• Menus

Copyright © 2008 by John S. Mallozzi 48

Panels
• The standard content pane uses a border
layout, which changes sizes of components
• A panel uses a flow layout, which doesn’t
change sizes
• Solution: add components to panels, then add
the panels to the content pane
• The most important use of panels is to hold
several components in the same region

Copyright © 2008 by John S. Mallozzi 49

Example – No Panels

Copyright © 2008 by John S. Mallozzi 50

Example – Using Panels

Copyright © 2008 by John S. Mallozzi 51

Comparison of Output
• Without Panels

• With Panels

Copyright © 2008 by John S. Mallozzi 52

Panels with Many Components

Copyright © 2008 by John S. Mallozzi 53

Buttons

• Instead of a label, we can use a button, which

allows user interaction
• A button is controlled using an action listener
• The only method an action listener has is
actionPerformed
• If an action listener is registered with a button,
its actionPerformed method is called by the
framework whenever the button is clicked

Copyright © 2008 by John S. Mallozzi 54

Example

Copyright © 2008 by John S. Mallozzi 55

Text Components
• A text field is a window into which you can enter
a line of text (we've used them already, but just
to show a label inside a bordered rectangle)
• Since a text field has no label, you usually make
a panel, and add both a label and a text field to
the panel
• An action listener can be added to a text field –
the action occurs when the user presses the
enter key after entering text
• A text area is a two-dimensional window into
which you can enter text – see the
documentation
Copyright © 2008 by John S. Mallozzi 56
Example

Copyright © 2008 by John S. Mallozzi 57

Improvement

Puts “focus” on one

of the buttons once
a name is entered
At beginning, buttons are disabled: enableButtons(false)

Copyright © 2008 by John S. Mallozzi 58

Choices
• When you want the user to make a selection
from among several items, rather than have a
button for each item, you may use a list
• Lists (class JList) have their own kinds of
events and listeners
• Other possibilities exist for listing items
– A combo box allows entering an item as well as
selecting one of those on the list
– Buttons specialized for making choices
• Radio buttons allow you to select one of several items
• Check boxes allow you to select a number of items

Copyright © 2008 by John S. Mallozzi 59

Example

Copyright © 2008 by John S. Mallozzi 60

Menus
• Menus present choices in a special kind of list
• Menus (class JMenu) are contained in a menu
bar (class JMenuBar), and contain menu items
(class JMenuItem)
• Procedure
– Make a menu bar
– Set the menu bar of the frame to the one you've
made
– Add menus to the menu bar
– To each menu add menu items
– (A menu is itself a kind of menu item, so you can
have menus within menus)
Copyright © 2008 by John S. Mallozzi 61
Menus (continued)
• You can have either drop-down menus or pop-
up menus
– See the documentation for pop-up menus
• Instead of action listeners, it is convenient to
use actions
– An action (implements interface Action, but generally
extends class AbstractAction) allows you to use the
same action for more than one component
– Same method – actionPerformed – for both
– For example, you can have both menu items and
corresponding buttons behave in the same way
– Appearance is also the same for components using
the same action
Copyright © 2008 by John S. Mallozzi 62
Example

Copyright © 2008 by John S. Mallozzi 63