Lesson 5
GUI Programming
AUBG ICoSCIS Team
Assoc. Prof. Stoyan Bonev
March, 23 - 24, 2013
SWU, Blagoevgrad
Lesson Contents:
 Building Win apps technologies using Java &
class libraries


Swing
AWT (Abstract Windows Toolkit)
3
Java GUI programming
 Java GUI programming has its own specific:





Terminology
Concept
Philosophy
Ideology
Technologies:
• Hand-made programming (project:Java, Java application)
• Visual, component programming (project:Java, Java
Desktop application)
4
Terminology
 Java

Frame
Panel

Palette

Microsoft
Form
Toolbox
5
Concept, Philosophy, Ideology
 Based on class libraries, grouped in packages
 When Java was introduced, GUI classes bundled in
AWT library
 The AWT UI components were replaced by a more
robust and flexible library, known as Swing
components.
 To distinguish Swing components to their AWT
counterparts, the Swing GUI components are named
with a prefixed J.
6
The Java GUI API – 3 groups of
classes
 Component classes – used for creating UI

JButton, JLabel, JTextField, …
 Container classes – used to contain other
components

JFrame, JPanel, JApplet
 Helper classes – used to support GUI
components.

Graphics, Color, Font, FontMetrics, Dimension
7
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
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
Frames
 To create a UI, you need a container, i.e. a frame.
 Frame is a window that is not contained inside
another window. Frame is the basis to contain other
user interface components in Java GUI applications.
 The JFrame class can be used to create windows.
 For Swing GUI programs, use JFrame class to create
