Huong Dan GUI Design Studio

Ph l c

PH N M M CNG C THI T K GUI1. Gi i thi uNgy nay, c nhi u cng 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 c ny gi i thi u m t v d v thi t k GUI b ng ph n m m cng c GUI Design Studio [2]. Ph n m m cng c GUI Design Studio phin b n th nghi m v h ng d n s d ng c th c t i v t trang Web c a hng Caretta Software theo a ch nh sau: http://www.carettasoftware.com. B n thi t k cu i cng c a v d trong ph l c ny nh nh trn Hnh PL1. N bao g m cc thnh ph n c b n nh c a s , h p tho i, th c n, thanh cng c , thanh tr ng thi v cc ph n t h a (widgets) trn chng. Ngoi ra, n cn c cc lin k t gi a cc thnh ph n c a giao di n.

Hnh PL1 GUI Design Studio c s d ng th c hi n cc b Thi t k cc thnh ph n GUI. M i thnh ph ndvduc-HCI/2007-08

c thi t k cho v d ny nh sau: trong m t t p d n (project file). 97

Ph l c. Ph n m m cng c xy d ng prototype

Thi t k prototype t ng tc. C ngh a l th c hi n k t n i cc thnh ph n GUI hnh thnh storyboard. Storyboard ny c l u tr vo t p d n m i v c th ch y m ph ng nh gi.

2. Thi t k cc thnh ph n GUIM t thi t k GUI l t p ti li u s bao g m m i c a s , h p tho i, hnh thnh nn ng d ng. Do v y, t t nh t l tch chng thnh cc nhm thnh ph n d qu n l. V d GUI trong Ph l c ny c ba thnh ph n chnh: C a s ng d ng chnh C a s danh sch 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 cc thnh ph n GUI cho th d ny.

B1. 2. 3. 4.

c 1. Kh i t o d

n

M ch y ch ng trnh GUI Design Studio trong MS Windows. S d ng l nh th c n "File | New Project..." m h p tho i "New Project". Ch n ho c t o l p danh m c n i l u tr d n, v d C:\My GUI Designs\". Nh p xu k t Thuc_hanh vo h p v n b n Name, vi c ny s t o ra danh m c con Thuc-hanh trong d n. 5. Nh n phm OK , d n m i c t o l p v c m ra trn mn hnh. C th s d ng l nh th c n "View | Design Bar Position i u ch nh v tr hi n th c a cng c thi t k Design Bar. T p d n s c tn 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 dnh cho ng i s d ng khi h mu n m ph ng nhi m v m i. Cc b c ti n hnh nh sau: T o l p ti li u thi t k m i b ng ch n l nh th c n Project | New Design hay nh n chu t trn phm l nh "New Design trn panel thi t k Project (hnh PL2).

Hnh PL2 Nh p tn "NewTaskDialog" vo h p v n b n v nh n phm OK ( ). Hy l u tr ti li u thi t k c a thnh ph n ny ln t p v i tn l NewTaskDialog.gui Ch n panel thi t k "Elements" v nhm "Windows and Dialogs". Tm n ph n t "Dialog" di v nh chng vo thi t k . Nh p p chu t trn h p tho i m trnh so n th o tnh ch t, sau thay i tiu (Title) thnh "Task Details". Nh n phm OK ch p nh n s thay i (hnh PL3).

98

dvduc-HCI/2007-08


Hnh PL3 m b o r ng l nh th c n "Layout | Snap to Edges" c ch n (checked). Vi c ny cho php cc ph n t GUI t ng c n ch nh m t cch ph h p. Ch n l i thi t k mong mu n (v d , Right Buttons ) trong nhm ph n t "Design Grids". Di v nh n trn h p tho i lm c s b tr cc i u khi n (v d cc phm OK, Cancel, ). Dn l i ra ton b c a s . Di v nh cc phm "OK" v "Cancel" t nhm ph n t Buttons ln trn l i, pha ph i. Chuy n n nhm Text and Edit Box v b sung c p ph n t "Left Text" vo pha tri c a l i. Nh p p chu t trn chng thay i Text thnh "&Summary" v "&Description". K t k ti p sau d u & trong su c ngh a r ng n l phm l nh c p t c. B sung Edit Box v Multiple Line Edit Box nh hnh PL4.

Hnh PL4 C n ch nh multiple line edit box nh sau: Ch n Description v multiple line edit box (c th s d ng phm Ctl+Click ch n c hai ng th i) nh hnh PL4; S d ng l nh "Layout | Align | Top" hay phm l nh trn thanh cng c c n ch nh. Lo i b cc dng v n b n trong thu c tnh Text c a Edit Box v multiple line edit box.

