phần mềm công cụ thiết kế gui

M ch y ch ng trình GUI Design Studio trong MS Windows... B sung Edit Boxvà Multiple Line Edit Boxnh hình PL4... Các phím không có nh, ta b sung nó sau.. B sung icons trên các buttons...

Ph l c

PH N M M CÔNG C THI T K GUI

1 Gi i thi u

Ngày nay, có nhi u công c ph n m m th ng m i v i kh n ng h tr vi c thi t k giao

di n ng i s d ng h a (GUI) Ph l cnày gi i thi u m t ví d v thi t k GUI b ng

ph n m m công c GUI Design Studio [2] Ph n m m công c GUI Design Studio phiên b n

th nghi m và h ng d n s d ng có th c t i v t trang Web c a hãng Caretta

Software theo a ch nh sau: http://www.carettasoftware.com

B n thi t k cu i cùng c a ví d trong ph l c này nh nh trên Hình PL1 Nó bao g m các thành ph n c b n nh c a s , h p tho i, th c n, thanh công c , thanh tr ng thái và các

ph n t h a (widgets) trên chúng Ngoài ra, nó còn có các liên k t gi a các thành ph n

c a giao di n

Hình PL1

GUI Design Studio c s d ng th c hi n các b c thi t k cho ví d này nh sau:

Ph l c Ph n m m công c xây d ng prototype Thi t k prototype t ng tác Có ngh a là th c hi n k t n i các thành ph n GUI

hình thành storyboard Storyboard này c l u tr vào t p d án m i và có th ch y

mô ph ng ánh giá

2 Thi t k các thành ph n GUI

M t thi t k GUI là t p tài li u s bao g m m i c a s , h p tho i, hình thành nên

ng d ng Do v y, t t nh t là tách chúng thành các nhóm thành ph n d qu n lý

Ví d GUI trong Ph l c này có ba thành ph n chính:

C a s ng d ng chính

C a s danh sách nhi m v

H p tho i chi ti t nhi m v Sau ây là b y b c c b n trong thi t k các thành ph n GUIcho thí d này

B c 1 Kh i t o d án

1 M ch y ch ng trình GUI Design Studio trong MS Windows

2 S d ng l nh th c n "File | New Project " m h p tho i "New Project".

3 Ch n ho c t o l p danh m c n i l u tr d án, ví d C:\My GUI Designs\".

4 Nh pxâu ký t Thuc_hanh vào h pv n b nName, vi c này s t o ra danh m c con

Thuc-hanh trong d án

5 Nh n phím OK , d án m i c t o l p và c m ra trên màn hình Có th s

d ng l nh th c n "View | Design Bar Position i u ch nh v trí hi n th c acông

c thi t k Design Bar.

T p d án s có tên v a nh p v i ph n m r ng là gdp (Thuc_hanh.gdp).

B c 2 T o l p h p tho i nhi m v

T o l p h p tho i dành cho ng i s d ng khi h mu n mô ph ngnhi m v m i Các b c

ti n hành nh sau:

T o l p tài li u thi t k m i b ng ch n l nh th c n Project | New Design hay nh n chu t trên phím l nh "New Design trên panel thi t k Project (hình PL2)

Hình PL2

Nh p tên "NewTaskDialog" vào h p v n b n và nh n phím OK ( ) Hãy l u tr tài li u thi t k c athành ph n này lên t p v itên là NewTaskDialog.gui

Ch n panel thi t k "Elements" và nhóm"Windows and Dialogs".

Tìm n ph n t "Dialog" di và nh chúng vàothi t k

Nh p úp chu t trên h p tho i m trình so n th o tính ch t, sau óthay i tiêu (Title) thành "Task Details" Nh n phím OK ch p nh n s thay i (hình PL3)

Ph l c Ph n m m công c xây d ng prototype

Hình PL3

m b o r ng l nh th c n "Layout | Snap to Edges" c ch n (checked) Vi c này cho phép các ph n t GUI t ng c n ch nh m t cách phù h p

Ch n l i thi t k mong mu n (ví d , Right Buttons) trong nhóm ph n t "Design Grids" Di và nh nó trên h p tho i làm c s b trí các i u khi n (ví d các phím

OK, Cancel, ) Dãn l i ra toàn b c a s

Di và nh các phím "OK" và"Cancel" t nhóm ph n t Buttons lên trên l i, phía ph i Chuy n n nhóm Text and Edit Box và b sung c p ph n t "Left Text" vào phía trái

c a l i Nh p úp chu t trên chúng thay i Text thành "&Summary" và

"&Description" Ký t k ti psau d u & trong sâu có ngh a r ng nó là phím l nh c p t c

B sung Edit Boxvà Multiple Line Edit Boxnh hình PL4

