Graphical User Interfaces (GUIs) and JOptionPane in Java
OOP & GUI
G
r
a
p
h
i
c
a
l
U
s
e
r
I
n
t
e
r
f
a
c
e
s
i
n
J
a
v
a
•
I
n
t
r
o
d
u
c
t
i
o
n
•
E
l
e
m
e
n
t
s
o
f
a
G
U
I
•
G
U
I
h
i
e
r
a
r
c
h
y
o
f
c
o
n
t
a
i
n
e
r
s
a
n
d
c
o
m
p
o
n
e
n
t
s
•
B
l
u
e
p
r
i
n
t
f
o
r
t
h
e
d
e
f
i
n
i
t
i
o
n
o
f
a
G
U
I
•
T
u
n
i
n
g
t
h
e
a
s
p
e
c
t
o
f
t
h
e
G
U
I
•
S
o
m
e
a
v
a
i
l
a
b
l
e
c
o
n
t
a
i
n
e
r
s
a
n
d
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
s
•
E
v
e
n
t
s
c
r
e
a
t
e
d
b
y
c
o
n
t
a
i
n
e
r
s
a
n
d
c
o
m
p
o
n
e
n
t
s
•
E
x
a
m
p
l
e
s
:
h
o
w
t
o
u
s
e
t
h
e
c
o
n
t
a
i
n
e
r
s
a
n
d
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
s
•
E
l
a
b
o
r
a
t
e
G
U
I
s
(
M
o
d
e
v
a
r
i
a
b
l
e
s
,
D
y
n
a
m
i
c
a
l
l
y
e
v
o
l
v
i
n
g
G
U
I
s
)
•
E
x
a
m
p
l
e
s
:
e
l
a
b
o
r
a
t
e
G
U
I
s
Graphical input and output with
JOptionPane
•
An option pane is a simple dialog box for graphical
input/output
•
advantages:
–
simple
–
flexible (in some ways)
–
looks better than the black box of death
•
disadvantages:
–
created with static methods;
not very object-oriented
–
not very powerful (just simple dialog boxes)
JOptionPane
Types of JOptionPanes
•
s
h
o
w
M
e
s
s
a
g
e
D
i
a
l
o
g
(
<
p
a
r
e
n
t
>
,
<
m
e
s
s
a
g
e
>
)
D
i
s
p
l
a
y
s
a
m
e
s
s
a
g
e
o
n
a
d
i
a
l
o
g
w
i
t
h
a
n
O
K
b
u
t
t
o
n
.
•
s
h
o
w
C
o
n
f
i
r
m
D
i
a
l
o
g
(
<
p
a
r
e
n
t
>
,
<
m
e
s
s
a
g
e
>
)
D
i
s
p
l
a
y
s
a
m
e
s
s
a
g
e
a
n
d
l
i
s
t
o
f
c
h
o
i
c
e
s
Y
e
s
,
N
o
,
C
a
n
c
e
l
;
r
e
t
u
r
n
s
u
s
e
r
'
s
c
h
o
i
c
e
a
s
a
n
i
n
t
w
i
t
h
o
n
e
o
f
t
h
e
f
o
l
l
o
w
i
n
g
v
a
l
u
e
s
:
–
JOptionPane.YES_OPTION
–
JOptionPane.NO_OPTION
–
JOptionPane.CANCEL_OPTION
•
s
h
o
w
I
n
p
u
t
D
i
a
l
o
g
(
<
p
a
r
e
n
t
>
,
<
m
e
s
s
a
g
e
>
)
D
i
s
p
l
a
y
s
a
m
e
s
s
a
g
e
a
n
d
t
e
x
t
f
i
e
l
d
f
o
r
i
n
p
u
t
;
r
e
t
u
r
n
s
t
h
e
u
s
e
r
'
s
v
a
l
u
e
e
n
t
e
r
e
d
a
s
a
S
t
r
i
n
g
.
–
can pass null for the parent to all methods
JOptionPane examples 1
•
showMessageDialog analogous to System.out.println for displaying a
simple message
•
import javax.swing.*;
•
public class MessageDialogExample {•
public static void main(String[] args) {•
J
O
p
t
i
o
n
P
a
n
e
.
s
h
o
w
M
e
s
s
a
g
e
D
i
a
l
o
g
(
n
u
l
l
,
"
H
o
w
'
s
t
h
e
w
e
a
t
h
e
r
?
"
)
;
•
J
O
p
t
i
o
n
P
a
n
e
.
s
h
o
w
M
e
s
s
a
g
e
D
i
a
l
o
g
(
n
u
l
l
,
"
S
e
c
o
n
d
m
e
s
s
a
g
e
"
)
;
•
}
•
}
showConfirmDialog analogous to a System.out.print that prints a question, then reading
an input value from the user (can only be one of the provided choices)
import javax.swing.*;
public class ConfirmDialogExample { public static void main(String[] args) {i
n
t
c
h
o
i
c
e
=
J
O
p
t
i
o
n
P
a
n
e
.
s
h
o
w
C
o
n
f
i
r
m
D
i
a
l
o
g
(
n
u
l
l
,
"
E
r
a
s
e
y
o
u
r
h
a
r
d
d
i
s
k
?
"
)
;
i
f
(
c
h
o
i
c
e
=
=
J
O
p
t
i
o
n
P
a
n
e
.
Y
E
S
_
O
P
T
I
O
N
)
{JOptionPane.showMessageDialog(null, "Disk erased!");
}
else {JOptionPane.showMessageDialog(null, "Cancelled.");
}
}
}
JOptionPane examples 2
JOptionPane examples 3
•
showInputDialog analogous to a System.out.print that prints a question, then
reading an input value from the user (can be any value)
import javax.swing.*;
public class InputDialogExample { public static void main(String[] args) {S
t
r
i
n
g
n
a
m
e
=
J
O
p
t
i
o
n
P
a
n
e
.
s
h
o
w
I
n
p
u
t
D
i
a
l
o
g
(
n
u
l
l
,
"
W
h
a
t
'
s
y
o
u
r
n
a
m
e
?
"
)
;
JOptionPane.showMessageDialog(null, "Yeehaw, " + name);
}
}
I
n
t
r
o
d
u
c
t
i
o
n
•
Graphical User Interface:
collection of input / output devices (buttons, …) inserted into one or more
windows
these windows and IO devices are displayed on the screen
also, the IO devices react to actions over the keyboard and mouse
•
two predefined packages:
•
o
l
d
p
a
c
k
a
g
e
:
A
b
s
t
r
a
c
t
W
i
n
d
o
w
i
n
g
T
o
o
l
k
i
t
(
A
W
T
)
•
n
e
w
p
a
c
k
a
g
e
b
u
i
l
t
o
v
e
r
A
W
T
:
S
w
i
n
g
•
•
a
l
w
a
y
s
i
n
c
l
u
d
e
t
h
e
s
e
i
m
p
o
r
t
s
a
t
t
h
e
s
t
a
r
t
o
f
y
o
u
r
p
r
o
g
r
a
m
:
•
i
m
p
o
r
t
j
a
v
a
.
a
w
t
.
*
;
i
m
p
o
r
t
j
a
v
a
.
a
w
t
.
e
v
e
n
t
.
*
;
i
m
p
o
r
t
j
a
v
a
x
.
s
w
i
n
g
.
*
;
i
m
p
o
r
t
j
a
v
a
x
.
s
w
i
n
g
.
e
v
e
n
t
.
*
;
•
•
i
f
y
o
u
u
s
e
A
f
f
i
n
e
T
r
a
n
s
f
o
r
m
(
s
e
e
g
e
o
m
e
t
r
i
c
t
r
a
n
s
f
o
r
m
a
t
i
o
n
s
i
n
n
e
x
t
c
h
a
p
t
e
r
)
,
t
h
e
n
i
n
c
l
u
d
e
a
s
w
e
l
l
:
•
i
m
p
o
r
t
j
a
v
a
.
a
w
t
.
g
e
o
m
.
*
;
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
.
e
x
a
m
p
l
e
:
a
b
a
s
i
c
G
U
I
i
n
J
a
v
a
w
i
t
h
S
w
i
n
g
a
n
d
A
W
T
import java.awt.*; import java.awt.event.*;
import javax.swing.*; import javax.swing.event.*;
public class MyFrame
{public static void main(String[] args)
{ JFrame frame = new JFrame("Test Frame");frame.setSize(400, 300);
frame.setVisible(true);
//Add the ubiquitous "Hello World" label.
JLabel label = new JLabel("Hello World");frame.getContentPane().add(
label
);
// Add a button into the frame
//frame.getContentPane().add(new JButton("OK"));frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
import java.awt.*; import java.awt.event.*;
import javax.swing.*; import javax.swing.event.*;
public class P
{ public static void main(String[] arg) { Gui gui = new Gui(); } }class Gui
{JFrame f; JButton b;
Gui()
{f = new JFrame(); f.setFocusable(true); f.setVisible(true);
f.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT));
b = new JButton(); b.setText("end");f.getContentPane().add(b);
b.addActionListener(new ActionListener()
{ public void actionPerformed(ActionEvent e) { System.exit(0); } } );f.setSize(new Dimension(150 + 16 , 150 + 38));
}
}
E
l
e
m
e
n
t
s
o
f
a
G
U
I
•
Containers
•
A
tomic components
•
Events
•
GUI managing thread
C
ontainers:
•
rectangular area containing other containers
and/or atomic components
•
top-level container: window containing the GUI
•
can be a
frame
(in fact, we can have several
frames) or an
applet
•
contains a
content pane
(special container)
and eventually a
menu bar
•
general-purpose container =
panel
Frames
•
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 wi
n
dows.
Creating Frames
import javax.swing.*;
public class MyFrame {public static void main(String[] args) {//Create and set up the window.
JFrame frame = new JFrame("Test Frame");frame.setSize(400, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Display the window.
frame.setVisible(true);
}
}
Adding Components into a
Frame
// Add a button into the frame
frame.getContentPane().add(new JButton("OK"));Title bar
Content pane
Content Pane Delegation in JDK
// Add a button into the frame
frame.getContentPane().add(new JButton("OK"));Title bar
Content pane
// Add a button into the frame
frame.add( new JButton("OK"));JFrame Class
•
A simple program that creates and shows a
JFrame
:
import java.awt.*;
import javax.swing.*;
public class SimpleFrame { public static void main(String[] args) {JFrame frame = new JFrame();
frame.setForeground(Color.WHITE);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(new Dimension(300, 120));
frame.setTitle("A frame");frame.setVisible(true);
}
}
atomic components:
•
elaborate input / output device
•
label
(text and/or icon) ,
tool tip
(a component's
property) ,
button
(with text and/or icon)
•
menubar
,
menu
,
menu item
•
check box
,
radio button
•
text field
,
text area
•
combo box
,
list
,
file chooser
•
slider
•
option pane
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: ");// 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"});
Button
Label
Text
field
Check
Box
Radio
Butto
n
Combo
Box
events:
•
due to the user manipulating the GUI (button
clicked, …)
•
, a container or atomic component (
event
source object)
may produce an
event object
•
in response to this event object
•
, an
event method
will be called to process
the request of the user.
GUI managing thread:
•
"in parallel" with the thread of the program
, the
GUI managing thread
:
•
handles the events triggered by the
containers and atomic components
•
it executes the event methods
associated with the events
•
carries out the painting of the containers
and atomic components
The GUI
Container: JFrame
Layout: BorderLayout
North
Center
Components: JLabel JButton, containing
an ImageIcon
G
U
I
h
i
e
r
a
r
c
h
y
o
f
c
o
n
t
a
i
n
e
r
s
a
n
d
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
s
•
the top-level container (frame or applet) contains:
•
e
v
e
n
t
u
a
l
l
y
,
a
m
e
n
u
b
a
r
(
w
e
i
n
c
l
u
d
e
i
t
w
i
t
h
s
e
t
J
M
e
n
u
B
a
r
(
)
)
•
always, a content pane (created automatically with the frame
or
•
a
p
p
l
e
t
a
n
d
o
b
t
a
i
n
e
d
w
i
t
h
g
e
t
C
o
n
t
e
n
t
P
a
n
e
(
)
)
•
the content pane contains:
•
several panels and/or atomic components
•
(
w
e
i
n
c
l
u
d
e
t
h
e
m
w
i
t
h
a
d
d
(
)
a
n
d
r
e
m
o
v
e
t
h
e
m
w
i
t
h
r
e
m
o
v
e
(
)
)
•
each panel contains:
•
eventually, nothing (reserved area for graphics)
•
or several panel containers and/or atomic components
•
(
w
e
i
n
c
l
u
d
e
t
h
e
m
w
i
t
h
a
d
d
(
)
a
n
d
r
e
m
o
v
e
t
h
e
m
w
i
t
h
r
e
m
o
v
e
(
)
)
•
Swing component inheritance hierarchy
•
C
o
m
p
o
n
e
n
t
d
e
f
i
n
e
s
m
e
t
h
o
d
s
t
h
a
t
c
a
n
b
e
u
s
e
d
i
n
i
t
s
s
u
b
c
l
a
s
s
e
s
(
f
o
r
e
x
a
m
p
l
e
,
p
a
i
n
t
a
n
d
r
e
p
a
i
n
t
)
•
C
o
n
t
a
i
n
e
r
-
c
o
l
l
e
c
t
i
o
n
o
f
r
e
l
a
t
e
d
c
o
m
p
o
n
e
n
t
s
–
W
h
e
n
u
s
i
n
g
J
F
r
a
m
e
s
,
a
t
t
a
c
h
c
o
m
p
o
n
e
n
t
s
t
o
t
h
e
c
o
n
t
e
n
t
p
a
n
e
(
a
C
o
n
t
a
i
n
e
r
)
–
M
e
t
h
o
d
a
d
d
t
o
a
d
d
c
o
m
p
o
n
e
n
t
s
t
o
c
o
n
t
e
n
t
p
a
n
e
•
J
C
o
m
p
o
n
e
n
t
-
s
u
p
e
r
c
l
a
s
s
t
o
m
o
s
t
S
w
i
n
g
c
o
m
p
o
n
e
n
t
s
•
Much of a component's functionality inherited
from these classes
GUI Class Hierarchy (Swing)
Container Classes
Container classes can
contain other GUI
components.
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.
GUI Helper Classes
Swing GUI Components
B
l
u
e
p
r
i
n
t
f
o
r
t
h
e
d
e
f
i
n
i
t
i
o
n
o
f
a
G
U
I
•
w
e
d
e
s
c
r
i
b
e
t
h
e
G
r
a
p
h
i
c
a
l
U
s
e
r
I
n
t
e
r
f
a
c
e
t
h
r
o
u
g
h
t
h
e
d
e
f
i
n
i
t
i
o
n
o
f
t
h
e
c
l
a
s
s
G
u
i
:
•
d
e
c
l
a
r
e
t
h
e
c
o
n
t
a
i
n
e
r
s
a
n
d
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
s
a
s
i
n
s
t
a
n
c
e
v
a
r
i
a
b
l
e
s
o
f
G
u
i
•
eventually, if we want to draw graphics in one or several panel or atomic component
•
,
s
u
b
c
l
a
s
s
i
t
s
c
l
a
s
s
a
n
d
o
v
e
r
r
i
d
e
i
t
s
p
a
i
n
t
C
o
m
p
o
n
e
n
t
m
e
t
h
o
d
•
=
s
u
c
h
s
u
b
c
l
a
s
s
e
s
a
r
e
d
e
f
i
n
e
d
a
s
m
e
m
b
e
r
c
l
a
s
s
e
s
o
f
G
u
i
•
i
n
s
i
d
e
t
h
e
c
o
n
s
t
r
u
c
t
o
r
o
f
G
u
i
:
•
create the containers (including one -or several- frame)
•
f
o
r
e
a
c
h
f
r
a
m
e
,
d
o
:
•
f
r
a
m
e
.
s
e
t
F
o
c
u
s
a
b
l
e
(
t
r
u
e
)
;
f
r
a
m
e
.
s
e
t
V
i
s
i
b
l
e
(
t
r
u
e
)
;
•
create the atomic components, menu elements and establish their hierarchy (what
contains what)
•
define event listeners for some containers, atomic components, menu elements
•
= reflex reactions to some events
•
= it is ONLY WITHIN these reflex reactions that the containers or atomic
components,
•
the hierarchy of the GUI and the menu can be modified
•
(add / remove an atomic component, reorganize the GUI, create another frame)
•
A
t
t
h
e
e
n
d
o
f
t
h
e
c
o
n
s
t
r
u
c
t
o
r
,
O
N
C
E
a
l
l
t
h
e
e
l
e
m
e
n
t
s
o
f
a
f
r
a
m
e
h
a
v
e
b
e
e
n
d
e
f
i
n
e
d
,
w
e
m
u
s
t
e
n
f
o
r
c
e
t
h
e
l
a
y
o
u
t
:
•
f
r
a
m
e
.
s
e
t
S
i
z
e
(
n
e
w
D
i
m
e
n
s
i
o
n
(
w
i
d
t
h
,
h
e
i
g
h
t
)
)
;
(
e
n
f
o
r
c
e
a
g
i
v
e
n
f
r
a
m
e
s
i
z
e
)
•
o
r
•
f
r
a
m
e
.
p
a
c
k
(
)
;
(
f
r
a
m
e
s
i
z
e
a
u
t
o
m
a
t
i
c
a
l
l
y
s
e
t
t
o
p
a
c
k
u
p
a
l
l
c
o
m
p
o
n
e
n
t
s
)
c
l
a
s
s
G
u
i
{J
F
r
a
m
e
f
r
a
m
e
;
.
.
.
.
.
.
J
B
u
t
t
o
n
b
1
;
.
.
.
.
.
.
s
u
b
c
l
a
s
s
(
e
s
)
o
f
J
P
a
n
e
l
w
i
t
h
p
a
i
n
t
C
o
m
p
o
n
e
n
t
m
e
t
h
o
d
o
v
e
r
r
i
d
e
n
.
G
u
i
(
)
{/
/
c
r
e
a
t
e
t
h
e
c
o
n
t
a
i
n
e
r
s
,
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
s
,
m
e
n
u
e
l
e
m
e
n
t
s
/
/
a
n
d
b
u
i
l
d
t
h
e
i
r
h
i
e
r
a
r
c
h
y
:
f
r
a
m
e
=
n
e
w
J
F
r
a
m
e
(
)
;
f
r
a
m
e
.
s
e
t
F
o
c
u
s
a
b
l
e
(
t
r
u
e
)
;
f
r
a
m
e
.
s
e
t
V
i
s
i
b
l
e
(
t
r
u
e
)
;
b
1
=
n
e
w
J
B
u
t
t
o
n
(
)
;
.
.
.
.
.
.
f
r
a
m
e
.
g
e
t
C
o
n
t
e
n
t
P
a
n
e
(
)
.
a
d
d
(
b
1
,
…
)
;
.
.
.
.
.
.
/
/
d
e
f
i
n
e
e
v
e
n
t
l
i
s
t
e
n
e
r
s
o
n
s
o
m
e
o
f
t
h
e
s
e
c
o
n
t
a
i
n
e
r
s
,
a
t
o
m
i
c
/
/
c
o
m
p
o
n
e
n
t
s
/
/
a
n
d
m
e
n
u
e
l
e
m
e
n
t
s
t
o
r
e
s
p
o
n
d
t
o
e
v
e
n
t
s
t
r
i
g
g
e
r
e
d
b
y
t
h
e
m
.
/
/
f
o
r
e
a
c
h
f
r
a
m
e
:
f
r
a
m
e
.
s
e
t
S
i
z
e
(
n
e
w
D
i
m
e
n
s
i
o
n
(
w
i
d
t
h
,
h
e
i
g
h
t
)
)
;
o
r
f
r
a
m
e
.
p
a
c
k
(
)
;
}
}
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
/**
* A simple GUI program that creates and opens a JFrame containing
* the message "Hello World" and an "OK" button. When the user clicks
* the OK button, the program ends.
*/
public class HelloWorldGUI2 {/**
* An object of type HelloWorldDisplay is a JPanel that displays
* the message "Hello World!".
*/
private static class HelloWorldDisplay extends JPanel { public void paintComponent(Graphics g) {super.paintComponent(g);
g.drawString( "Hello World!", 20, 30 );
}
}
/
*
*
*
A
n
o
b
j
e
c
t
o
f
t
y
p
e
B
u
t
t
o
n
H
a
n
d
l
e
r
c
a
n
"
l
i
s
t
e
n
"
f
o
r
A
c
t
i
o
n
E
v
e
n
t
s
*
(
t
h
e
t
y
p
e
o
f
e
v
e
n
t
t
h
a
t
i
s
g
e
n
e
r
a
t
e
d
w
h
e
n
t
h
e
u
s
e
r
c
l
i
c
k
s
a
*
b
u
t
t
o
n
)
.
W
h
e
n
t
h
e
e
v
e
n
t
o
c
c
u
r
s
,
t
h
e
B
u
t
t
o
n
H
a
n
d
l
e
r
r
e
s
p
o
n
d
s
*
b
y
e
x
i
t
i
n
g
t
h
e
p
r
o
g
r
a
m
.
*
/
p
r
i
v
a
t
e
s
t
a
t
i
c
c
l
a
s
s
B
u
t
t
o
n
H
a
n
d
l
e
r
i
m
p
l
e
m
e
n
t
s
A
c
t
i
o
n
L
i
s
t
e
n
e
r
{p
u
b
l
i
c
v
o
i
d
a
c
t
i
o
n
P
e
r
f
o
r
m
e
d
(
A
c
t
i
o
n
E
v
e
n
t
e
)
{S
y
s
t
e
m
.
e
x
i
t
(
0
)
;
}
}
/
*
*
*
T
h
e
m
a
i
n
p
r
o
g
r
a
m
c
r
e
a
t
e
s
a
w
i
n
d
o
w
c
o
n
t
a
i
n
i
n
g
a
H
e
l
l
o
W
o
r
l
d
D
i
s
p
l
a
y
*
a
n
d
a
b
u
t
t
o
n
.
A
B
u
t
t
o
n
H
a
n
d
l
e
r
i
s
c
r
e
a
t
e
d
t
h
a
t
w
i
l
l
e
n
d
t
h
e
p
r
o
g
r
a
m
*
w
h
e
n
t
h
e
u
s
e
r
c
l
i
c
k
s
t
h
e
b
u
t
t
o
n
.
*
/
p
u
b
l
i
c
s
t
a
t
i
c
v
o
i
d
m
a
i
n
(
S
t
r
i
n
g
[
]
a
r
g
s
)
{H
e
l
l
o
W
o
r
l
d
D
i
s
p
l
a
y
d
i
s
p
l
a
y
P
a
n
e
l
=
n
e
w
H
e
l
l
o
W
o
r
l
d
D
i
s
p
l
a
y
(
)
;
J
B
u
t
t
o
n
o
k
B
u
t
t
o
n
=
n
e
w
J
B
u
t
t
o
n
(
"
O
K
"
)
;
B
u
t
t
o
n
H
a
n
d
l
e
r
l
i
s
t
e
n
e
r
=
n
e
w
B
u
t
t
o
n
H
a
n
d
l
e
r
(
)
;
o
k
B
u
t
t
o
n
.
a
d
d
A
c
t
i
o
n
L
i
s
t
e
n
e
r
(
l
i
s
t
e
n
e
r
)
;
J
P
a
n
e
l
c
o
n
t
e
n
t
=
n
e
w
J
P
a
n
e
l
(
)
;
c
o
n
t
e
n
t
.
s
e
t
L
a
y
o
u
t
(
n
e
w
B
o
r
d
e
r
L
a
y
o
u
t
(
)
)
;
c
o
n
t
e
n
t
.
a
d
d
(
d
i
s
p
l
a
y
P
a
n
e
l
,
B
o
r
d
e
r
L
a
y
o
u
t
.
C
E
N
T
E
R
)
;
c
o
n
t
e
n
t
.
a
d
d
(
o
k
B
u
t
t
o
n
,
B
o
r
d
e
r
L
a
y
o
u
t
.
S
O
U
T
H
)
;
J
F
r
a
m
e
w
i
n
d
o
w
=
n
e
w
J
F
r
a
m
e
(
"
G
U
I
T
e
s
t
"
)
;
w
i
n
d
o
w
.
s
e
t
C
o
n
t
e
n
t
P
a
n
e
(
c
o
n
t
e
n
t
)
;
w
i
n
d
o
w
.
s
e
t
S
i
z
e
(
2
5
0
,
1
0
0
)
;
w
i
n
d
o
w
.
s
e
t
L
o
c
a
t
i
o
n
(
1
0
0
,
1
0
0
)
;
w
i
n
d
o
w
.
s
e
t
V
i
s
i
b
l
e
(
t
r
u
e
)
;
}
}
•
c
r
e
a
t
i
o
n
o
f
t
h
e
G
U
I
i
n
s
i
d
e
m
a
i
n
(
)
:
•
G
u
i
g
u
i
=
n
e
w
G
u
i
(
)
;
•
creation of the GUI inside a method of a class:
c
l
a
s
s
M
y
C
l
a
s
s
•
{•
G
u
i
g
u
i
;
•
.
.
.
.
.
.
•
.
.
.
m
y
M
e
t
h
o
d
(
.
.
.
)
•
{•
g
u
i
=
n
e
w
G
u
i
(
)
;
•
.
.
.
.
.
.
•
}
•
}
•
termination of the program:
•
r
e
a
c
h
i
n
g
t
h
e
e
n
d
o
f
m
a
i
n
(
)
i
s
n
o
t
e
n
o
u
g
h
t
o
t
e
r
m
i
n
a
t
e
t
h
e
p
r
o
g
r
a
m
!
•
indeed, the program consists of two threads:
•
t
h
e
d
e
f
a
u
l
t
t
h
r
e
a
d
t
h
a
t
e
x
e
c
u
t
e
s
m
a
i
n
(
)
•
the
GUI managing thread
that keeps
displaying the GUI
•
and answering events by executing event
methods
•
t
o
t
e
r
m
i
n
a
t
e
t
h
e
p
r
o
g
r
a
m
,
c
a
l
l
S
y
s
t
e
m
.
e
x
i
t
(
0
)
;
e
i
t
h
e
r
i
n
m
a
i
n
(
)
o
r
i
n
a
n
e
v
e
n
t
m
e
t
h
o
d
Steps to build a GUI
1. import package
2. set up top level container
(e.g. JFrame)
3. apply layout
(e.g. BorderLayout)
4. add components
(e.g. Label, Button)
5. REGISTER listeners
6. show it to the world !
The Source
1. import package
2. set up top level container
(e.g. JFrame)
3. apply layout
(e.g. BorderLayout)
4. add components
(e.g. Label, Button)
5. REGISTER listeners
6. show it to the world !
T
u
n
i
n
g
t
h
e
a
s
p
e
c
t
o
f
t
h
e
G
U
I
•
GUI basics
–
Graphical input and output with JOptionPane
–
Frames, buttons, labels, and text fields
–
Changing a frame's layout
–
Handling an action event
•
Laying out components
–
FlowLayout, GridLayout, and BorderLayout
•
Additional components and events
–
Keyboard and mouse events
Swing Components
•
Top Level Containers
•
General Purpose Containers
•
Special Purpose Containers
•
Basic Controls
•
Uneditable Information Displays
•
Interactive Displays of Highly Formatted
Information
Top Level Containers
Your application usually extends one of these classes !
•
Swing provides three generally useful top-level container classes:
JFrame
,
JDialog
, and
JApplet
.
When using these classes, you should keep these facts in mind:
•
To appear onscreen, every GUI component must be part of a
containment hierarchy
. A containment hierarchy is a tree of
components that has a top-level container as its root. We'll show
you one in a bit.
•
Each GUI component can be contained only once. If a component is
already in a container and you try to add it to another container, the
component will be removed from the first container and then added
to the second.
•
Each top-level container has a content pane that, generally
speaking, contains (directly or indirectly) the visible components in
that top-level container's GUI.
•
You can optionally add a menu bar to a top-level container. The
menu bar is by convention positioned within the top-level container,
but outside the content pane. Some look and feels, such as the Mac
OS look and feel, give you the option of placing the menu bar in
another place more appropriate for the look and feel, such as at the
top of the screen.
•
General Purpose Containers
•
General Purpose Containers
•
typically used to collect Basic Controls
(JButton, JChoiceBox…)
•
Added to layout of top-level containers
JPanel
JFrame
•
Special Purpose Containers
•
Basic Controls
•
Basic Controls
•
Unlike ‘passive’ containers, controls are the ‘active’
part of your GUI
•
Remark: containers aren’t only ‘passive’, they are also
‘active’ sources of events,
eg. Mouse-events.
•
Being the visible part of your interface, controls bring
your application to life
•
Controls are event sources !
•
Objects of your application register to controls to
handle the events
•
Uneditable Information Displays
•
Interactive Displays of Highly Formatted
Information
•
Interactive Displays of Highly Formatted
Information
•
Define standard interfaces for frequently needed
tasks
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: ");•
•
// 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"});
Button
Label
Text
field
Check
Box
Radio
Button
Combo
Box
Top Level Containers
JFrame Class
import java.awt.*; import java.awt.event.*;
import javax.swing.*; import javax.swing.event.*;
public class CMPE41
9
_GUI1
{ public static void main(String[] arg) { Gui gui = new Gui(); } }class Gui
{JFrame f;
Gui()
{ //Create and set up the window. f = new JFrame("Top Level Frame");f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Display the window.
//f.pack();
f.setSize(new Dimension(300 , 200));
f.setLocationRelativeTo(null);
f.setFocusable(true);
f.setVisible(true);
}}
•
Here's a picture of a frame created by an
application. The frame contains a green
menu bar (with no menus) and, in the
frame's content pane, a large blank, yellow
label.
public class CMPE41
9
_GUI1
{ public static void main(String[] arg) { Gui gui = new Gui(); } }class Gui
{ JFrame f; JMenuBar m;Gui()
{ //Create and set up the window. f = new JFrame("Top Level Frame");f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Create the menu bar. Make it have a green background.
m = new JMenuBar();
m.setOpaque(true);
m.setBackground(new Color(154, 165, 127));
m.setPreferredSize(new Dimension(200, 20));
f.setJMenuBar(m);
//Display the window.
//f.pack();
f.setSize(new Dimension(300 , 200));
f.setLocationRelativeTo(null);
f.setVisible(true); }}
import java.awt.*; import java.awt.event.*;
import javax.swing.*; import javax.swing.event.*;
public class CMPE41
9
_GUI1
{ public static void main(String[] arg) { Gui gui = new Gui(); } }class Gui
{ JFrame f; JMenuBar m; JLabel yl;
Gui()
{ //Create and set up the window.f = new JFrame("Top Level Frame");f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Create the menu bar. Make it have a green background.
m = new JMenuBar();
m.setOpaque(true);
m.setBackground(new Color(154, 165, 127));
m.setPreferredSize(new Dimension(200, 20));
//Create a yellow label to put in the content pane.
yl = new JLabel();
yl.setOpaque(true);
y
l
.
s
e
t
L
a
y
o
u
t
(
n
e
w
B
o
r
d
e
r
L
a
y
o
u
t
(
)
)
;
yl.setBackground(new Color(248, 213, 131));
yl.setPreferredSize(new Dimension(200, 180));
//Set the menu bar and add the label to the content pane.
f.setJMenuBar(m);
f.getContentPane().add(yl, BorderLayout.CENTER);
//Display the window.
//f.pack();
f.setSize(new Dimension(300 , 200));
f.setLocationRelativeTo(null);
f.setVisible(true);
}
}
T
u
n
i
n
g
t
h
e
a
s
p
e
c
t
o
f
t
h
e
G
U
I
•
f
o
n
t
:
•
F
o
n
t
f
o
n
t
=
n
e
w
F
o
n
t
(
n
a
m
e
,
s
t
y
l
e
,
s
i
z
e
)
;
•
w
i
t
h
n
a
m
e
=
"
S
e
r
i
f
"
(
e
q
u
i
v
a
l
e
n
t
t
o
"
T
i
m
e
s
R
o
m
a
n
"
)
•
o
r
"
S
a
n
s
S
e
r
i
f
"
(
e
q
u
i
v
a
l
e
n
t
t
o
"
H
e
l
v
e
t
i
c
a
"
)
•
o
r
"
M
o
n
o
s
p
a
c
e
d
"
(
e
q
u
i
v
a
l
e
n
t
t
o
"
C
o
u
r
i
e
r
"
)
•
s
t
y
l
e
=
F
o
n
t
.
P
L
A
I
N
o
r
F
o
n
t
.
B
O
L
D
o
r
F
o
n
t
.
I
T
A
L
I
C
•
o
r
F
o
n
t
.
B
O
L
D
+
F
o
n
t
.
I
T
A
L
I
C
(
c
o
m
b
i
n
a
t
i
o
n
)
•
s
i
z
e
=
f
r
o
m
1
0
t
o
7
2
•
i
m
p
o
s
e
a
f
o
n
t
t
o
t
h
e
t
e
x
t
i
n
s
i
d
e
a
c
o
n
t
a
i
n
e
r
,
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
o
r
m
e
n
u
e
l
e
m
e
n
t
:
•
c
.
s
e
t
F
o
n
t
(
f
o
n
t
)
;
import java.awt.*; import java.awt.event.*;
import javax.swing.*; import javax.swing.event.*;
public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame");frame.setSize(400, 300);
frame.setVisible(true);
//Add the ubiquitous "Hello World" label.
JLabel label = new JLabel("Hello World");frame.getContentPane().add(label);
Font font = new Font("SansSerif", Font.BOLD , 45);label.setFont(font);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
•
c
o
l
o
r
:
•
c
o
l
o
r
c
o
r
r
e
s
p
o
n
d
i
n
g
t
o
g
i
v
e
n
i
n
t
e
n
s
i
t
i
e
s
o
f
r
e
d
,
g
r
e
e
n
,
b
l
u
e
:
•
C
o
l
o
r
c
o
l
o
r
=
n
e
w
C
o
l
o
r
(
(
f
l
o
a
t
)
0
.
0
t
o
1
.
0
•
,
(
f
l
o
a
t
)
0
.
0
t
o
1
.
0
•
,
(
f
l
o
a
t
)
0
.
0
t
o
1
.
0
)
;
•
p
r
e
d
e
f
i
n
e
d
c
o
l
o
r
s
(
c
l
a
s
s
v
a
r
i
a
b
l
e
s
)
:
•
C
o
l
o
r
.
b
l
a
c
k
,
C
o
l
o
r
.
w
h
i
t
e
•
C
o
l
o
r
.
d
a
r
k
G
r
a
y
,
C
o
l
o
r
.
g
r
a
y
,
C
o
l
o
r
.
l
i
g
h
t
G
r
a
y
•
C
o
l
o
r
.
r
e
d
,
C
o
l
o
r
.
g
r
e
e
n
,
C
o
l
o
r
.
b
l
u
e
•
C
o
l
o
r
.
o
r
a
n
g
e
•
C
o
l
o
r
.
p
i
n
k
•
C
o
l
o
r
.
y
e
l
l
o
w
•
s
e
t
t
h
e
b
a
c
k
g
r
o
u
n
d
c
o
l
o
r
o
f
a
c
o
n
t
a
i
n
e
r
,
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
o
r
m
e
n
u
e
l
e
m
e
n
t
:
•
c
.
s
e
t
B
a
c
k
g
r
o
u
n
d
(
c
o
l
o
r
)
;
(
c
o
l
o
r
b
e
h
i
n
d
t
e
x
t
)
•
s
e
t
t
h
e
f
o
r
e
g
r
o
u
n
d
c
o
l
o
r
o
f
a
c
o
n
t
a
i
n
e
r
,
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
o
r
m
e
n
u
e
l
e
m
e
n
t
:
•
c
.
s
e
t
F
o
r
e
g
r
o
u
n
d
(
c
o
l
o
r
)
;
(
c
o
l
o
r
o
f
t
e
x
t
)
•
import java.awt.*; import java.awt.event.*;
•
import javax.swing.*; import javax.swing.event.*;
•
public class MyFrame {•
public static void main(String[] args) {•
JFrame frame = new JFrame("Test Frame");•
frame.setSize(400, 300);
•
frame.setVisible(true);
•
•
//Add the ubiquitous "Hello World" label.
•
JLabel label = new JLabel("Hello World");•
frame.getContentPane().add(label);
•
•
Font font = new Font("SansSerif", Font.BOLD , 45);•
label.setFont(font);
•
label.setForeground(Color.orange);
•
frame.setLocationRelativeTo(null);
•
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
•
}
•
}
•
border:
•
draw a line border around the container or atomic component
(single line of a
certain color =
–
C
o
l
o
r
.
b
l
a
c
k
,
C
o
l
o
r
.
g
r
a
y
,
C
o
l
o
r
.
b
l
u
e
,
.
.
.
)
:
•
c
.
s
e
t
B
o
r
d
e
r
(
B
o
r
d
e
r
F
a
c
t
o
r
y
.
c
r
e
a
t
e
L
i
n
e
B
o
r
d
e
r
(
c
o
l
o
r
)
)
;
•
d
r
a
w
a
n
e
t
c
h
e
d
b
o
r
d
e
r
a
r
o
u
n
d
t
h
e
c
o
n
t
a
i
n
e
r
o
r
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
(
t
h
i
n
f
u
r
r
o
w
)
:
•
c
.
s
e
t
B
o
r
d
e
r
(
B
o
r
d
e
r
F
a
c
t
o
r
y
.
c
r
e
a
t
e
E
t
c
h
e
d
B
o
r
d
e
r
(
)
)
;
•
d
r
a
w
a
r
a
i
s
e
d
b
e
v
e
l
b
o
r
d
e
r
a
r
o
u
n
d
t
h
e
c
o
n
t
a
i
n
e
r
o
r
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
(
g
i
v
e
s
t
h
e
i
l
l
u
s
i
o
n
t
h
a
t
t
h
e
c
o
n
t
.
o
r
c
o
m
p
.
i
s
a
b
o
v
e
t
h
e
s
u
r
r
o
u
n
d
i
n
g
l
e
v
e
l
)
:
•
c
.
s
e
t
B
o
r
d
e
r
(
B
o
r
d
e
r
F
a
c
t
o
r
y
.
c
r
e
a
t
e
R
a
i
s
e
d
B
e
v
e
l
B
o
r
d
e
r
(
)
)
;
•
d
r
a
w
a
l
o
w
e
r
e
d
b
e
v
e
l
b
o
r
d
e
r
a
r
o
u
n
d
t
h
e
c
o
n
t
a
i
n
e
r
o
r
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
(
g
i
v
e
s
t
h
e
i
l
l
u
s
i
o
n
t
h
a
t
t
h
e
c
o
n
t
.
o
r
c
o
m
p
.
i
s
b
e
l
o
w
t
h
e
s
u
r
r
o
u
n
d
i
n
g
l
e
v
e
l
)
:
•
c
.
s
e
t
B
o
r
d
e
r
(
B
o
r
d
e
r
F
a
c
t
o
r
y
.
c
r
e
a
t
e
L
o
w
e
r
e
d
B
e
v
e
l
B
o
r
d
e
r
(
)
)
;
•
label.setBorder(BorderFactory.createLineBorder(Color.orange));
•
l
a
b
e
l
.
s
e
t
B
o
r
d
e
r
(
B
o
r
d
e
r
F
a
c
t
o
r
y
.
c
r
e
a
t
e
E
t
c
h
e
d
B
o
r
d
e
r
(
)
)
;
•
icon:
•
image which is:
•
loaded from a .jpeg or .gif file
•
inserted within a label, a button or a menu
item, eventually beside some text
•
may be either a full scale image or a tiny
graphic symbol
•
(
e
v
o
k
i
n
g
t
h
e
f
u
n
c
t
i
o
n
a
l
i
t
y
o
f
t
h
e
b
u
t
t
o
n
)
I
m
a
g
e
I
c
o
n
i
c
o
n
=
n
e
w
I
m
a
g
e
I
c
o
n
(
f
i
l
e
n
a
m
e
.
j
p
e
g
o
r
f
i
l
e
n
a
m
e
.
g
i
f
)
;
•
i
c
o
n
i
s
p
a
s
s
e
d
a
s
a
n
a
r
g
u
m
e
n
t
t
o
t
h
e
c
o
n
s
t
r
u
c
t
o
r
•
of the label, button or menu item
Layout Managers
Layout Managers
•
Layout managers
Layout managers
–
Provided to arrange GUI components in a
Provided to arrange GUI components in a
container
container
–
Provide basic layout capabilities
Provide basic layout capabilities
–
Implement the interface
Implement the interface
LayoutManager
LayoutManager
FlowLayout
FlowLayout
•
FlowLayout
FlowLayout
–
Simplest layout manager
Simplest layout manager
–
Components are placed left to right in the order
Components are placed left to right in the order
they are added
they are added
–
Components can be left aligned, centered or right
Components can be left aligned, centered or right
aligned
aligned
•
F
l
o
w
L
a
y
o
u
t
=
d
e
f
a
u
l
t
f
o
r
p
a
n
e
l
if we are not satisfied with the default layout of
a container:
•
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
F
l
o
w
L
a
y
o
u
t
(
)
)
;
•
o
r
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
F
l
o
w
L
a
y
o
u
t
(
a
l
i
g
n
m
e
n
t
)
)
;
•
o
r
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
F
l
o
w
L
a
y
o
u
t
(
a
l
i
g
n
m
e
n
t
,
h
o
r
i
z
o
n
t
a
l
_
g
a
p
,
v
e
r
t
i
c
a
l
_
g
a
p
)
)
;
•
w
i
t
h
a
l
i
g
n
m
e
n
t
=
F
l
o
w
L
a
y
o
u
t
.
L
E
F
T
•
o
r
F
l
o
w
L
a
y
o
u
t
.
C
E
N
T
E
R
•
o
r
F
l
o
w
L
a
y
o
u
t
.
R
I
G
H
T
•
t
h
e
n
,
w
e
a
d
d
t
h
e
e
l
e
m
e
n
t
:
•
c
.
a
d
d
(
c
o
n
t
a
i
n
e
r
o
r
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
)
;
FlowLayout example
import java.awt.*;
import javax.swing.*;
public class FlowLayoutExample { public static void main(String[] args) {JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(new Dimension(320, 75));
frame.setTitle("Flow layout");frame.setLayout(new FlowLayout());
frame.add(new JLabel("Type your ZIP Code: "));frame.add(new JTextField(5));
frame.add(new JButton("Submit"));frame.setVisible(true);
}
}
•
B
o
r
d
e
r
L
a
y
o
u
t
=
d
e
f
a
u
l
t
f
o
r
c
o
n
t
e
n
t
p
a
n
e
•
we can lay the containers and/or atomic
components in 5 areas:
•
C
E
N
T
E
R
(
t
a
k
e
s
a
s
m
u
c
h
s
p
a
c
e
a
s
p
o
s
s
i
b
l
e
)
•
,
W
E
S
T
,
E
A
S
T
•
,
S
O
U
T
H
,
N
O
R
T
H
•
if we are not satisfied with the default layout of a container:
•
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
B
o
r
d
e
r
L
a
y
o
u
t
(
)
)
;
•
or
•
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
B
o
r
d
e
r
L
a
y
o
u
t
(
h
o
r
i
z
o
n
t
a
l
_
g
a
p
,
v
e
r
t
i
c
a
l
_
g
a
p
)
)
;
•
t
h
e
n
,
w
e
a
d
d
t
h
e
e
l
e
m
e
n
t
t
o
a
c
e
r
t
a
i
n
a
r
e
a
:
•
c
.
a
d
d
(
c
o
n
t
a
i
n
e
r
o
r
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
,
a
r
e
a
)
;
•
w
i
t
h
a
r
e
a
=
B
o
r
d
e
r
L
a
y
o
u
t
.
C
E
N
T
E
R
•
o
r
B
o
r
d
e
r
L
a
y
o
u
t
.
W
E
S
T
•
o
r
B
o
r
d
e
r
L
a
y
o
u
t
.
E
A
S
T
•
o
r
B
o
r
d
e
r
L
a
y
o
u
t
.
S
O
U
T
H
•
o
r
B
o
r
d
e
r
L
a
y
o
u
t
.
N
O
R
T
H
D
O
N
O
T
f
o
r
g
e
t
t
h
e
e
x
t
r
a
a
r
g
u
m
e
n
t
a
r
e
a
t
o
a
d
d
i
f
t
h
e
p
o
l
i
c
y
i
s
B
o
r
d
e
r
L
a
y
o
u
t
!
BorderLayout example
import java.awt.*;
import javax.swing.*;
public class BorderLayoutExample { public static void main(String[] args) {JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(new Dimension(210, 200));
frame.setTitle("Run for the border");frame.setLayout(new BorderLayout());
frame.add(new JButton("north"), BorderLayout.NORTH); frame.add(new JButton("south"), BorderLayout.SOUTH); frame.add(new JButton("west"), BorderLayout.WEST); frame.add(new JButton("east"), BorderLayout.EAST); frame.add(new JButton("center"),BorderLayout.CENTER);
frame.setVisible(true);
}
}
•
G
r
i
d
L
a
y
o
u
t
the containers and/or atomic components
are laid in a grid of equally sized cases
•
the grid is filled row after row, from the
upper to the lower,
•
each row being filled from left to right
•
if we are not satisfied with the default layout of a
container:
•
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
G
r
i
d
L
a
y
o
u
t
(
r
o
w
s
,
c
o
l
u
m
n
s
)
)
;
•
or
•
c
.
s
e
t
L
a
y
o
u
t
(
n
e
w
G
r
i
d
L
a
y
o
u
t
(
r
o
w
s
,
c
o
l
u
m
n
s
,
h
o
r
i
z
o
n
t
a
l
_
g
a
p
,
v
e
r
t
i
c
a
l
_
g
a
p
)
)
;
•
i
f
r
o
w
s
=
0
,
t
h
e
n
u
m
b
e
r
o
f
r
o
w
s
i
s
a
d
a
p
t
i
v
e
•
i
f
c
o
l
u
m
n
s
=
0
,
t
h
e
n
u
m
b
e
r
o
f
c
o
l
u
m
n
s
i
s
a
d
a
p
t
i
v
e
•
(
b
u
t
w
e
C
A
N
N
O
T
h
a
v
e
s
i
m
u
l
t
a
n
e
o
u
s
l
y
r
o
w
s
=
c
o
l
u
m
n
s
=
0
)
•
t
h
e
n
,
w
e
a
d
d
t
h
e
e
l
e
m
e
n
t
:
•
c
.
a
d
d
(
c
o
n
t
a
i
n
e
r
o
r
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
)
;
GridLayout example
import java.awt.*;
import javax.swing.*;
public class GridLayoutExample { public static void main(String[] args) {JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(new Dimension(300, 120));
frame.setTitle("The grid");// 2 rows, 3 columns
frame.setLayout(new GridLayout(2, 3));
for (int i = 1; i <= 6; i++) {JButton button = new JButton();
button.setText("Button " + i);frame.add(button);
}
frame.setVisible(true);
}
}
S
o
m
e
a
v
a
i
l
a
b
l
e
c
o
n
t
a
i
n
e
r
s
a
n
d
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
s
•
p
a
n
e
l
:
J
P
a
n
e
l
c
l
a
s
s
•
a
p
a
n
e
l
i
s
a
c
o
m
m
o
n
c
o
n
t
a
i
n
e
r
w
h
o
s
e
d
e
f
a
u
l
t
l
a
y
o
u
t
i
s
F
l
o
w
L
a
y
o
u
t
•
it may contain atomic components and/or other
panels or just serve for graphics
•
create the panel object:
J
P
a
n
e
l
p
a
n
e
l
=
n
e
w
J
P
a
n
e
l
(
)
;
•
a
d
d
t
o
o
r
r
e
m
o
v
e
f
r
o
m
t
h
e
p
a
n
e
l
a
n
o
t
h
e
r
p
a
n
e
l
o
r
a
n
a
t
o
m
i
c
c
o
m
p
o
n
e
n
t
:
•
p
a
n
e
l
.
a
d
d
(
p
a
n
e
l
o
r
a
t
o
m
i
c
c
o
m
p
.
)
;
(
i
f
n
o
t
B
o
r
d
e
r
L
a
y
o
u
t
)
•
p
a
n
e
l
.
a
d
d
(
p
a
n
e
l
o
r
a
t
o
m
i
c
c
o
m
p
.
,
a
r
e
a
)
;
(
i
f
B
o
r
d
e
r
L
a
y
o
u
t
)
•
p
a
n
e
l
.
r
e
m
o
v
e
(
p
a
n
e
l
o
r
c
o
m
p
.
)
;
•
p
a
n
e
l
.
r
e
m
o
v
e
A
l
l
(
)
;
•
e
v
e
n
t
u
a
l
l
y
,
s
e
t
t
h
e
s
i
z
e
o
f
t
h
e
p
a
n
e
l
:
•
•
p
a
n
e
l
.
s
e
t
P
r
e
f
e
r
r
e
d
S
i
z
e
(
n
e
w
D
i
m
e
n
s
i
o
n
(
w
i
d
t
h
,
h
e
i
g
h
t
)
)
;
•
in fact, just a wish that may not be strictly followed by the layout
manager...
Composite layout example
import java.awt.*;
import javax.swing.*;
public class TelephonePad { public static void main(String[] args) {JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(new Dimension(250, 200));
frame.setTitle("Telephone");frame.setLayout(new BorderLayout());
JPanel centerPanel = new JPanel(new GridLayout(4, 3));
for (int i = 1; i <= 9; i++) { centerPanel.add(new JButton("" + i));}
centerPanel.add(new JButton("*")); centerPanel.add(new JButton("0")); centerPanel.add(new JButton("#"));frame.add(centerPanel, BorderLayout.CENTER);
JPanel southPanel = new JPanel(new FlowLayout());
southPanel.add(new JLabel("Number to dial: "));southPanel.add(new JTextField(10));
frame.add(southPanel, BorderLayout.SOUTH);
frame.setVisible(true);
}
}
l
a
b
e
l
:
J
L
a
b
e
l
c
l
a
s
s
•
a label is a rectangular area which
contains a string text and/or an icon:
•
c
r
e
a
t
e
t
h
e
l
a
b
e
l
o
b
j
e
c
t
:
l
a
b
e
l
=
n
e
w
J
L
a
b
e
l
(
)
;
•
s
e
t
t
h
e
t
e
x
t
a
n
d
/
o
r
t
h
e
i
c
o
n
:
l
a
b
e
l
.
s
e
t
T
e
x
t
(
t
e
x
t
)
;
•
l
a
b
e
l
.
s
e
t
I
c
o
n
(
i
c
o
n
)
;
•
i
f
b
o
t
h
t
e
x
t
a
n
d
i
c
o
n
,
p
r
e
c
i
s
e
t
h
e
p
o
s
i
t
i
o
n
o
f
t
h
e
t
e
x
t
r
e
l
a
t
i
v
e
t
o
t
h
e
i
c
o
n
:
•
l
a
b
e
l
.
s
e
t
H
o
r
i
z
o
n
t
a
l
T
e
x
t
P
o
s
i
t
i
o
n
(
J
L
a
b
e
l
.
L
E
F
T
•
o
r
J
L
a
b
e
l
.
C
E
N
T
E
R
•
o
r
J
L
a
b
e
l
.
R
I
G
H
T
)
;
•
l
a
b
e
l
.
s
e
t
V
e
r
t
i
c
a
l
T
e
x
t
P
o
s
i
t
i
o
n
(
J
L
a
b
e
l
.
T
O
P
•
o
r
J
L
a
b
e
l
.
C
E
N
T
E
R
•
o
r
L
a
b
e
l
.
B
O
T
T
O
M
)
;
CREATE A PROJECT
Introduction to Object-Oriented Programming (OOP) and GUI concepts in Java, focusing on GUI hierarchy, designing GUIs, working with containers and components, utilizing JOptionPane for graphical input/output, and examples of showMessageDialog and showConfirmDialog in Java applications.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Graphical User Interfaces in Java Introduction Elements of a GUI GUI hierarchy of containers and components Blueprint for the definition of a GUI Tuning the aspect of the GUI Some available containers and atomic components Events created by containers and components Examples: how to use the containers and atomic components Elaborate GUIs (Mode variables, Dynamically evolving GUIs) Examples: elaborate GUIs
Graphical input and output with JOptionPane
JOptionPane An option pane is a simple dialog box for graphical input/output advantages: simple flexible (in some ways) looks better than the black box of death disadvantages: created with static methods; not very object-oriented not very powerful (just simple dialog boxes)
Types of JOptionPanes showMessageDialog(<parent>, <message>) Displays a message on a dialog with an OK button. showConfirmDialog(<parent>, <message>) Displays a message and list of choices Yes, No, Cancel; returns user's choice as an int with one of the following values: JOptionPane.YES_OPTION JOptionPane.NO_OPTION JOptionPane.CANCEL_OPTION showInputDialog(<parent>, <message>) Displays a message and text field for input; returns the user's value entered as a String. can pass null for the parent to all methods
JOptionPane examples 1 showMessageDialog analogous to System.out.println for displaying a simple message import javax.swing.*; public class MessageDialogExample { public static void main(String[] args) { JOptionPane.showMessageDialog(null,"How's the weather?"); JOptionPane.showMessageDialog(null, "Second message"); } }
JOptionPane examples 2 showConfirmDialog analogous to a System.out.print that prints a question, then reading an input value from the user (can only be one of the provided choices) import javax.swing.*; public class ConfirmDialogExample { public static void main(String[] args) { int choice = JOptionPane.showConfirmDialog(null, "Erase your hard disk?"); if (choice == JOptionPane.YES_OPTION) { JOptionPane.showMessageDialog(null, "Disk erased!"); } else { JOptionPane.showMessageDialog(null, "Cancelled."); } } }
JOptionPane examples 3 showInputDialog analogous to a System.out.print that prints a question, then reading an input value from the user (can be any value) import javax.swing.*; public class InputDialogExample { public static void main(String[] args) { String name = JOptionPane.showInputDialog(null,"What's your name?"); JOptionPane.showMessageDialog(null, "Yeehaw, " + name); } }
Introduction Graphical User Interface: collection of input / output devices (buttons, ) inserted into one or more windows these windows and IO devices are displayed on the screen also, the IO devices react to actions over the keyboard and mouse two predefined packages: old package: Abstract Windowing Toolkit (AWT) new package built over AWT: Swing always include these imports at the start of your program: import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; if you use AffineTransform (see geometric transformations in next chapter), then include as well: import java.awt.geom.*;
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.
example: a basic GUI in Java with Swing and AWT
import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); //Add the ubiquitous "Hello World" label. JLabel label = new JLabel("Hello World"); frame.getContentPane().add(label); // Add a button into the frame //frame.getContentPane().add(new JButton("OK")); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }
import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class P { public static void main(String[] arg) { Gui gui = new Gui(); } } class Gui { JFrame f; JButton b; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); f.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT)); b = new JButton(); b.setText("end"); f.getContentPane().add(b); b.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.exit(0); } } ); f.setSize(new Dimension(150 + 16 , 150 + 38)); } }
Elements of a GUI Containers Atomic components Events GUI managing thread
Containers: rectangular area containing other containers and/or atomic components top-level container: window containing the GUI can be a frame (in fact, we can have several frames) or an applet contains a content pane (special container) and eventually a menu bar general-purpose container = panel
frame menu bar panels content pane
Frames 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.
Creating Frames import javax.swing.*; public class MyFrame { public static void main(String[] args) { //Create and set up the window. JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Display the window. frame.setVisible(true); } }
Adding Components into a Frame Title bar Content pane // Add a button into the frame frame.getContentPane().add(new JButton("OK"));
Content Pane Delegation in JDK // Add a button into the frame frame.getContentPane().add(new JButton("OK")); Title bar // Add a button into the frame frame.add( new JButton("OK")); Content pane
JFrame Class javax.swing.JFrame +JFrame() +JFrame(title: String) +setSize(width: int, height: int): void +setLocation(x: int, y: int): void +setVisible(visible: boolean): void +setDefaultCloseOperation(mode: int): void +setLocationRelativeTo(c: Component): void +pack(): void Creates a default frame with no title. Creates a frame with the specified title. Specifies the size of the frame. Specifies the upper-left corner location of the frame. Sets true to display the frame. Specifies the operation when the frame is closed. Sets the location of the frame relative to the specified component. If the component is null, the frame is centered on the screen. Automatically sets the frame size to hold the components in the frame.
A simple program that creates and shows a JFrame: import java.awt.*; import javax.swing.*; public class SimpleFrame { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setForeground(Color.WHITE); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(new Dimension(300, 120)); frame.setTitle("A frame"); frame.setVisible(true); } }
atomic components: elaborate input / output device label (text and/or icon) , tool tip (a component's property) , button (with text and/or icon) menubar , menu , menu item check box , radio button text field , text area combo box , list , file chooser slider option pane
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: "); Radio Butto n 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"});
events: due to the user manipulating the GUI (button clicked, ) , a container or atomic component (event source object) may produce an event object in response to this event object , an event method will be called to process the request of the user.
GUI managing thread: "in parallel" with the thread of the program , the GUI managing thread: handles the events triggered by the containers and atomic components it executes the event methods associated with the events carries out the painting of the containers and atomic components
The GUI Container: JFrame North Layout: BorderLayout Center Components: JLabel JButton, containing an ImageIcon
GUI hierarchy of containers and atomic components the top-level container (frame or applet) contains: eventually, a menu bar (we include it with setJMenuBar() ) always, a content pane (created automatically with the frame or applet and obtained with getContentPane() ) the content pane contains: several panels and/or atomic components (we include them with add() and remove them with remove() ) each panel contains: eventually, nothing (reserved area for graphics) or several panel containers and/or atomic components (we include them with add() and remove them with remove() )
frame frame.setJMenuBar(menu_bar); frame.getContentPane() content_pane menu_bar frame.getContentPane().add(panel); frame.getContentPane().add(panel); frame.getContentPane().add(button); button panel2 panel1 panel1.add(label); panel1.add(text_field); label text_field
Swing component inheritance hierarchy java.lang.Object java.awt.Component java.awt.Container javax.swing.JComponent Component defines methods that can be used in its subclasses (for example, paint and repaint) Container - collection of related components When using JFrames, attach components to the content pane (a Container) Method add to add components to content pane JComponent - superclass to most Swing components Much of a component's functionality inherited from these classes
GUI Class Hierarchy (Swing) Classes in the java.awt package Dimension LayoutManager Heavyweight 1 Font FontMetrics Object Color Panel Applet JApplet Graphics Container Window Frame JFrame Component * Dialog JDialog Swing Components in the javax.swing package JComponent Lightweight
Container Classes Classes in the java.awt package Dimension LayoutManager Heavyweight 1 Font FontMetrics Object Color Panel Applet JApplet Graphics Container Window Frame JFrame Component * Dialog JDialog Swing Components in the javax.swing package JComponent JPanel Container classes can contain other GUI components. Lightweight
GUI Helper Classes Classes in the java.awt package Dimension LayoutManager Heavyweight 1 Font FontMetrics Object Color Panel Applet JApplet Graphics Container Window Frame JFrame Component * Dialog JDialog Swing Components in the javax.swing package JComponent JPanel 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. Lightweight
Swing GUI Components JCheckBoxMenuItem JMenu JMenuItem AbstractButton JRadioButtonMenuItem JButton JToggleButton JCheckBox JRadioButton JComponent JEditorPane JTextComponent JTextField JPasswordField JTextArea JComboBox JLabel JList JOptionPane JPanel JScrollBar JSlider JTabbedPane JSplitPane JLayeredPane JSeparator JScrollPane JRootPane JToolBar JMenuBar JColorChooser JToolTip JPopupMenu JFileChooser JTableHeader JTree JTable JInternalFrame JProgressBar JSpinner
Blueprint for the definition of a GUI we describe the Graphical User Interface through the definition of the class Gui: declare the containers and atomic components as instance variables of Gui eventually, if we want to draw graphics in one or several panel or atomic component , subclass its class and override its paintComponent method = such subclasses are defined as member classes of Gui inside the constructor of Gui: create the containers (including one -or several- frame) for each frame, do: frame.setFocusable(true); frame.setVisible(true); create the atomic components, menu elements and establish their hierarchy (what contains what) define event listeners for some containers, atomic components, menu elements = reflex reactions to some events = it is ONLY WITHIN these reflex reactions that the containers or atomic components, the hierarchy of the GUI and the menu can be modified (add / remove an atomic component, reorganize the GUI, create another frame) At the end of the constructor, ONCE all the elements of a frame have been defined, we must enforce the layout: frame.setSize(new Dimension(width , height)); (enforce a given frame size) or frame.pack(); (frame size automatically set to pack up all components)
class Gui { JFrame frame; . . . . . . JButton b1; . . . . . . subclass(es) of JPanel with paintComponent method overriden. Gui() { //create the containers, atomic components, menu elements //and build their hierarchy: frame = new JFrame(); frame.setFocusable(true); frame.setVisible(true); b1 = new JButton(); . . . . . . frame.getContentPane().add(b1 , ); . . . . . . //define event listeners on some of these containers, atomic //components // and menu elements to respond to events triggered by them. // for each frame: frame.setSize(new Dimension(width , height)); or frame.pack(); } }
import java.awt.*; import java.awt.event.*; import javax.swing.*; /** * A simple GUI program that creates and opens a JFrame containing * the message "Hello World" and an "OK" button. When the user clicks * the OK button, the program ends. */ public class HelloWorldGUI2 { /** * An object of type HelloWorldDisplay is a JPanel that displays * the message "Hello World!". */ private static class HelloWorldDisplay extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); g.drawString( "Hello World!", 20, 30 ); } }
/** * An object of type ButtonHandler can "listen" for ActionEvents * (the type of event that is generated when the user clicks a * button). When the event occurs, the ButtonHandler responds * by exiting the program. */ private static class ButtonHandler implements ActionListener { public void actionPerformed(ActionEvent e) { System.exit(0); } } /** * The main program creates a window containing a HelloWorldDisplay * and a button. A ButtonHandler is created that will end the program * when the user clicks the button. */ public static void main(String[] args) { HelloWorldDisplay displayPanel = new HelloWorldDisplay(); JButton okButton = new JButton("OK"); ButtonHandler listener = new ButtonHandler(); okButton.addActionListener(listener); JPanel content = new JPanel(); content.setLayout(new BorderLayout()); content.add(displayPanel, BorderLayout.CENTER); content.add(okButton, BorderLayout.SOUTH); JFrame window = new JFrame("GUI Test"); window.setContentPane(content); window.setSize(250,100); window.setLocation(100,100); window.setVisible(true); } }
creation of the GUI inside main(): Gui gui= new Gui(); creation of the GUI inside a method of a class: class MyClass { Gui gui; . . . . . . . . . myMethod(. . .) { gui = new Gui(); . . . . . . } }
termination of the program: reaching the end of main() is not enough to terminate the program! indeed, the program consists of two threads: the default thread that executes main() the GUI managing thread that keeps displaying the GUI and answering events by executing event methods to terminate the program, call System.exit(0); either in main() or in an event method
Steps to build a GUI 1. import package 2. set up top level container (e.g. JFrame) 3. apply layout (e.g. BorderLayout) 4. add components (e.g. Label, Button) 5. REGISTER listeners 6. show it to the world !
The Source 1. import package 2. set up top level container (e.g. JFrame) 3. apply layout (e.g. BorderLayout) 4. add components (e.g. Label, Button) 5. REGISTER listeners 6. show it to the world !
Tuning the aspect of the GUI GUI basics Graphical input and output with JOptionPane Frames, buttons, labels, and text fields Changing a frame's layout Handling an action event Laying out components FlowLayout, GridLayout, and BorderLayout Additional components and events Keyboard and mouse events
Swing Components Top Level Containers General Purpose Containers Special Purpose Containers Basic Controls Uneditable Information Displays Interactive Displays of Highly Formatted Information
Top Level Containers Your application usually extends one of these classes !
Swing provides three generally useful top-level container classes: JFrame, JDialog, and JApplet. When using these classes, you should keep these facts in mind: To appear onscreen, every GUI component must be part of a containment hierarchy. A containment hierarchy is a tree of components that has a top-level container as its root. We'll show you one in a bit. Each GUI component can be contained only once. If a component is already in a container and you try to add it to another container, the component will be removed from the first container and then added to the second. Each top-level container has a content pane that, generally speaking, contains (directly or indirectly) the visible components in that top-level container's GUI. You can optionally add a menu bar to a top-level container. The menu bar is by convention positioned within the top-level container, but outside the content pane. Some look and feels, such as the Mac OS look and feel, give you the option of placing the menu bar in another place more appropriate for the look and feel, such as at the top of the screen.
General Purpose Containers typically used to collect Basic Controls (JButton, JChoiceBox ) Added to layout of top-level containers JFrame JPanel