B

c 3. T o l p c a s

ng d ng

Hy t tn t p d n c a ph n t GUI s thi t k B c 3 ny l ApplicationWindow.gui. Thng th ng c a s ng d ng l c a s MDI (Multiple Document Interface) v i thanh th c n, thanh cng c v thanh tr ng thi (hnh PL5).

dvduc-HCI/2007-08

99


Hnh PL5 Trnh t thi t k nh sau: T o l p ti li u thi t k m i v i tn "ApplicationWindow" t ng t cch t o l p ra "NewTaskDialog" trong b c 2. T panel "Elements", tm n ph n t Application "Frame Window" trong nhm "Windows and Dialogs" v b sung n vo thi t k . Nh p p chu t trn c a s i thu c tnh title thnh Thuc_hanh . B sung "Menu Bar" t nhm "Toolbars and Menus". Hi u ch nh v tr v kch th c cho ph h p. Chn m c th c n m i Task gi a View v Window . M trnh so n th o thu c tnh th c n v ch n &View trong danh sch cc m c th c n. Nh p &Task vo h p so n th o, nh n phm Insert (phm t t Alt+I) sau nh n phm OK ch p nh n s thay i (Hnh 6).

Hnh PL6 B sung "Docked Toolbar" d i th c n t ng t nh lm v i Menu Bar. Ta c thanh cng c tr ng. Hy b sung cc phm (buttons) vo thanh cng c b ng cch ch n

100

dvduc-HCI/2007-08

Ph l c. Ph n m m cng c xy d ng prototypeToobar Button trong cng thnh ph n Toolbar and Menu . Cc phm khng c nh, ta b sung n sau. B sung icons trn cc buttons. Ch n panel thi t k Icons v ch n nhm Toolbars . nh v cc icons l nh ph h p v t chng trn nh cc buttons. T o l p "Status Bar". Ch n panel "Elements" v ch n nhm "Toolbars and Menus" v g n thanh tr ng thi vo y c a s ng d ng. B sung thanh tr t vo c a s ti li u t nhm "Controllers". B sung cc ph n t "Status Indicator" vo thanh tr ng thi t nhm "Toolbars and Menus". B sung 3 ch bo v s a cc thu c tnh c a n thnh cc ch bo chu n "CAP", "NUM" v "SCRL" cho Caps Lock, Num Lock v Scroll Lock t ng ng. Hy ch bo NUM l tch c c. Ghi l i thi t k vo t p. K t thc thi t k c a s ng d ng.

B

c 4. T o l p c a s ti li u

M c tiu c a b c ny l t o l p thm thnh ph n m i cho ng d ng Task List Manager . Hy t tn t p l u tr d n thnh ph n ny l TaskListDocument.gui . Vi c t o l p c a s ti li u c th c hi n nh sau: Chuy n sang panel "Project" t o l p ti li u thi t k m i. G i n l"TaskListDocument".

Trong panel Elements , hy tm n ph n t Document "Mini Frame Window" trong nhm "Windows and Dialogs" b sung vo thi t k . i thu c tnh title c a n thnh "Task List". Vo nhm "Lists and Trees" v tm n ph n t "Check List Box" b sung n vo thi t k ( t trn c a s ti li u). Dn ph n t ny cho kn c a s ti li u. Nh n p trn list box m h p tho i so n th o thu c tnh. Ch n tab Style v ty ch n "Flat Style" h p so n th o c ng bin m nh (Hnh PL7).

Hnh PL7 Nh p t ng xu k t v d sau y vo Edit box v s d ng Alt+I sch.Walk the dog Breakfast Fix the car Lunch Watch some TV Dinner More TV Go to bed

nh p vo danh

S d ng tab Data nh d u cc m c c ch n. Hnh PL8 l v d ch n m c Lunch . Nh p chu t trn phm OK ch p nh n.

dvduc-HCI/2007-08

101


Hnh PL8 B sung m t (anotations) vo thi t k . C th tm th y cc ph n t m t trong nhm khc. Chuy n sang panel Annotations , ch n "Boxed Annotation" g n n vo bn ph i c a s ti li u (hnh PL9). Hy s a i thu c tnh Title c a ph n t ny thnh More Info v nh p xu k t , v d , We probably want more info in columns with headers for sorting... .

Hnh PL9 B sung d u hi u n i v i h p m t . G n Large Dot Target vo danh sch. Nh p chu t trn phm l nh Make Connection vo ch k t n i.