windows.
Frames
import javax.swing.*;
public class MyFrame {
public static void main(String[] args) {
JFrame frame = new JFrame("Test Frame");
frame.setSize(400, 300);
frame.setVisible(true);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Frames
javax.swing.JFrame
+JFrame()
Creates a default frame with no title.
+JFrame(title: String)
Creates a frame with the specified title.
+setSize(width: int, height: int): void
Specifies the size of the frame.
+setLocation(x: int, y: int): void
Specifies the upper-left corner location of the frame.
+setVisible(visible: boolean): void
Sets true to display the frame.
+setDefaultCloseOperation(mode: int): void Specifies the operation when the frame is closed.
+setLocationRelativeTo(c: Component):
Sets the location of the frame relative to the specified component.
void
If the component is null, the frame is centered on the screen.
+pack(): void
Automatically sets the frame size to hold the components in the
frame.
Frames – To create empty frame


Practice: Recommended IDE: NetBeans
Create your own project: sbJavaWinEmptyForm
• Hand-made programming (project:Java, Java application)


Type import javax.swing.*;
Type stmt within main() method to create a frame
JFrame mySBForm = new JFrame("Empty Form");

Run the project
• No frame appears on the screen
Frames – To create empty frame

Frame not visible if method setVisible() not invoked

Add one more stmt
mySBForm.setVisible(true);

Do you see the form? Look at the top left corner of the
screen
Frames – To create empty frame

Frame may move to the center of the screen using method
setLocationRelativeTo()

Add one more stmt
mySBForm.setLocationRelativeTo(null);

Do you see the form? Look at the screen center
Frames – To create empty frame

Frame sized to display just the title bar if method setSize() not
used

Add one more stmt
mySBForm.setSize(900, 300); // dimensions in pixels


Do you see the effect of the change?
Hint: setSize() to invoke before invoking setLocationRelativeTo()
Frames – To create empty frame

How to tell the program to terminate when the frame gets
closed?

Add one more stmt
mySBForm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

If this stmt is not used, the program does not terminate
when the frame is closed
Adding components to a frame
Modify the frame constructor argument
JFrame mySBForm = new JFrame("Empty Form");
To

JFrame mySBForm = new JFrame(“My frame with Components");
Adding components to a frame

To add a component, we must :
• Create a component
• Add it to the frame (to the content pane of the frame)


This may happen in
Two steps
• JLabel myLabel1 = new Jlabel(“This is not Empty Frame”);
• mySBForm.add(myLabel1);

Or in one step creating anonymous component
• mySBForm.add(new JLabel(“This is not Empty Frame”));
Removing components from a frame

To remove a component, we must use method remove():
• mySBForm.remove(myLabel1);

Can we remove anonymous component?
Adding two or more components to a
frame

To add more than one component, we must :
•
•
•
•
•
•



JLabel myLabel1 = new Jlabel(“This is not Empty Frame”);
mySBForm.add(myLabel1);
JLabel myLabel2 = new Jlabel(“This is Frame with components”);
mySBForm.add(myLabel2);
//JButton myBtn1 = new JButton(“My Button”);
//mySBForm.add(myBtn1);
Do you see more than one component on the screen?
No.
What’s the problem?
Adding two or more components to a
frame


This is because components are put in the frame by the content
pane’s layout manager and the default layout manager if not
specified explicitly, allocates all the frame to the current
component replacing/substituting the previous component if
there is any.
It’s time to introduce several different layout managers to
place components in the desired locations
Frames – To create empty frame


Practice: Recommended IDE: NetBeans
Create your own project: sbJavaWinEmptyForm
• Visual, component programming (project:Java, Java
Desktop application)

Use the toolbox facility to configure your project

Run the project
Layout Managers

For more details open file

LayoutManagersAndMore.ppt
More on GUI programming
Load file dialogs

JFileChooser chooser = new JFileChooser();
chooser.setDialogTitle("Load which file?");

int result = chooser.showOpenDialog(enclosingJFrame);
if (result != JFileChooser.APPROVE_OPTION) {
File file = chooser.getSelectedFile();
// use file
}
 You could also test for
CANCEL_OPTION or
ERROR_OPTION
 You will get back a
File object; to use it,
you must know how to
do file I/O!
4/8/2015
Assoc. Prof. Stoyan Bonev
26
Save file dialogs

JFileChooser chooser = new JFileChooser();
chooser.setDialogTitle(“Save file as?");

int result = chooser.showSaveDialog(enclosingJFrame);
if (result != JFileChooser.APPROVE_OPTION) {
File file = chooser.getSelectedFile();
// use file
}
 You could also test for
CANCEL_OPTION or
ERROR_OPTION
 You will get back a File
object; to use it, you must
know how to do file I/O!
4/8/2015
Assoc. Prof. Stoyan Bonev
27
GUI Basics
or
Windows Based Applications
28
Motivations
To build Windows application you need a frame (with
title bar and content pane) structured to contain
components/controls such as
buttons,
labels,
text fields,
check boxes,
radio buttons,
combo boxes, and others.
See next slide for illustration
29
Creating GUI Objects
Label
Text
field
Check
Box
Button
Combo
Box
// Create a button with text OK
JButton jbtOK = new JButton("OK");
30
Radio
Button
Creating GUI Objects
Label
Text
field
Check
Box
Radio
Button
Button
Combo
Box
// Create a label with text "Enter your name: "
JLabel jlblName = new JLabel("Enter your name: ");
31
Creating GUI Objects
Label
Text
field
Check
Box
Radio
Button
Button
Combo
Box
// Create a text field with text "Type Name Here"
JTextField jtfName = new JTextField("Type Name Here");
32
Creating GUI Objects
Label
Text
field
Check
Box
Button
Combo
Box
// Create a check box with text bold
JCheckBox jchkBold = new JCheckBox("Bold");
33
Radio
Button
Creating GUI Objects
Label
Text
field
Check
Box
Button
Combo
Box
// Create a radio button with text red
JRadioButton jrbRed = new JRadioButton("Red");
34
Radio
Button
Creating GUI Objects
Label
Text
field
Check
Box
Button
Combo
Box
// Create a combo box with choices red, green, and blue
JComboBox jcboColor =
new JComboBox(new String[]{"Red", "Green", "Blue"});
35
Radio
Button
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");
Combo
Box
// 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"});
36
Radio
Button
Swing vs. AWT
Swing class library
OR
AWT class library
(Abstract Windows Toolkit)
37
Swing vs. AWT
So why do the GUI component classes have a prefix J? Instead of JButton, why not name
it simply Button? In fact, there is a class already named Button in the java.awt package.
When Java was introduced, the GUI classes were bundled in a library known as the
Abstract Windows Toolkit (AWT). For every platform on which Java runs, the AWT
components are automatically mapped to the platform-specific components through their
respective agents, known as peers. AWT is fine for developing simple graphical user
interfaces, but not for developing comprehensive GUI projects. Besides, AWT is prone to
platform-specific bugs because its peer-based approach relies heavily on the underlying
platform. With the release of Java 2, the AWT user-interface components were replaced
by a more robust, versatile, and flexible library known as Swing components. Swing
components are painted directly on canvases using Java code, except for components that
are subclasses of java.awt.Window or java.awt.Panel, which must be drawn using native
GUI on a specific platform. Swing components are less dependent on the target platform
and use less of the native GUI resource. For this reason, Swing components that don’t
rely on native GUI are referred to as lightweight components, and AWT components are
referred to as heavyweight components.
38
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
39
Lightweight
The Java GUI API
 The Java GUI API contains classes that may
classify in three groups:
 Component classes

Used to create interface
 Container classes

Used to contain components
 Helper classes

Used to support components
40
AWT (Optional)
AWTEvent
Font
FontMetrics
Object
Color
Graphics
Component
Container
Panel
Applet
Button
Window
Frame
Label
TextField
Dialog
TextComponent
TextArea
List
Choice
CheckBox
LayoutManager
CheckBoxGroup
Canvas
MenuComponent
MenuItem
MenuBar
Scrollbar
41
Menu
FileDialog
Frames
 To create a user interface, you need to create a frame.
 Frame is a window that is not contained inside another
window. Frame is the basis to contain other user
interface components in Java GUI applications.
 The JFrame class can be used to create windows.
 For Swing GUI programs, use JFrame class to create
windows.
42
Creating Frames
(open file ProgPureFrame.java)
import javax.swing.*;
public class MyFrame {
public static void main(String[] args) {
JFrame frame = new JFrame("Test Frame");
frame.setSize(400,300);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);
frame.setVisible(true);
}
43
}
Adding Components into a Frame
Title bar
// Add a button into the frame
frame.getContentPane().add(
new JButton("OK"));
Content pane
44
Content Pane Delegation in JDK 1.5
Title bar
Content pane
// Add a button into the frame
frame.getContentPane().add(
new JButton("OK"));
// Add a button into the frame
frame.add( new JButton("OK") );
45
JFrame Class
javax.swing.JFrame
+JFrame()
Creates a default frame with no title.
+JFrame(title: String)
Creates a frame with the specified title.
+setSize(width: int, height: int): void
Specifies the size of the frame.
+setLocation(x: int, y: int): void
Specifies the upper-left corner location of the frame.
+setVisible(visible: boolean): void
Sets true to display the frame.
+setDefaultCloseOperation(mode: int): void
Specifies the operation when the frame is closed.
+setLocationRelativeTo(c: Component):
void
Sets the location of the frame relative to the specified component.
If the component is null, the frame is centered on the screen.
+pack(): void
Automatically sets the frame size to hold the components in the
frame.
Demo: Open file ProgFrameAndControls.java
46
Demo – different source text structure –
same functionality
 Open file ProgFrameAndControls.java
 Open file ProgFrameAndControlsStyleStandard.java
 Open file
ProgFrameAndControlsStyleRecommended.java
 Open file
ProgFrameAndControlsStyleSeparateClasses.java
47
Demo




Open file ProgFrameAndControls.java
You cannot visualize more than one component.
Each new component replaces the previous one
The component occupies all the frame space
 How to proceed with more components?
 You need a layout manager to associate with the
container using method setLayout() in
context <container>.setLayout(<arg>);
48
Layout Managers
 Java’s layout managers provide a level of abstraction to
automatically map your user interface on all window
systems.
 The UI components are placed in containers. Each container
has a layout manager to arrange the UI components within
the container.
 Layout managers are set in containers using the
setLayout(LayoutManager) method in a container.
49
Kinds of Layout Managers
 FlowLayout
 GridLayout
 BorderLayout
 Several other layout managers will be introduced in
Chapter 33, “Containers, Layout Managers, and
Borders”
50
FlowLayout Example
 The simplest layout manager.
 Components arranged from left to right row by
row in the order in which they were added.
 Possible alignment control
 Demo: file ProgFrameAndLayout.java
51
NetBeans – functionality
Introduction to GUI Building







Contents
Exercise 1: Creating a Project
Exercise 2: Building the Front End
Exercise 3: Adding Functionality
Exercise 4: Running the Program
How Event Handling Works
52
Exercises/Tasks
 Try to run ProgFrameAndLayout.java program
53
FlowLayout Example
 Run the ProgFrameAndLayout.java program as it is set
without layout manager:
//
//
//
//
with and/or without
frame.setLayout(new
frame.setLayout(new
frame.setLayout(new
layout manager
FlowLayout(FlowLayout.LEFT,10,20));
GridLayout( 3, 2, 10, 15));
BorderLayout( 10, 20));
54
FlowLayout Example
 Run the ProgFrameAndLayout.java program as it is set
with FlowLayout layout manager:
// with and/or without
frame.setLayout(new
// frame.setLayout(new
// frame.setLayout(new
layout manager
FlowLayout(FlowLayout.LEFT,10,20));
GridLayout( 3, 2, 10, 15));
BorderLayout( 10, 20));
55
FlowLayout Example
Write a program that
adds three labels and
text fields into the
content pane of a frame
with a FlowLayout
manager.
56
The FlowLayout Class
java.awt.FlowLayout
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
-alignment: int
The alignment of this layout manager (default: CENTER).
-hgap: int
The horizontal gap of this layout manager (default: 5 pixels).
-vgap: int
The vertical gap of this layout manager (default: 5 pixels).
+FlowLayout()
Creates a default FlowLayout manager.
+FlowLayout(alignment: int)
Creates a FlowLayout manager with a specified alignment.
+FlowLayout(alignment: int, hgap:
int, vgap: int)
Creates a FlowLayout manager with a specified alignment,
horizontal gap, and vertical gap.
57
GridLayout Example

