Notes

Outline

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 (Figure 9.6 here)

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