Introduction to GUI
Programming in Java:
Frames, Simple Components,
and Layouts
Corresponds with Chapter 12
Elements of GUI
Programming
Components
Layouts
Control over the positioning of components
within a container
Events
Visual objects that appear on the screen
Responses to user actions
Graphics
Lines, shapes, colors, fonts, etc.
All are encapsulated in Java Classes and Packages
Components
Two categories of Java Component classes:
AWT Abstract Windows Toolkit (java.awt
package)
The older version of the components
Rely on peer architecturedrawing done by the OS
platform on which the application/applet is running
Considered to be heavy-weight
Swing (javax.swing package)
Newer version of the components
No peer architecturecomponents draw themselves
Most are consdered to be lightweight
The textbook focuses primarily on Swing classes
GUI Class Hierarchy (AWT)
AWTEvent
Font
FontMetrics
Object
Color
Graphics
Component
Container
Panel
Applet
Button
Window
Frame
Label
TextField
Dialog
TextComponent
List
TextArea
Choice
CheckBox
LayoutManager
CheckBoxGroup
Canvas
MenuComponent
Scrollbar
MenuItem
MenuBar
Menu
FileDialog
GUI Class Hierarchy (Swing)
Dimension
Font
Classes in the java.awt
package
LayoutManager
1
Heavyweight
FontMetrics
Object
Color
Panel
Applet
JApplet
Window
Frame
JFrame
Dialog
JDialog
Graphics
Component
Container
Swing Components
in the javax.swing package
JComponent
Lightweight
Container Classes
Dimension
Classes in the java.awt
package
LayoutManager
Font
Heavyweight
FontMetrics
Object
Color
Panel
Applet
JApplet
Window
Frame
JFrame
Dialog
JDialog
Graphics
Component
Container
Container classes can
contain other GUI
components.
JComponent
Lightweight
JPanel
Swing Components
in the javax.swing package
GUI Helper Classes
Dimension
Font
Classes in the java.awt
package
LayoutManager
1
Heavyweight
FontMetrics
Object
Color
Panel
Applet
JApplet
Window
Frame
JFrame
Dialog
JDialog
Graphics
Component
Container
The helper classes are not
subclasses of Component.
They are used to describe the
properties of GUI components
such as graphics context,
colors, fonts, and dimension.
JComponent
Lightweight
JPanel
Swing Components
in the javax.swing package
Swing GUI Components
JCheckBoxMenuItem
AbstractButton
JComponent
JMenuItem
JMenu
JButton
JRadioButtonMenuItem
JToggleButton
JCheckBox
JRadioButton
JEditorPane
JTextComponent
JTextField
JPasswordField
JTextArea
JLabel
JTabbedPane
JToolBar
JTree
JComboBox
JList
JSplitPane
JMenuBar
JTable
JPanel
JLayeredPane
JPopupMenu
JTableHeader
JOptionPane
JSeparator
JFileChooser
JInternalFrame
JScrollBar
JSlider
JScrollPane
JRootPane
JColorChooser
JProgressBar
JToolTip
JSpinner
Creating GUI Objects
// Create a button with text OK
JButton jbtOK = new JButton("OK");
// Create a label with text "Enter your name: "
JLabel jlblName = new JLabel("Enter your name: ");
Label
Text
field
Check
Box
Button
// Create a text field with text "Type Name Here"
JTextField jtfName = new JTextField("Type Name Here");
// Create a check box with text bold
JCheckBox jchkBold = new JCheckBox("Bold");
// Create a radio button with text red
JRadioButton jrbRed = new JRadioButton("Red");
// Create a combo box with choices red, green, and blue
JComboBox jcboColor = new JComboBox(new String[]{"Red",
"Green", "Blue"});
Combo
Box
Radio
Button
Frames
Frameisawindowthatisnot
containedinsideanother
window.
Frameisthebasistocontain
otheruserinterface
componentsinJavagraphical
applications.
TheFrameclasscanbeusedto
createwindows.
Listing 12.1 p404
Any use of Swing classes
requires importing
javax.swing package.
Instantiate a swing
Frame object
Call JFrame methods to control visuals and behavior
Listing 12.1 p404
Set width and height of the frame in pixels
Listing 12.1 p404
Cause frame to be centered on the screen when displayed
Listing 12.1 p404
When user closes the window, the application will terminate
Listing 12.1 p404
This is needed to make the frame actually show up on the screen
This is what a
frame looks
like.
Note the title
bar, the
content area,
the minimize,
maximize/resto
re, and close
icons.
Caption in the
title bar was
determined
from the
argument to
the constructor.
Frames with Components
A Frame is a container. Therefore it can
contain other components (like buttons, text
fields, etc.)
Components are added to the content pane of
a frame.
The content pane is the grey area in the
Frame window.
A simplistic way to look at containment is
this:
A JFrame contains:
1.
2.
A menu bar
A content pane
A Picture of Frame
Containment
From: http://java.sun.com/docs/books/tutorial/uiswing/components/toplevel
Actually, theres more to it than this, but this picture will suffice for now
Listing 12.2 p405
Example: adding a component to the content pane of a Frame
1) Declare a
reference
variable for a
button object.
2) Instantiate a button
Note: prior to Java 1.5, you
needed to call
getContentPane() in order
to obtain the frames
content pane.
3) Add the
button to the
content pane
of the frame.
This is no longer
necessary.
Resulting Screen
Here is the button
Layout Managers
Control the placement of components on
the container.
This is an alternative to hardcoding the
pixel locations of the components.
Advantage: resizing the container (frame)
will not occlude or distort the view of the
components.
Main layout managers:
FlowLayout, GridLayout, BorderLayout,
CardLayout, and GridBagLayout
Layout Manager Hierarchy
LayoutManager is an interface. All the layout classes implement this inte
FlowLayout
Places components sequentially (left-to-right) in the
order they were added
Components will wrap around if the width of the
container is not wide enough to hold them all in a row.
Default for applets and panels, but not for frames
Options:
left, center (this is the default), or right
Typical syntax: in your Frame classs constructor
setLayout(new FlowLayout(FlowLayout.LEFT))
OR
setLayout(new
FlowLayout(FlowLayout.LEFT,hgap,vgap))
Listing 12.3 p407: A Frame class that uses FlowLayout layout manager
Listing 12.3 p407: A Frame class that uses FlowLayout layout manager
Note: creating a subclass of
JFrame
Listing 12.3 p407: A Frame class that uses FlowLayout layout manager
Note: its common to
make the Frame an
application class by
including a main
method. The main
method will
instantiate its own
class.
Listing 12.3 p407: A Frame class that uses FlowLayout layout manager
Swing components are in java.swing package
Layout managers are in java.awt package
The constructor will typically do the following:
1) Set the layout manager for the frames content pane
2) Add the components to the frames content pane
In this case, the layout is Flow, and 6 Swing components are added
Resizing the frame causes the
components to wrap around when
necessary.
GridLayout
Arranges components into rows and columns
In Frames constructor:
setLayout
(new GridLayout(rows,columns))
OR
setLayout(new
GridLayout(rows,columns,hgap,vgap))
Components will be added in order, left to right, row by
row
Components will be equal in size
As container is resized, components will resize
accordingly, and remain in same grid arrangement
Listing 12.4 p409: A Frame class that uses GridLayout layout manager
Setting the layout manager
Adding components
Resizing the frame causes the
components to resize and
maintain their same grid pattern.
BorderLayout
Arranges components into five areas: North, South, East,
West, and Center
In the constructor:
setLayout(new BorderLayout())
setLayout(new BorderLayout(hgap,vgap))
for each component:
add (the_component, region)
do for each area desired:
BorderLayout.EAST, BorderLayout.SOUTH, BorderLayout.WEST,
BorderLayout.NORTH, or BorderLayout.CENTER
Behavior: when the container is resized, the components will be resized
but remain in the same locations.
NOTE: only a maximum of five components can be added and seen in this
case, one to each region.
OR
Listing 12.5 pp410-411: A Frame class that uses BorderLayout layout mana
Setting the layout manager
Adding components to
specific regions
Resizing the
frame causes the
components to
resize and
maintain their
same regions.
NOTE: the CENTER region
dominates the sizing.
Using Panels as SubContainers
JPanel is a class of special components that can
contain other components.
As containers, JPanels can have their own layout
managers.
This way, you can combine layouts within the
same frame by adding panels to the frame and by
adding other components to the panels.
Therefore, like JFrames, you can use these
methods with JPanels:
add() to add components to the panel
setLayout() to associate a layout manager for the
panel
Listing 12.6 p 414 Testing
Panels
This example uses panels to organize
components. The program creates a user
interface for a Microwave oven.
frame
A textfield
p2
A button
12
buttons
p1
Listing 12.6 p
414:
A Frame class
that contains
panels for
organizing
components
Listing 12.6 p
414:
A Frame class
that contains
panels for
organizing
components
Creating a panel and
setting its layout
Listing 12.6 p
414:
A Frame class
that contains
panels for
organizing
components
Adding
components to
the panel
Listing 12.6 p
414:
A Frame class
that contains
panels for
organizing
components
Creating another panel
and setting its layout
note that this setting
layout for the panel can
be done using an
overloaded constructor
Listing 12.6 p
414:
A Frame class
that contains
panels for
organizing
components
Adding components to the second panel
NOTE: panel p1 is
embedded inside panel p2!
Listing 12.6 p
414:
A Frame class
that contains
panels for
organizing
components
Adding a panel and a button
to the frames content pane.
Note: the JFrame classs
default layout manager is
Border, so you if you dont
explicitly call setLayout() for
the frame it will be Border.
Button in the CENTER region
Panel p2 in the EAST region
Frame has BorderLayout manager
Text field in NORTH
region
Panel p1 in the CENTER
region
Panel p2 has BorderLayout manager
Panel p1 has GridLayout
manager, four rows and three