Con ch y chu t s c hnh d ng bt ch. Hy nh p bt trn d u di v nh p chu t trn h p m t k t thc (hnh PL10). L u tr thi t k vo t p v k t thc b c 4.

b t

u n i, sau

Hnh PL10

102

dvduc-HCI/2007-08


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 my (hnh PL11). N t ng t h p tho i New Task. C th s d ng cng m t h p tho i cho hai cng vi c ny. Vi c tch thnh hai h p tho i c ch cho vi c trnh di n thi t k khi ni m.

Hnh PL11 Cc b c th c hi n nh sau: Sao chp (copy) thi t k h p tho i New Task v a thi t k . M t p "NewTaskDialog.gui" b ng cch nh p p chu t trn cy 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 chp t t c cc ph n t vo clipboard. T panel "Project" t o l p ti li u thi t k m i, g i l "EditTaskDialog". S d ng l nh "Edit | Paste" dn m i ph n t v a sao chp. D ch chuy n chng vo gi a mn hnh. Thay i v n b n trong h p so n th o Summary thnh "Lunch" v nh p dng v n b n ph h p vo tr ng Description, v d "Phone the nearest pizza place and order somethingnice."

L u thi t k vo

a v i tn t p EditTaskDialog.gui, k t thc b

c 5.

B

c 6. G p c l i

quan st c ng d ng Task List Manager khi n ch y nh th no (hnh PL12), ta c n g p cc thnh ph n thi t k l i c ton c nh cc mn hnh (screenshot). Cc b c th c hi n nh d i y. M panel "Project" v t o l p ti li u thi t k m i v i tn "Screenshot". Di v nh t p thi t k "ApplicationWindow.gui" t cy d n vo thi t k . Th c hi n t ng t v i cc t p thi t k "TaskListDocument.gui" v "EditTaskDialog.gui" nh cc thnh ph n hnh thnh ln screenshot. L u tr k t qu vo t p v i tn Screenshot.gui v k t thc.

dvduc-HCI/2007-08

103


Hnh PL12

B

c 7. Quan st 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 mu thi t k . i khi ng i s d ng mong mu n quan st nhanh b n thi t k v i vi c s d ng t p l c mu khc (v d l c mu c a Windows) v i Annotations, Design Grid Lines, Toolbar Buttons Vi c ny c th c hi n nh cng c Simulator, n trnh di n thi t k trong c a s mn hnh 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 phm l nh trn thanh cng c . Nh n phm ESC thot kh i ch m ph ng sau quan st.

3. Thi t k prototype ng d ng t

ng tc

Trong th gi i phim nh, khi ni m 'storyboard' c s d ng nh ngh a trnh t cc nh lin ti p nhau, hnh thnh cu chuy n. Trong ph n m m, storyboard l trnh t cc mn hnh GUI hnh thnh lu ng i u khi n nh ng i s d ng th c hi n hnh ng. Ta s s d ng cc thnh ph n thi t k c th c hi n theo h ng d n trn y xy d ng storyboards. Ti p theo, ta s b sung thi t k c a s ti li u v gi i thi u cc thnh ph n h p tho i chu n. Sau y l cc b c th c hi n thi t k b n m u ng d ng t ng tc.

B

c 1. T o l p storyboard

n gi n

M panel "Project" v t o l p ti li u thi t k m i "Storyboard1". Di v nh t p thi t k "ApplicationWindow.gui" t cy d n vo thi t k . Th c hi n t ng t v i cc t p thi t k "TaskListDocument.gui", "EditTaskDialog.gui" v"NewTaskDialog.gui".

104

dvduc-HCI/2007-08


S d ng cng c "Make Connection" t o l p cc ng d n. C th s d ng ng th i phm Shift khi nh n phm trn thanh cng c c kh n ng t o nhi u k t n i. Nh n phm ESC thot kh i ch k t n i. Ch : Khi khng n i c cc bi u t ng trn thanh cng c v i c a s c ngh a l ch a v cc Toolbar Button m ch di nh Icons trn thanh cng c . Hy k t n i cc phm trn thanh cng c nh d i y l n l t vo cc thnh ph n TaskListDocument, NewTaskDialog v EditTaskDialog t ng ng.

L u tr ln t p. Ch y m ph ng Simulator (F9 key) nhn th y k t qu . Nh n phm ESC thot 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 (hnh PL13).

Hnh PL13 Ch y l i m ph ng. L u tr thi t k vo t p Storyboard1.gui v k t thc b c ny.

B

c 2. B sung cc

c tr ng d n

ng

