CPE203/CSC203 Software Systems and Models CPE203/CSC203 Software Systems and Models Getting Started with Java GUI Programming Getting Started with Java GUI Programming Dr Zhou Suiping Office: N4-02-C87 Phone: 6790 6263 Email: [email protected]Dr Zhou Suiping Office: N4-02-C87 Phone: 6790 6263 Email: [email protected]
26
Embed
Getting Started with Java GUI Programming - · PDF fileCPE203/CSC203 Software Systems and Models Getting Started with Java GUI Programming ... zA frame uses its content pane to hold
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CPE2
03/C
SC20
3So
ftw
are
Syst
ems
and
Mod
els
CPE2
03/C
SC20
3So
ftw
are
Syst
ems
and
Mod
els
Get
ting
Star
ted
with
Jav
a G
UI
Prog
ram
min
gG
ettin
g St
arte
d w
ith J
ava
GU
I Pr
ogra
mm
ing
Dr
Zhou
Sui
ping
Off
ice:
N4-
02-C
87Ph
one:
679
0 62
63Em
ail:
assp
zhou
@nt
u.ed
u.sg
Dr
Zhou
Sui
ping
Off
ice:
N4-
02-C
87Ph
one:
679
0 62
63Em
ail:
assp
zhou
@nt
u.ed
u.sg
2
How
thi
s pa
rt w
ill b
e ta
ught
?H
ow t
his
part
will
be
taug
ht?
Java
GU
I pr
ogra
mm
ing
is N
OT
the
focu
s of
thi
s su
bjec
t, it
is u
sed
to il
lust
rate
maj
or c
once
pts
and
tech
niqu
es in
eve
nt-d
riven
par
adig
m a
nd m
odel
s.Th
eref
ore,
we
will
NO
T di
scus
s Ja
va G
UI
prog
ram
min
g in
muc
h de
tail
and
syst
emat
ical
lyW
e on
ly d
iscu
ss s
ome
very
bas
ic f
eatu
res
in
Java
GU
I pr
ogra
mm
ing.
Lear
n th
roug
h pr
actic
e: L
ab 1
and
Lab
2.
Java
GU
I pr
ogra
mm
ing
is N
OT
the
focu
s of
thi
s su
bjec
t, it
is u
sed
to il
lust
rate
maj
or c
once
pts
and
tech
niqu
es in
eve
nt-d
riven
par
adig
m a
nd m
odel
s.Th
eref
ore,
we
will
NO
T di
scus
s Ja
va G
UI
prog
ram
min
g in
muc
h de
tail
and
syst
emat
ical
lyW
e on
ly d
iscu
ss s
ome
very
bas
ic f
eatu
res
in
Java
GU
I pr
ogra
mm
ing.
Lear
n th
roug
h pr
actic
e: L
ab 1
and
Lab
2.
3
Out
line
Out
line
GU
I Cl
ass
Hie
rarc
hy (
AWT
& S
win
g)M
ajor
ste
ps a
nd f
eatu
res
in J
ava
GU
I Fr
ames
, pan
els,
layo
ut m
anag
ers
Dra
win
g on
Pan
els
Dra
win
g ge
omet
ric s
hape
s
GU
I Cl
ass
Hie
rarc
hy (
AWT
& S
win
g)M
ajor
ste
ps a
nd f
eatu
res
in J
ava
GU
I Fr
ames
, pan
els,
layo
ut m
anag
ers
Dra
win
g on
Pan
els
Dra
win
g ge
omet
ric s
hape
s
4
Firs
t, h
ave
som
e fe
elin
g of
so
me
GU
I ob
ject
s!Fi
rst,
hav
e so
me
feel
ing
of
som
e G
UI
obje
cts!
// C
reat
e a
butt
on w
ith
text
OK
JButton
jbtOK
= new JButton("OK");
// C
reat
e a
labe
l an
d a
chec
k bo
xJLabel
jlblName
= new JLabel("Enter
your name: ");
JCheckBox
jchkBold
= new JCheckBox("Bold");
// C
reat
e a
radi
o bu
tton
and
a t
ext
fiel
dJRadioButton
jrbRed
= new RadioButton("Red");
…
Text
Fiel
dC
ombo
Box
5
Som
e hi
stor
y: A
WT
vs. S
win
g So
me
hist
ory:
AW
T vs
. Sw
ing
Why
do
som
e G
UI
com
pone
nt c
lass
es h
ave
a J-
pref
ix?
Inst
ead
of
usin
gJB
utto
n , w
hy n
ot s
impl
y na
me
it Bu
tton
?
In f
act,
the
re is
a c
lass
alre
ady
nam
ed B
utto
n in
the
ja
va.a
wt
pack
age.
Whe
n Ja
va w
as in
trod
uced
, the
GU
I cl
asse
s w
ere
bund
led
in
a lib
rary
kno
wn
as t
he A
bstr
act
Win
dow
s To
olki
t (A
WT)
.AW
T is
fin
e fo
r de
velo
ping
sim
ple
GU
I, b
ut n
ot f
or
com
preh
ensi
ve G
UI
proj
ects
.W
ith t
he r
elea
se o
f Ja
va 2
, the
AW
Tus
er-in
terf
ace
com
pone
nts
wer
e re
plac
ed b
y a
mor
e ro
bust
, ver
satil
e, a
nd
flexi
ble
libra
ry k
now
n as
Sw
ing
com
pone
nts.
In f
act,
the
re is
a c
lass
alre
ady
nam
ed B
utto
n in
the
ja
va.a
wt
pack
age.
Whe
n Ja
va w
as in
trod
uced
, the
GU
I cl
asse
s w
ere
bund
led
in
a lib
rary
kno
wn
as t
he A
bstr
act
Win
dow
s To
olki
t (A
WT)
.AW
T is
fin
e fo
r de
velo
ping
sim
ple
GU
I, b
ut n
ot f
or
com
preh
ensi
ve G
UI
proj
ects
.W
ith t
he r
elea
se o
f Ja
va 2
, the
AW
Tus
er-in
terf
ace
com
pone
nts
wer
e re
plac
ed b
y a
mor
e ro
bust
, ver
satil
e, a
nd
flexi
ble
libra
ry k
now
n as
Sw
ing
com
pone
nts.
So,w
ithou
t J-
pref
ixar
eAW
TG
UI
obje
cts;
with
J-p
refix
are
Swin
gG
UI
obje
cts.
6
For
your
info
rmat
ion:
Jav
a G
UI
clas
s hi
erar
chy
For
your
info
rmat
ion:
Jav
a G
UI
clas
s hi
erar
chy
Dim
ensi
on
Font
Font
Met
rics
Com
pone
nt
Gra
phic
s
Obj
ect
Col
or
Con
tain
er
Pane
lA
pple
t
Fram
e
Dia
log
Win
dow
JCom
pone
nt
JApp
let
JFra
me
JDia
log
Swin
g C
ompo
nent
sin
the
java
x.sw
ing
pack
age
Cla
sses
in th
eja
va.a
wt p
acka
ge1
Layo
utM
anag
er
*
7
For
your
info
rmat
ion:
bas
ic
Swin
g G
UI
com
pone
nts
For
your
info
rmat
ion:
bas
ic
Swin
g G
UI
com
pone
nts
JM
enuI
tem
JC
heck
Box
Men
uIte
m
Abst
ract
Butto
n
JCom
pone
nt
JM
enu
JR
adio
But
tonM
enuI
tem
JTo
ggle
But
ton
JC
heck
Box
JRad
ioB
utto
n
JC
ombo
Box
JIn
tern
alFr
ame
JLa
yere
dPan
e
JLi
st JM
enuB
ar
JO
ptio
nPan
e
JPo
pupM
enu
JPr
ogre
ssB
ar
JFi
leC
hoos
er
JSc
rollB
ar
JSc
rollP
ane
JSe
para
tor
JSp
litPa
ne
JSl
ider
JTa
bbed
Pane JTa
ble
JTa
bleH
eade
r
JTex
tFie
ld J
Text
Com
pone
nt
JTe
xtA
rea
JTo
olB
ar J
Tool
Tip
JTr
ee
JR
ootP
ane
JPa
nel JPa
ssw
ordF
ield
JC
olor
Cho
oser
JLa
bel
JEd
itorP
ane
JSp
inne
r
JB
utto
n
8
Gen
eral
ste
ps in
cre
atin
g G
UI
Gen
eral
ste
ps in
cre
atin
g G
UI
Crea
te a
fra
me
Fram
e is
the
bas
is t
o co
ntai
n ot
her
GU
I co
mpo
nent
s, s
uch
as b
utto
ns, …
Add
GU
I co
mpo
nent
s in
to t
he c
onte
nt
pane
of
the
fram
eU
se p
rope
r La
yout
Man
ager
to
arra
nge
the
com
pone
nts
Crea
te a
fra
me
Fram
e is
the
bas
is t
o co
ntai
n ot
her
GU
I co
mpo
nent
s, s
uch
as b
utto
ns, …
Add
GU
I co
mpo
nent
s in
to t
he c
onte
nt
pane
of
the
fram
eU
se p
rope
r La
yout
Man
ager
to
arra
nge
the
com
pone
nts
9
Crea
ting
Fram
esCr
eatin
g Fr
ames
import javax.swing.*;
public class MyFrame
{public static void main(String[] args)
{JFrame
frame = new JFrame(“MyFrame");
frame.setSize(400, 300);
frame.setVisible(true);
//ex
it t
he p
rogr
am u
pon
clos
ing
frame.setDefaultCloseOperation(
JFrame.EXIT_ON_CLOSE);
}} Ru
n
10
Addi
ng c
ompo
nent
s in
to a
fra
me
Addi
ng c
ompo
nent
s in
to a
fra
me
// A
dd a
but
ton
into
the
fra
meframe.getContentPane().add( new JButton(“click
me"));
Con
tent
pan
e
A fr
ame
uses
its
cont
ent
pane
to
hol
d co
mpo
nent
s in
the
fr
ame.
Title
bar
frame.setTitle(“MyFrame”);
frame.getContentPane();
Run
11
Cent
erin
g fr
ames
Cent
erin
g fr
ames
scre
enH
eigh
t
scre
enW
idth
getH
eigh
t()
getW
idth
()
(x, y
)
Fram
e
(0, 0
)
By d
efau
lt, a
fra
me
is d
ispl
ayed
in t
he u
pper
-left
cor
ner
of
the
scre
en.
To d
ispl
ay a
fra
me
at a
spe
cifie
d lo
catio
n, u
se t
he
setL
ocat
ion(
x, y
)m
etho
d in
the
JFr
ame
clas
s. T
his
met
hod
plac
es t
he u
pper
left
cor
ner
of a
fra
me
at lo
catio
n (x
, y).
By d
efau
lt, a
fra
me
is d
ispl
ayed
in t
he u
pper
-left
cor
ner
of
the
scre
en.
To d
ispl
ay a
fra
me
at a
spe
cifie
d lo
catio
n, u
se t
he
setL
ocat
ion(
x, y
)m
etho
d in
the
JFr
ame
clas
s. T
his
met
hod
plac
es t
he u
pper
left
cor
ner
of a
fra
me
at lo
catio
n (x
, y).
12
Cent
erin
g fr
ames
(Co
nt’d
)Ce
nter
ing
fram
es (
Cont
’d)
import javax.swing.*;
import java.awt.*;
public class CenterFrame{
public static void main(String[] args) {
JFrame
frame = new JFrame("CenterFrame");
...
// Get the coordinate (x, y)
Dimension screenSize
=Toolkit.getDefaultToolkit().getScreenSize();
intx = (screenSize.width
-frame.getWidth()) / 2;
inty = (screenSize.height-
frame.getHeight()) / 2;
// place the frame to the center of the screen
frame.setLocation(x, y);
frame.setVisible(true);
}
}
Run
13
Usi
ng p
rope
r La
yout
Man
ager
to
arra
nge
GU
I co
mpo
nent
s U
sing
pro
per
Layo
ut M
anag
er t
o ar
rang
e G
UI
com
pone
nts
The
GU
I co
mpo
nent
s ar
e pl
aced
in c
onta
iner
s.Fo
r ex
ampl
e, t
he c
onte
nt p
ane
of a
fra
me
is a
con
tain
er.
Each
con
tain
er h
as a
layo
ut m
anag
erto
arr
ange
the
G
UI
com
pone
nts
with
in t
he c
onta
iner
.
Use
the
set
Layo
ut(L
ayou
tMan
ager
)m
etho
d to
ch
oose
a p
rope
r La
yout
Man
ager
in a
con
tain
er.
Diff
eren
t ty
pes
of L
ayou
t M
anag
ers
Flow
Layo
utG
ridLa
yout
Bord
erLa
yout
The
GU
I co
mpo
nent
s ar
e pl
aced
in c
onta
iner
s.Fo
r ex
ampl
e, t
he c
onte
nt p
ane
of a
fra
me
is a
con
tain
er.
Each
con
tain
er h
as a
layo
ut m
anag
erto
arr
ange
the
G
UI
com
pone
nts
with
in t
he c
onta
iner
.
Use
the
set
Layo
ut(L
ayou
tMan
ager
)m
etho
d to
ch
oose
a p
rope
r La
yout
Man
ager
in a
con
tain
er.
Diff
eren
t ty
pes
of L
ayou
t M
anag
ers
Flow
Layo
utG
ridLa
yout
Bord
erLa
yout
14
Flow
Layo
utM
anag
erFl
owLa
yout
Man
ager
The
com
pone
nts
are
arra
nged
fro
m le
ft t
o rig
ht in
th
e or
der
in w
hich
the
y w
ere
adde
d. W
hen
one
row
bec
omes
fill
ed, a
new
row
is s
tart
ed.
15
Flow
Layo
utM
anag
er (
Cont
’d)
Flow
Layo
utM
anag
er (
Cont
’d)
import javax.swing.*;
import java.awt.*;
public class ShowFlowlayoutextends JFrame{
public ShowFlowLayout() {
// Get the content
pane of the frame
Container container = getContentPane();
// Set FlowLayout, aligned left with horizontal gap 10 and vertical gap 20