1
2/27/2012
1
THIẾT KẾGIAO DIỆN NGƯỜI DÙNG
Th.SNguyễnThịMai Trang
Chương 5: Thiếtkếgiaodiệnngườidùng
2
MỤC TIÊU
lChươngnàycungcấpchosinhviênnhữngkiến
thứccơbảnđể xâydựnggiaodiện(Graphic User
Interface -GUI) củachươngtrình ứngdụngbằng
ngônngữjava, bao gồm:
–Nhữngnguyêntắcthiếtkếgiaodiện.
–Nhữngthưviện, góixâydựnggiaodiện: gồmnhữnglớp
(class), nhữnggiaotiếp(interface) quảnlýsựkiệnvà
nhữngthànhphần(components) xâydựnggiaodiện
ngườidùng.
–Bộquảnlýtrìnhbày(layout managers)
–Xửlýsựkiện
Chương 5: Thiếtkếgiaodiệnngườidùng
3
NỘI DUNG
lGiớithiệuthưviệnawt
lCáckháiniệmcơbản
lThiếtkếgiaodiện
lXửlýsựkiện
Chương 5: Thiếtkếgiaodiệnngườidùng
4
Thưviệnawt
lLàbộthưviệndùng để xâydựnggiaodiệnngười
dùngchomộtchươngtrình ứngdụngcó đầyđủ
cácthànhphầncơbảnnhư: Label, Button,
Checkbox, Radiobutton, Choice, List, Text Field,
Text Area, Scrollbar, Menu, Frame
2
Chương 5: Thiếtkếgiaodiệnngườidùng
5
Cáckháiniệmcơbản
lComponent
–Component làmộtđốitượngcóbiểudiễnđồ họađược
hiểnthịtrênmànhìnhmàngườidùngcóthểtươngtác
được. Vídụ: nútnhấn(button), ô nhậpliệu(textbox),
danhsách(listbox),…
lContainer
–Là đốitượngcóthểchứacác đốitượngkhác
lPanel
lFrame
lDialog
lScrollPanes
Chương 5: Thiếtkếgiaodiệnngườidùng
6
Cáckháiniệmcơbản
lLayout Manager
–Quảnlýcáchtrìnhbàycác đốitượng, bao gồm
lFlowLayout: Sắpxếpcác đốitượng từtráiqua phảivà
từtrênxuốngdưới. Các đốitượng đềugiữnguyênkích
thướccủamình.
lBorderLayout: Các đốitượng đượcđặttheocác đường
viềncủakhungchứatheocáccạnh West, East, South,
North và Center
lGridLayout: Tạomộtkhunglướivôhìnhvớicácô bằng
nhau. Các đốitượngsẽđặtvừakíchthướcvớitừngô đó.
Thứtựsắpxếpcũngtừtráiqua phảivàtừtrênxuống
dưới
Chương 5: Thiếtkếgiaodiệnngườidùng
7
Cáckháiniệmcơbản
lLayout Manager (tt)
lGridBagLayout: TươngtựnhưGridLayout, tuynhiênkích
thướccác đốitượngkhôngnhấtthiếtphảivừavới1 ô mà
cóthểlà2, 3 ô hay nhiềuhơntùytheocácràngbuộcmà
tachỉđịnhthôngqua đốitượngGridBagConstraint.
lNull Layout: Cáchtrìnhbàytựdo.
Chương 5: Thiếtkếgiaodiệnngườidùng
8
LớpComponent
lThiếtlậpvịtrívàkíchthướcđốitượng
–void setBounds( intx, inty, intwidth, intheight )
–void setBounds( Rectangle rec)
–void setLocation( intx, inty )
–void setLocation( Point pt)·
–void setSize( intwidth, intheight)
–void setSize( Dimension dim )
–Rectangle getBounds()
–booleancontains( intx, inty)
–booleancontains( Point pt )
3
Chương 5: Thiếtkếgiaodiệnngườidùng
9
LớpComponent
lThiếtlậpvịtrívàkíchthướcđốitượng
–Vídụ
lMyButton.setSize(newDimension(20, 10));
lMyButton.setLocation(newPoint(10, 10));
lMyButton.setBounds(10, 10, 20, 10);
Chương 5: Thiếtkếgiaodiệnngườidùng
10
LớpComponent (tt)
lThiếtlậpbềmặthiểnthịcủađốitượng
–void setBackground( Color c ): màunền
–void setForeground( Color c ): màukhungviền
–void setFont( Font f ): font chữ
–void setCursor( Cursor cr): con trỏchuột
lThiếtlậpchếđộ hiểnthịcho đốitượng
–void setEnabled( booleanflag): vôhiệu/ hữuhiệu
–void setVisible( booleanflag): ẩn/ hiểnthị
Chương 5: Thiếtkếgiaodiệnngườidùng
11
LớpComponent (tt)
lMộtsốđốitượngthuộclớpComponent
–Button
–Checkbox·
–Container
–Label
–List·
–Scrollbar·
–TextComponent
lTextField
lTextArea,
Chương 5: Thiếtkếgiaodiệnngườidùng
12
NỘI DUNG
lGiớithiệuthưviệnawt
lCáckháiniệmcơbản
lThiếtkếgiaodiện
lXửlýsựkiện
4
Chương 5: Thiếtkếgiaodiệnngườidùng
13
Tạocửasổ
lThựchiệnqua cácbước
–TạođốitượngFrame
–Xác địnhkíchthướccủaFrame
–HiểnthịFrame trênmànhình
Chương 5: Thiếtkếgiaodiệnngườidùng
14
Tạomenu
lSửdụngcáclớpMenuBar, Menu, MenuItem,
MenuShortcut.
Chương 5: Thiếtkếgiaodiệnngườidùng
15
Thêmcáccomponent vàocontainer
lSửdụngphươngthứcadd
Chương 5: Thiếtkếgiaodiệnngườidùng
16
Trìnhbàycáccomponent
lFlowLayout: Đốivớimộtcontainer trìnhbàytheo
kiểuFlowLayoutthì:
–Cáccomponent đượcsắpxếptheothứtựtừtráisang
phảivàtừtrênxuốngdưới.
–Cókíchthướcnhưmongmuốn.
–NếuchiềurộngcủaContainer không đủ chỗchocác
component thìchúngtựđộngtạoramộtdòngmới.
–Thường đượcdùng đểđể sắpxếpcácbuttontrong1
panel.
–Cóthểđiềuchỉnhkhoảngcáchgiữacáccomponent.
5
Chương 5: Thiếtkếgiaodiệnngườidùng
17
Trìnhbàycáccomponent
lFlowLayout(tt):
Chương 5: Thiếtkếgiaodiệnngườidùng
18
BorderLayout
lKhungchứađượcchialàm5 vùng: NORTH, SOUTH,
WEST, EAST vàCENTER, chophépsắpxếpvàthay đổi
kíchthướccủanhữngcomponents chứatrongnósaocho
vứavới5 vùngtrên
lKhôngcầnphảigắncomponent vàochotấtcảcácvùng.·
lCáccomponent ởvùngNORTH vàSOUTH cóchiềucao
tùyý nhưngcóchiềurộng đúngbằngchiềurộngvùng
chứa.
lCáccomponent ởvùngEAST vàWEST cóchiềurộngtùyý
nhưngcóchiềucao đúngbằngchiềucaovùngchứa.
lCáccomponent ởvùngCENTER cóchiềucaovàchiều
rộngphụthuộcvàocácvùngxungquanh.
Chương 5: Thiếtkếgiaodiệnngườidùng
19
BorderLayout
Chương 5: Thiếtkếgiaodiệnngườidùng
20
GridLayout
lBộtrìnhbàytạomộtkhunglướivôhìnhvớicácô
bằngnhau.
lCác đốitượngsẽđặtvừakíchthướcvớitừngô
đó. Thứtựsắpxếptừtráiqua phảivàtừtrên
xuốngdưới.