Hình PL4

C n ch nh multiple line edit box nh sau:Ch n Description và multiple line edit box (có

th s d ng phím Ctl+Click ch n c hai ng th i) nh hình PL4; S d ng l nh

"Layout | Align | Top" hay phím l nh trên thanh công c c n ch nh

Lo i b các dòng v n b ntrong thu c tính Textc a Edit Boxvà multiple line edit box.

B c 3 T o l p c a s ng d ng

Hãy t tên t p d án c a ph n t GUI s thi t k B c 3 này là ApplicationWindow.gui Thông th ng c a s ng d ng là c a s MDI (Multiple Document Interface) v i thanh th c

n, thanh công c và thanh tr ng thái (hình PL5)

Ph l c Ph n m m công c xây d ng prototype

Hình PL5 Trình t thi t k nh sau:

T o l p tài li u thi t k m i v i tên "ApplicationWindow" t ng t cách t o l p ra

"NewTaskDialog" trong b c 2

T panel "Elements", tìm n ph n t Application "Frame Window"trong nhóm "Windows and Dialogs"và b sung nó vào thi t k

Nh p úp chu t trên c a s ithu c tínhtitlethành Thuc_hanh

B sung "Menu Bar" t nhóm"Toolbars and Menus" Hi u ch nh v trí và kích th c cho phù h p

Chèn m c th c n m i Task gi a View và Window M trình so n th o thu c tính th c n và ch n &View trong danh sách các m c th c n Nh p &Task vào

h p so n th o, nh n phím Insert (phím t t Alt+I) sau ó nh n phím OK ch p nh n

s thay i(Hình 6)

Hình PL6

B sung "Docked Toolbar" d i th c n t ng t nh làm v i Menu Bar Ta ã có thanh

công c tr ng Hãy b sung các phím (buttons) vào thanh công c b ng cách ch n

Ph l c Ph n m m công c xây d ng prototype

Toobar Button trong cùng thành ph n Toolbar and Menu Các phím không có nh, ta

b sung nó sau

B sung icons trên các buttons Ch n panel thi t k Icons và ch n nhóm Toolbars

nh v các iconsl nh phù h p và t chúng trên nh các buttons

T o l p "Status Bar" Ch n panel"Elements" và ch n nhóm"Toolbars and Menus" và g n thanh tr ng thái vào áy c a s ngd ng

B sung thanh tr t vào c a s tài li u t nhóm "Controllers".

B sung các ph n t "Status Indicator" vào thanh tr ng thái t nhóm "Toolbars and Menus" B sung 3 ch báo và s a các thu c tính c a nó thành các ch báo chu n "CAP",

"NUM" và "SCRL" cho Caps Lock, Num Lock vàScroll Lock t ng ng Hãy ch báo

NUM là tích c c

Ghi l i thi t k vào t p K t thúc thi t k c a s ng d ng

B c 4 T o l p c a s tài li u

M c tiêu c a b c này là t o l p thêm thành ph n m i cho ng d ng Task List Manager Hãy t tên t p l u tr d án thành ph n này là TaskListDocument.gui Vi c t o l p c a s tài li u c th c hi n nh sau:

Chuy n sang panel "Project" t o l p tài li u thi t k m i G i nó là

"TaskListDocument".

Trong panel Elements , hãy tìm n ph n t Document "Mini Frame Window" trong nhóm "Windows and Dialogs" b sung vào thi t k

i thu c tính titlec a nó thành "Task List".

Vào nhóm "Lists and Trees" và tìm n ph n t "Check List Box" b sung nó vào thi t

k ( t trên c a s tài li u).Dãn ph n t này cho kín c a s tài li u

Nh n úp trên list box m h p tho i so n th o thu c tính Ch n tab Style và tùy

ch n "Flat Style" h p so nth o có ng biên m nh(Hình PL7)

Hình PL7

Nh p t ng xâu ký t ví d sau ây vào Edit boxvà s d ng Alt+I nh p vào danh sách

Walk the dog Breakfast Fix the car Lunch

Watch some TV Dinner

More TV

Go to bed

S d ng tab Data ánh d u các m c c ch n Hình PL8 là ví d ch n m c

Lunch Nh p chu t trên phím OK ch p nh n

Ph l c Ph n m m công c xây d ng prototype

Hình PL8

B sung mô t (anotations) vào thi t k Có th tìm th y các ph n t mô t trong nhóm

khác Chuy n sang panel Annotations , ch n "Boxed Annotation" g n nó vào bên ph i

c a s tài li u(hình PL9)

Hãy s a i thu c tính Titlec a ph n t này thành More Info và nh p xâu ký t , ví d ,

We probably want more info in columns with headers for sorting