 Components arranged in a grid (matrix)
formation. from left to right row by row in the
order in which they were added.
 Demo: file ProgFrameAndLayout.java
58
GridLayout Example
 Run the ProgFrameAndLayout.java program as it is set
with GridLayout layout manager:
// with and/or without
// frame.setLayout(new
frame.setLayout(new
// frame.setLayout(new
layout manager
FlowLayout(FlowLayout.LEFT,10,20));
GridLayout( 3, 2, 10, 15));
BorderLayout( 10, 20));
59
GridLayout Example
Rewrite the program in
the preceding example
using a GridLayout
manager instead of a
FlowLayout manager to
display the labels and text
fields.
60
The GridLayout Class
java.awt.GridLayout
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
-rows: int
The number of rows in this layout manager (default: 1).
-columns: int
The number of columns in this layout manager (default: 1).
-hgap: int
The horizontal gap of this layout manager (default: 0).
-vgap: int
The vertical gap of this layout manager (default: 0).
+GridLayout()
Creates a default GridLayout manager.
+GridLayout(rows: int, columns: int) Creates a GridLayout with a specified number of rows and columns.
+GridLayout(rows: int, columns: int, Creates a GridLayout manager with a specified number of rows and
hgap: int, vgap: int)
columns, horizontal gap, and vertical gap.
61
The BorderLayout Manager
add(Component,
constraint), where
constraint is
BorderLayout.EAST,
BorderLayout.SOUTH,
BorderLayout.WEST,
BorderLayout.NORTH, or
BorderLayout.CENTER.
The BorderLayout manager
divides the container into five
areas: East, South, West,
North, and Center.
Components are added to a
BorderLayout by using the
add method.
62
BorderLayout Example
File ProgFrameAndLayout.java
63
BorderLayout Example
 Run the ProgFrameAndLayout.java program as it is set