Trong b c ny ta s b sung vo storyboard b ng cch thay i ti li u Task List t c a s modal sang modeless. ng th i, ta s kch ho t phm ng sao cho cc h p tho i v c a s c th c ng b ng chu t hay phm ESC. Hnh PL14 l v d thi t k c a b c ny. M ti 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 tn "Storyboard2.gui". Tr c h t ta t o l p c a s modeless: Nh p p chu t trn ng lin k t gi a phm cng c New Document v c a s ti li u Task List m thu c tnh c a chng. Trong Navigation Type hy thay i Modal Popup thnh Show Window (hnh PL15). Ch y Simulator (F9) v th nh p chu t trn phm cng c 'New Document' m c as ti li u Task List , nh p chu t trn cc phm '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 chng. Thot kh i ch m ph ng b ng phm ESC.

dvduc-HCI/2007-08

105


Hnh PL14

Hnh PL15 M c nh, m i c a s cm gi a mn hnh. C th thay i v tr hi n th cc h p tho i. T panel "Storyboard" trn Design Bar, hy di-nh "Window Position Anchor vo c a s ng d ng, n i mu n t c a s ti li u (hnh PL16).

Hnh PL16 S d ng "Make Connection" k t n i anchor v i c a s ti li u. Lm vi c v i c a s ti li u: b sung phm "Close" t panel "Storyboard" v k t n i n v i phm ng X trn thanh tiu c a c a s nh trn hnh PL14. V i cc phm "OK" v "Cancel": B sung cc ph n t "Close and Accept" v "Close and 106dvduc-HCI/2007-08

Ph l c. Ph n m m cng c xy d ng prototypeCancel" t

panel "Storyboard" v k t n i chng t i cc phm "OK" v "Cancel" nh trn hnh PL14. ng th i k t n i phm ng X trn thanh tiu c a c a s vo ph n t "Close and Accept". B sung ph n t "Exit". K t n i n v i phm ng X trn thanh tiu c a c a s nh trn hnh PL14. M i khi kch 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 dialoga ra cch s d ng cc ph n

B c ny xy d ng trn c s ch c n ng c a b c trn y v t th vi n chu n. Hnh PL17 l v d thi t k c a b c ny.

Hnh PL17 Tr c h t, ta c n t o l p t p thi t k "Empty Document". Hy s d ng thi t k c s n trn y l "Task List Document" lm c s . B sung cc tnh ch t d n ng theo cch trnh by trn y hay theo cch sau: Ch n t p "TaskListDocument.gui" trong cy d n sau s d ng th c n "Project | Duplicate Design..." hay phm l nh Duplicate Design . Nh p tn ti li u m i "EmptyDocument". Ch n hai ph n t m t v h y chng b ng l nh th c n "Edit | Delete" hay phm Delete. K t n i gi a cc ph n t c xa t ng m i khi hai ph n t m n k t n i b xa. Nh p p chu t trn h p danh sch nhi m v m trnh so n th o thu c tnh v h y m i u vo danh sch (hnh PL18). Nh p chu t trn phm OK v l u tr thi t k . Tr l i v i storyboard. Trong cc b c thi t k trn y, cc t p thi t k c l u tr ring bi t thay cho vi c l u tr trong cng m t t p storyboard. Do v y, hy s d ng ph ng php Duplicate Design hay m ti 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 tn "Storyboard3.gui". Ch n c a s ti li u Task List v phm Close lin quan, d ch chuy n sang tri c ch cho c a s ti li u m i v r ng. Di - nh t p thi t k "EmptyDocument.gui" t panel Project vo.dvduc-HCI/2007-08

107


Hnh PL18 Gn l i ch c n ng c a phm l nh New Document trn thanh cng c m c a s ti li u r ng. Ch n v h y cc ng n i n c a s ti li u th nh t t phm l nh v nh v ch t. By gi t o cc lin k t m i n c a s ti li u r ng. B sung h p "Close" khc t panel Storyboard v n i n phm ng X c a c a s ti li u r ng trn thanh tiu c a n. Hy s d ng Simulator (F9 key) th l i cc hnh vi m i. Thnh ph n cu i cng m c n c b sung vo storyboard l File Open dialog. Hy tm n t p thnh ph n File Open dialog ("Dialog_FileOpen_Standard.gui") nh hnh PL19.

Hnh PL19 Tr ng h p khng th y c Standard Component trn panel Project, hy t o lin k t n chng b ng nh p phm l nh "Add Project Link" trn panel Project. Duy t n Standard Component , n trong ng d n GUI Design Studio\Samples\Standard Components sau khi ci t GUI Design Studio.

Hnh PL20

108

dvduc-HCI/2007-08