Hình PL9

B sung d u hi u n i v i h p mô t G n Large Dot Target

vào danh sách Nh p chu t trên phím l nh Make Connection vào ch k t n i

Con ch y chu t s có hình d ng bút chì Hãy nh p bút trên d u b t u n i, sau

ó di và nh p chu t trên h p mô t k t thúc (hình PL10)

L u tr thi t k vào t p và k t thúc b c 4

Hình PL10

Ph l c Ph n m m công c xây d ng prototype

B c 5 T o l p h p tho i Edit Task

H p tho i Edit Task xu t hi n khi ng i s d ng mu n s a i m t nhi m v ang có s n trong máy (hình PL11) Nó t ng t h p tho i New Task Có th s d ng cùng m t h p tho i cho hai công vi c này Vi c tách thành hai h p tho i có ích cho vi c trình di n thi t k khái

ni m

Hình PL11 Các b c th c hi n nh sau:

Sao chép (copy) thi t k h p tho i New Task v a thi t k M t p "NewTaskDialog.gui"

b ng cách nh p úp chu t trên cây d án(trong panel Project )

S d ng l nh th c n "Edit | Select All" ch n m i ph n t S d ng l nh "Edit | Copy" sao chép t t c các ph n t vào clipboard.

T panel "Project"t o l p tài li u thi t k m i, g i là "EditTaskDialog".

S d ng l nh "Edit | Paste" dán m i ph nt v a sao chép D ch chuy n chúng vào

gi a màn hình

Thay i v n b n trong h p so n th o Summary thành "Lunch" và nh p dòng v n b n phù h p vào tr ng Description, ví d "Phone the nearest pizza place and order something nice."

L u thi t k vào av i tên t p EditTaskDialog.gui, k t thúc b c 5

B c 6 G p c l i

quan sát c ng d ng Task List Manager khi nó ch ynh th nào (hình PL12), ta c n

g p các thành ph n thi t k l i có toàn c nh các màn hình (screenshot)

Các b c th c hi n nh d i ây

M panel "Project"và t o l p tài li u thi t k m i v i tên "Screenshot".

Di và nh t p thi t k "ApplicationWindow.gui" t cây d án vào thi t k

Th c hi n t ng t v i các t p thi t k "TaskListDocument.gui" và "EditTaskDialog.gui"

nh các thành ph n hình thành lên screenshot

L u tr k t qu vào t p v i tên Screenshot.guivà k t thúc

Ph l c Ph n m m công c xây d ng prototype

Hình PL12

B c 7 Quan sát k t qu

Cho n th i i m hi n t i, thi t k c th c hi n trong Design Mode s d ng t p l c màu thi t k ôi khi ng i s d ng mong mu n quan sát nhanh b n thi t k v i vi c s

d ng t p l c màu khác (ví d l c màu c a Windows) v i Annotations, Design Grid Lines, Toolbar Buttons Vi c này c th c hi n nh công c Simulator, nó trình di n thi t k trong c a s màn hình y

Th t th c hi n nh sau:

M t p "Screenshot.gui"

S d ng l nh th c n "Simulator | Run Simulator" hay phím l nh trên thanh công c

Nh n phím ESC thoát kh i ch mô ph ngsau quan sát

3 Thi t k prototype ng d ng t ng tác

Trong th gi i phim nh, khái ni m 'storyboard' c s d ng nh ngh a trình t các nh liên ti p nhau, hình thành câu chuy n Trong ph n m m, storyboard là trình t các màn hình GUI hình thành lu ng i u khi n nh ng i s d ng th c hi n hành ng

Ta s s d ng các thành ph n thi t k c th c hi n theo h ng d n trên ây xây d ng

storyboards Ti p theo, ta s b sung thi t k c a s tài li u và gi i thi u các thành ph n h p tho i chu n

Sau ây là các b c th c hi n thi t k b n m u ng d ngt ng tác

B c 1 T o l p storyboard n gi n

M panel "Project" và t o l p tài li u thi t k m i "Storyboard1"

Di và nh t p thi t k "ApplicationWindow.gui"t cây d án vào thi t k

Th c hi n t ng t v i các t p thi t k "TaskListDocument.gui", "EditTaskDialog.gui"và

"NewTaskDialog.gui".

Ph l c Ph n m m công c xây d ng prototype

S d ng công c "Make Connection" t o l p các ng d n Có th s d ng

ng th i phím Shift khi nh n phím trên thanh công c có kh n ng t o nhi u k t

n i Nh n phím ESC thoát kh i ch k t n i

Chú ý: Khi không n i c các bi u t ng trên thanh công c v i c a s có ngh a là

