Chapter 9: Graphical User Interfaces
|
|
|
Presentation slides for |
|
|
|
Java Software Solutions |
|
Foundations of Program Design |
|
Third Edition |
|
|
|
by John Lewis and William Loftus |
|
|
|
Java Software Solutions is published by
Addison-Wesley |
|
|
|
Presentation slides are copyright 2002
by John Lewis and William Loftus. All rights reserved. |
|
Instructors using the textbook may use
and modify these slides for pedagogical purposes. |
|
|
Graphical User Interfaces
|
|
|
|
|
|
Now we can explore the creation of
graphical user interfaces in more detail |
|
|
|
Chapter 9 focuses on: |
|
GUI design guidelines |
|
layout managers |
|
nested containers for organizing
components |
|
borders, tool tips, mnemonics, and
other special features |
|
additional GUI components and events |
GUI Overview
|
|
|
|
|
|
To create a Java GUI, we need to
understand: |
|
events |
|
listeners |
|
components |
|
containers |
|
listener interfaces and adapter classes |
|
layout managers |
|
special features |
|
|
|
In this chapter we will build on ideas
presented in the graphics tracks of previous chapters |
|
|
GUI Design
|
|
|
|
|
|
We must remember that our goal is to
solve the problem using the tools needed to put a GUI together |
|
|
|
The GUI designer should: |
|
|
|
Know the users and their needs |
|
Prevent user errors whenever possible |
|
Optimize user abilities and make
information readily available |
|
Be consistent with placement of
components and color schemes |
Layout Managers
|
|
|
|
|
|
A layout manager is an object that
determines the manner in which components are arranged in a container |
|
|
|
There are several predefined layout
managers defined in the Java standard class library: |
Layout Managers
|
|
|
|
|
|
|
Every container has a default layout
manager, but we can set explicitly the layout manager for a container |
|
|
|
Each layout manager has its own
particular rules governing how the components will be arranged |
|
|
|
Some layout managers pay attention to a
component's preferred size or alignment, while others do not |
|
|
|
A layout manager attempts to adjust the
layout as components are added and as containers are resized |
|
|
|
|
Layout Managers
|
|
|
We can use the SetLayout method of a
container to change its layout manager |
|
|
|
JPanel panel = new JPanel(); |
|
panel.setLayout (new
BorderLayout()); |
|
|
|
We can use a tabbed pane, a container
which permits one of several panes to be selected |
|
|
|
See LayoutDemo.java (page xxx) |
|
See IntroPanel.java (page xxx) |
LayoutDemo.java
IntroPanel.java
Flow Layout
|
|
|
|
|
|
Flow layout puts as many components as
possible on a row, and then moves to the next row |
|
|
|
Rows are created as needed to
accommodate all of the components |
|
|
|
Components are displayed in the order
they are added to the container |
Flow Layout
|
|
|
(Figure 9.2 here) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
See FlowPanel.java (page xxx) |
Flow Layout
|
|
|
Each button is made large enough to
accommodate its label |
|
|
|
Components are centered on each row by
default |
|
|
|
Components can be centered,
left-aligned, or right-aligned |
|
|
|
The horizontal and vertical gaps
between the components can be explicitly set |
Border Layout
|
|
|
A border layout defines five areas to
which components can be added |
Border Layout
|
|
|
|
|
|
Each area displays one component (which
could be another container such as a JPanel) |
|
|
|
Each of the four outer areas enlarges
as needed to accommodate the component added to it |
|
|
|
If nothing is added to the outer areas,
they take up no space and other areas expand to fill the void |
|
|
|
The center area expands to fill space
as needed |
|
|
|
See BorderPanel.java (page xxx) |
BorderPanel.java
Grid Layout
|
|
|
A grid layout presents a container’s
components in a rectangular grid of rows and columns |
|
|
|
One component is placed in each cell of
the grid, and all cells have the same size |
|
|
|
(Figure 9.4 here) |
|
|
|
|
|
|
|
|
|
See GridPanel.java (page xxx) |
GridPanel.java
Grid Layout
|
|
|
Components are added from top to
bottom, and from left to right on each row |
|
|
|
The size of each cell is determined by
the overall size of the container |
Box Layout
|
|
|
|
|
|
A box layout organizes components
either horizontally (in one row) or vertically (in one column) |
|
|
|
By combining multiple containers using
box layout, many different configurations can be created |
|
|
|
Multiple containers with box layouts
are often preferred to one container that uses the more complicated gridbag
layout manager |
|
|
|
(Figure 9.5 here) |
|
|
Box Layout
|
|
|
|
|
|
A new BoxLayout object must be created
for each component |
|
|
|
See BoxPanel.java (page xxx) |
|
|
|
|
BoxPanel.java
Box Layout
|
|
|
|
Components are placed top-to-bottom (or
left-to-right) based on their order of arrival |
|
|
|
Invisible components can be added to
take up space between components |
|
Rigid areas have a fixed size |
|
Glue specifies where excess space
should go |
|
|
|
A rigid area is created using the createRigidArea
method of the Box class |
|
|
|
Glue is created using the createHorizontalGlue
or createVerticalGlue methods |
Containment Hierarchies
|
|
|
The way components are grouped into
containers and the way those containers are nested within each other
establishes the containment hierarchy for the GUI |
|
|
|
Each container can have its own layout
manager |
|
|
|
The appearance of a GUI is determined
by the containment hierarchy and the layout manager of each container |
Containment Hierarchies
Containment Hierarchies
|
|
|
A containment hierarchy can be
represented by a tree structure. |
|
|
|
(Figure 9.7 here) |
Special Features
|
|
|
Swing components offer special features
to facilitate and enhance their use |
|
|
|
(Figure 9.8 here) |
Special Features
|
|
|
Tool tips provide a short pop-up
description when the mouse cursor rests momentarily on a component |
|
|
|
A tool tip is assigned using the setToolTipText
method of a Swing component |
|
|
|
JButton button = new JButton
(“Compute”); |
|
button.setToolTipText
(“Calculate size.”); |
|
|
|
|
|
|
Special Features
|
|
|
A mnemonic permits the user to push a
button or make a menu choice using
the keyboard in addition to the mouse |
|
|
|
A mnemonic character should be chosen
from the label on a button or from a menu item |
|
|
|
A mnemonic is established using the setMnemonic
method |
|
|
|
JButton button = new JButton
(“Calculate”); |
|
button.setMnemonic (“C”); |
Special Features
|
|
|
Components can be disabled if they
should not be used |
|
|
|
JButton button = new JButton
(“Do It”); |
|
button.setEnabled (false); |
|
|
|
See LightBulb.java (page xxx) |
|
See LightBulbPanel.java (page xxx) |
|
See LightBulbControls.java (page xxx) |
LightBulb.java
LightBulbPanel.java
LightBulbControls.java
Special Features
|
|
|
A border can be put around any Swing
component to define how the edges of the component should be drawn |
|
|
|
(Figure 9.9 here) |
|
|
|
|
|
|
|
|
|
|
|
|
|
See BorderDemo.java (page xxx) |
|
|
BorderDemo.java
Special Features
|
|
|
An empty border buffers the space
around the edge |
|
|
|
A line border has a color and a
thickness |
|
|
|
An etched border uses colors for the
highlight and shadow |
|
|
|
A bevel border can be raised or
lowered, with colors for the outer and inner highlights and shadows |
|
|
|
A titled border places a title on or
around the border |
Special Features
|
|
|
A compound border is a combination of
two or more borders |
|
|
|
A matte border specifies the sizes of
the top, left, bottom, and right edges of the border |
Additional Containers and
Components
|
|
|
A scroll pane is useful for images or
information too large to fit in a reasonable area |
|
|
|
No event listener is needed for a
scroll pane |
|
|
|
See TransitMap.java (page xxx) |
TransitMap.java
Additional Containers and
Components
|
|
|
A split pane is a container that
displays two components separated by a moveable divider bar |
|
|
|
The two components can be displayed
side by side, or one on top of the other |
|
|
|
The orientation of the split pane is
set using the HORIZONTAL_SPLIT and VERTICAL_SPLIT constants in the JSplitPane
class |
|
|
|
(Figure 9.10 here) |
Additional Containers and
Components
|
|
|
The Swing Jlist class represents a list
of items from which the user can choose |
|
|
|
The contents of a JList object can be
specified using an array of objects |
|
|
|
A JList object generates a list
selection event when the current selection changes |
|
|
|
See PickImage.java (page xxx) |
|
See ListPanel.java (page xxx) |
PickImage.java
ListPanel.java
Additional Containers and
Components
|
|
|
A JList object can be set so that
multiple items can be selected at the same time |
|
|
|
The list selection mode can be one of
three options |
|
|
|
(Figure 9.11 here) |
|
|
|
|
|
|
|
The list selection mode is defined by a
ListSelectionModel object |
Additional Containers and
Components
|
|
|
|
|
|
A combo box provides a menu from which
the user can choose one of several options |
|
|
|
The currently selected option is shown
in the combo box |
|
|
|
Unlike a JList object, a combo box
presents options only when the user presses it using the mouse |
|
|
|
Options can be established using an
array of strings or using the addItem method |
|
|
|
See JukeBox.java (page xxx) |
|
See JukeBoxControls.java (page xxx) |
JukeBox.java
JukeBoxControls.java
Additional Containers and
Components
|
|
|
A slider is a component that allows the
user to specify a numeric value within a bounded range |
|
|
|
See ViewColors.java (page xxx) |
|
See ViewSliderPanel.java (page xxx) |
ViewColors.java
ViewSliderPanel.java
Additional Containers and
Components
|
|
|
The JSlider class has several methods
that allow the programmer to tailor the look of a slider |
|
|
|
Tick marks can be set using the setMajorTickSpacing
and setMinorTickSpacing methods |
|
|
|
Tick marks can be displayed using the setPaintTicks
method |
|
|
|
A slider produces a change event |
Events Revisited
|
|
|
We can set up a listener on any
component for any of the following events: |
|
|
|
(Figure 9.12 here) |
Events Revisited
|
|
|
Some events are generated only by
certain components |
|
|
|
(Figure 9.13 here) |
More About GUIs
|
|
|
A tool bar is a container that groups
several components into a row or column |
|
|
|
An internal frame is a container that
operates like a regular frame, but only within another window |
|
|
|
A layered panel is a container that
takes depth into consideration |
|
|
|
A progress bar indicates the progress
of an activity |
More About GUIs
|
|
|
A table displays data in table format |
|
|
|
A tree presents data in a hierarchical
format |
|
|
|
Java also provides rich support for text
processing |
Summary
|
|
|
|
Chapter 9 has focused on: |
|
GUI design guidelines |
|
layout managers |
|
nested containers for organizing
components |
|
borders, tool tips, mnemonics, and
other special features |
|
additional GUI components and events |
|
|