Ph l c. Ph n m m cng c xy d ng prototypeFile Open dialog l h p tho i chu n ch a tn danh m c v cc chi ti t khc (hnh PL20).

Ci ny c th ch a th c s ph h p v i yu c u ng d ng. C th t o ra h p tho i ring nh m u c s n hay b sung thm cc ph n t ln trn d u i nh ng ph n mu n thay i. Hy m t p File Open ("Dialog_FileOpen_Standard.gui") kh o st thi t k b ng cch nh p p chu t trn n trong Project browser. By gi c n mc h p tho i File Open. B t u b ng cch b sung k t n i Modal Popup m c nh t phm Open trn thanh cng c n h p tho i. Hy th l i thi t k . Ci m ta th c s mu n phm "Open" th c hi n l ng h p tho i v sau m c a s ti li u Task List. Khi a hnh ng d n ng x y ra t cng m t phm, chng c th c hi n theo th t m n c t o ra. N u ta hi n th c a s ti li u tr c khi ng h p tho i th c a s s cng m c v i h p tho i v n s c ng cng v i h p tho i. Tr c h t hy b sung h p "Close and Accept" t panel Storyboard vo thi t k v b sung lin k t t phm "Open" t i n. Hy ki m th thi t k . n th i i m ny, c a s ti li u s xu t hi n t i v tr m c nh l gi a mn hnh, do v y, hy b sung thm ch t v tr cho ph h p. V tr i m ch t t t nh t l nh trong hnh PL17. Cu i cng, hy thi t l p lin k t sao cho khi ng i s d ng nh p p chu t trn m c l a ch n (chi u sng) trong c a s ti li u Task List (v d , Lunch) th n m h p tho i so n th o Task Details t ng t nh khi nh n phm 'Edit Task' trn thanh cng c . Hy tm n ph n t "Navigation Overlay" trn panel "Storyboard". Di n vo b n thi t k v nh v chng trn nhi m v l a ch n Lunch nh hnh PL21.

Hnh PL21 Hy b sung k t n i t h p tho i x p ch ng n h p tho i Edit Task Details trong thi t k . Nh p p chu t trn ng k t n i m so n th o thu c tnh c a n v thay i thu c tnh "Event Trigger" t m c nh "Left Click" thnh "Left Double Click". Th l i v l u thi t k vo t p.

B

c 4. B sung h th ng th c

n

Trong b c 4, b c cu i cng, ta s hon thi n thi t k b ng b sung h th ng th c n (hnh PL1). Cc b c th c hi n nh sau y. Hy s d ng cch a thch ('Duplicate Design' hay 'Open and Save As') t o ti li u thi t k "Storyboard4.gui". M i th c n popup c th c t o l p t phc h a nh ng ti t ki m th i gian ta s s d ng cc ph n t th c n chu n. Hy m t p thnh ph n ("Common_Menus.gui") t d n th vi n "Standard Components" (hnh PL22). Hy s d ng Ctrl+Left Click ch n cc ph n t thnh ph n c a th c n File, Edit, View, Window v Help, sau nh p Ctrl+C sao chp n vo clipboard.

dvduc-HCI/2007-08

109


Hnh PL22 Hy tr v ti li u thi t k "Storyboard4" v s d ng Ctrl+V dn vo n. By gi s p x p chng trn Application Window trong thi t k nh trn hnh PL21. N u ta c n thm th c n "Task", th hy b sung ph n t m i "Popup Menu" t nhm "Toolbars and Menus" trn panel Elements. Hy s a i thu c tnh c a n c cc m c th c n "New..." v "Edit..." (hnh PL23).

Hnh PL23 Ta c th thayTutorial Application".

i m c "About Application Name" trong th c

n Help thnh "About

Hy n i t ng m c trn thanh th c n c a Application Window v i th c n t ng ng c a n. N u s d ng phm Shift khi nh p chu t trn phm thanh cng c "Make Connection" t o ra l nh dnh. Nh n phm Esc thot ra kh i mode ny. B i v m c tiu l cc th c n popup, cho nn ta th y Navigation Type trn m i k t n i ct ng t v "Modal Choice Popup" nh d u hi u h p tho i trn ng m i tn. B sung h p "Exit" t panel Storyboard v n i n v i l nh Exit trn th c n File. N i l nh "Open..." trn th c n File n h p tho i File Open. N i cc l nh "New..." v "Edit..." trn th c n Task n cc h p tho i Task Details k t h p. Ki m th trong Simulator v l u tr thi t k .

110

dvduc-HCI/2007-08

Documents

Huong Dan GUI Design Studio