with BorderLayout layout manager:
// with and/or without
// frame.setLayout(new
// frame.setLayout(new
frame.setLayout(new
layout manager
FlowLayout(FlowLayout.LEFT,10,20));
GridLayout( 3, 2, 10, 15));
BorderLayout( 10, 20));
// uncomment this text
frame.add(jbtOK1,
frame.add(jbtOK2,
frame.add(jbtOK3,
frame.add(jbtOK4,
frame.add(jbtOK5,
BorderLayout.EAST);
BorderLayout.CENTER);
BorderLayout.WEST);
BorderLayout.NORTH);
BorderLayout.SOUTH);
64
The BorderLayout Class
java.awt.BorderLayout
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
-hgap: int
The horizontal gap of this layout manager (default: 0).
-vgap: int
The vertical gap of this layout manager (default: 0).
+BorderLayout()
Creates a default BorderLayout manager.
+BorderLayout(hgap: int, vgap: int)
Creates a BorderLayout manager with a specified number of
horizontal gap, and vertical gap.
65
The Color Class
You can set colors for GUI components by using the
java.awt.Color class. Colors are made of red, green, and blue
components, each of which is represented by a byte value that
describes its intensity, ranging from 0 (darkest shade) to 255
(lightest shade). This is known as the RGB model.
Color c = new Color(r, g, b);
r, g, and b specify a color by its red, green, and blue
components.
Example:
Color c = new Color(228, 100, 255);
66
Standard Colors
Thirteen standard colors (black, blue, cyan, darkGray, gray,
green, lightGray, magenta, orange, pink, red, white, yellow)
are defined as constants in java.awt.Color.
The standard color names are constants, but they are named as
variables with lowercase for the first word and uppercase for
the first letters of subsequent words. Thus the color names
violate the Java naming convention. Since JDK 1.4, you can
also use the new constants: BLACK, BLUE, CYAN,
DARK_GRAY, GRAY, GREEN, LIGHT_GRAY,
MAGENTA, ORANGE, PINK, RED, WHITE, and
YELLOW.
67
Setting Colors
You can use the following methods to set the
component’s background and foreground colors:
setBackground(Color c)
setForeground(Color c)
Example:
jbt.setBackground(Color.yellow);
jbt.setForeground(Color.red);
68
The
Font
Class
Font Names
Font Style
Standard font names
that are supported in
all platforms are:
SansSerif, Serif,
Monospaced, Dialog, or
DialogInput.
Font.PLAIN (0),
Font.BOLD (1),
Font.ITALIC (2), and
Font.BOLD +
Font.ITALIC (3)
Font myFont = new Font(name, style, size);
Example:
Font myFont = new Font("SansSerif ", Font.BOLD, 16);
Font myFont = new Font("Serif", Font.BOLD+Font.ITALIC,12);
JButton jbtOK = new JButton("OK“);
jbtOK.setFont(myFont);
69
Finding All Available Font Names
GraphicsEnvironment e =
GraphicsEnvironment.getLocalGraphicsEnvironment();
String[] fontnames =
e.getAvailableFontFamilyNames();
for (int i = 0; i < fontnames.length; i++)
System.out.println(fontnames[i]);
70
Using Panels as Sub-Containers
 Panels act as sub-containers for grouping user interface
components.
 It is recommended that you place the user interface
components in panels and place the panels in a frame. You
can also place panels in a panel.
 To add a component to JFrame, you actually add it to the
content pane of JFrame.
 To add a component to a panel, you add it directly to the
panel using the .add method.
71
Creating a JPanel
You can use new JPanel() to create a panel with a default
FlowLayout manager or
new JPanel(LayoutManager) to create a panel with the
specified layout manager. Use the add(Component) method to
add a component to the panel. For example,
JPanel p = new JPanel();
p.add(new JButton("OK"));
72
Demo

Open file ProgTestPanels.java
 Open file ProgTestPanels2.java
73
Testing Panels Example
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
74
Common Features of Swing Components
java.awt.Component
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
-font: java.awt.Font
The font of this component.
-background: java.awt.Color
The background color of this component.
-foreground: java.awt.Color
The foreground color of this component.
-preferredSize: Dimension
The preferred size of this component.
-visible: boolean
Indicates whether this component is visible.
+getWidth(): int
Returns the width of this component.
+getHeight(): int
Returns the height of this component.
+getX(): int
getX() and getY() return the coordinate of the component’s
upper-left corner within its parent component.
+getY(): int
java.awt.Container
+add(comp: Component): Component
Adds a component to the container.
+add(comp: Component, index: int): Component Adds a component to the container with the specified index.
Removes the component from the container.
+remove(comp: Component): void
+getLayout(): LayoutManager
Returns the layout manager for this container.
+setLayout(l: LayoutManager): void
Sets the layout manager for this container.
+paintComponents(g: Graphics): void
Paints each of the components in this container.
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
javax.swing.JComponent
-toolTipText: String
The tool tip text for this component. Tool tip text is displayed when
the mouse points on the component without clicking.
-border: javax.swing.border.Border
The border for this component.
75
Borders
You can set a border on any object of the JComponent
class. Swing has several types of borders. To create a
titled border, use
new TitledBorder(String title).
To create a line border, use
new LineBorder(Color color, int width),
where width specifies the thickness of the line. For
example, the following code displays a titled border
on a panel:
JPanel panel = new JPanel();
panel.setBorder(new TitledBorder(“My Panel”));
76
Test Swing Common Features
Component Properties
JComponent Properties






 toolTipText
font
background
foreground
preferredSize
minimumSize
maximumSize
 border
77
Image Icons
Java uses the javax.swing.ImageIcon class to represent an
icon. An icon is a fixed-size picture; typically it is small and
used to decorate components. Images are normally stored in
image files. You can use new ImageIcon(filename) to
construct an image icon. For example, the following statement
creates an icon from an image file us.gif in the image
directory under the current class path:
ImageIcon icon = new ImageIcon("image/us.gif");
TestImageIcon
78
Run
Splash Screen
A splash screen is an image that is displayed while the
application is starting up. If your program takes a long time to
load, you may display a splash screen to alert the user. For
example, the following command:
java –splash:image/us.gf TestImageIcon
displays an image while the program TestImageIcon is being
loaded.
79
Task
 Write JAVA program to support a frame with



three labels
Three text fields
Two buttons
 Scheme of the pane:
label1
label2
label3
button1
textfield1
textfield2
textfield3
button2
Questions? And/Or
Thank You
For
Your Attention!
81