ch a v các Toolbar Button mà ch di nh Icons trên thanh công c Hãy k t n i các phím trên thanh công c nh d i ây l n l t vào các thành ph n

TaskListDocument, NewTaskDialog vàEditTaskDialog t ng ng

L u tr lên t p

Ch y mô ph ng Simulator (F9 key) nhìn th y k t qu

Nh n phím ESC thoát kh i ch mô ph ng và ch n ph n t ApplicationWindow S

d ng l nh th c n "Design | Select Representative Element" ch n ph n t i di n

ng vi n xanh xu t hi n xung quanh ph n t v a ch n(hình PL13)

Hình PL13

Ch y l i mô ph ng

L u tr thi t k vào t p Storyboard1.gui và k t thúc b c này

B c 2 B sung các c tr ng d n ng

Trong b c này ta s b sung vào storyboard b ng cách thay i tài li u Task List t c a s

modal sang modeless ng th i, ta s kích ho t phím óng sao cho các h p tho i và c a s

có th c óng b ng chu t hay phím ESC Hình PL14 là ví d thi t k c a b c này

M tài li u thi t k "Storyboard1"

S d ng l nh th c n "File | Save As " ghi l i thi t k v i tên "Storyboard2.gui"

Tr c h t ta t o l p c a s modeless: Nh p úp chu t trên ng liên k t gi a phím công c New Document và c a s tài li u Task List m thu c tính c a chúng Trong Navigation Type hãy thay i Modal Popup thành Show Window (hình PL15)

Ch y Simulator (F9) và th nh p chu t trên phím công c 'New Document' m c a s tài li u Task List, nh p chu t trên các phím 'New Task' ho c'Edit Task' m h p tho i

Ta th y c a s Task List t n t i ng th i v i chúng Thoát kh i ch mô ph ng

b ng phím ESC

Ph l c Ph n m m công c xây d ng prototype

Hình PL14

Hình PL15

M c nh, m i c a s c m gi a màn hình Có th thay i v trí hi n th các h p tho i T panel "Storyboard" trên Design Bar, hãy di-nh "Window Position Anchor vào

c a s ng d ng, n i mu n t c a s tài li u(hình PL16)

Hình PL16

S d ng "Make Connection" k t n i anchor v i c a s tài li u.

Làm vi c v i c a s tài li u: b sung phím "Close" t panel "Storyboard" và k t n i nó

v i phím óng X trên thanh tiêu c a c a s nh trên hình PL14

V i các phím "OK" và"Cancel": B sung các ph n t "Close and Accept" và"Close and

Ph l c Ph n m m công c xây d ng prototype

Cancel" t panel "Storyboard" và k t n i chúng t i các phím "OK" và "Cancel" nh trên hình PL14 ng th i k t n i phím óng X trên thanh tiêu c a c a s vào ph n t

"Close and Accept"

B sung ph n t "Exit" K t n i nó v i phím óng X trên thanh tiêu c a c a s nh trên hình PL14 M i khi kích ho t h p l nh "Exit", b mô ph ng c óng

Ki m th thi t k

B c 3 B sung h p tho i chu n File Open dialog

B c này xây d ng trên c s ch c n ng c a b c trên ây và a ra cách s d ng các ph n

t th vi n chu n Hình PL17 là ví d thi t k c a b c này

Hình PL17

Tr c h t, ta c n t o l p t p thi t k "Empty Document" Hãy s d ng thi t k có s n trên ây là "Task List Document" làm c s

B sung các tính ch t d n ng theo cách ã trình bày trên ây hay theo cách sau:

Ch n t p "TaskListDocument.gui" trong cây d án sau ó s d ng th c n "Project | Duplicate Design " hay phím l nh Duplicate Design

Nh p tên tài li u m i "EmptyDocument".

Ch n hai ph n t mô t và h y chúng b ng l nh th c n "Edit | Delete" hay phím

Delete K t n i gi a các ph n t c xóa t ng m i khi hai ph n t mà nó k t n i b xóa

Nh p úp chu t trên h p danh sách nhi m v m trình so n th o thu c tính và h y

m i u vào danh sách (hình PL18)

Nh p chu t trên phím OKvà l u tr thi t k

Tr l i v i storyboard Trong các b c thi t k trên ây, các t p thi t k c l u tr riêng bi t thay cho vi c l u tr trong cùng m t t p storyboard Do v y, hãy s d ng

ph ng pháp Duplicate Design hay m tài li u thi t k "Storyboard2" và s d ng l nh

th c n "File | Save As " t o ra t p thi t k m i v i tên "Storyboard3.gui"

Ch n c a s tài li u Task List và phím Close liên quan, d ch chuy n sang trái có ch cho c a s tài li u m i và r ng Di - nh t p thi t k "EmptyDocument.gui" t panel