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

Ph l c PH N M M CÔNG C THI T K GUI 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 c 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 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 a ví d ph l c nh nh Hình PL1 Nó bao g m thành ph n c b n nh c a s , h p tho i, th c n, công c , tr ng thái ph n t h a (widgets) chúng Ngồi ra, cịn có liên k t gi a thành ph n c a giao di n Hình PL1 GUI Design Studio c s d ng th c hi n b Thi t k thành ph n GUI M i thành ph n dvduc-HCI/2007-08 c thi t k cho ví d nh sau: m t t p d án (project file) 97 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 th c hi n k t n i thành ph n GUI hình thành storyboard Storyboard c l u tr vào t p d án m i có th ch y mơ ph ng ánh giá Thi t k thành ph n GUI M t thi t k GUI 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 tách chúng thành nhóm thành ph n d qu n lý Ví d GUI Ph l c có ba thành ph n chính: C a s ng d ng C a s danh sách nhi m v H p tho i chi ti t nhi m v Sau ây b y b c c b n thi t k thành ph n GUI cho thí d B c Kh i t o d án M ch y ch ng trình GUI Design Studio 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 xâu ký t Thuc_hanh vào h p v n b n Name, vi c s t o danh m c Thuc-hanh d án Nh n phím OK , d án m i c t o l p c m 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 a cô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 gdp (Thuc_hanh.gdp) B c 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 h mu n mô ph ng nhi 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 phím l nh "New Design panel thi t k Project (hình PL2) Hình PL2 Nh p tên "NewTaskDialog" vào h p v n b n nh n phím OK ( ) Hãy l u tr tài li u thi t k c a thành ph n lên t p v i tên NewTaskDialog.gui Ch n panel thi t k "Elements" nhóm "Windows and Dialogs" Tìm n ph n t "Dialog" di nh chúng vào thi t k Nh p úp chu t 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) 98 dvduc-HCI/2007-08 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 cho phép 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 ) nhóm ph n t "Design Grids" Di nh h p tho i làm c s b trí i u n (ví d phím OK, Cancel, ) Dãn l i toàn b c a s Di nh phím "OK" "Cancel" t nhóm ph n t Buttons lên l i, phía ph i Chuy n n nhóm Text and Edit Box b sung c p ph n t "Left Text" vào phía trái c a l i Nh p úp chu t chúng thay i Text thành "&Summary" "&Description" Ký t k ti p sau d u & sâu có ngh a r ng phím l nh c p t c B sung Edit Box Multiple Line Edit Box nh hình PL4 Hình PL4 C n ch nh multiple line edit box nh sau: Ch n Description 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 công c c n ch nh Lo i b dòng v n b n thu c tính Text c a Edit Box multiple line edit box B c 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 ApplicationWindow.gui Thông th ng c a s ng d ng c a s MDI (Multiple Document Interface) v i th c n, cơng c tr ng thái (hình PL5) dvduc-HCI/2007-08 99 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 "NewTaskDialog" b c T panel "Elements", tìm n ph n t Application "Frame Window" nhóm "Windows and Dialogs" b sung vào thi t k Nh p úp chu t c a s i thu c tính title thành Thuc_hanh B sung "Menu Bar" t nhóm "Toolbars and Menus" Hi u ch nh v trí kích th c cho phù h p Chèn m c th c n m i Task gi a View Window M trình so n th o thu c tính th c n ch n &View danh sách 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ó cơng c tr ng Hãy b sung phím (buttons) vào cơng c b ng cách ch n 100 dvduc-HCI/2007-08 Ph l c Ph n m m công c xây d ng prototype Toobar Button thành ph n Toolbar and Menu Các phím khơng có nh, ta b sung sau B sung icons buttons Ch n panel thi t k Icons ch n nhóm Toolbars nh v icons l nh phù h p t chúng nh buttons T o l p "Status Bar" Ch n panel "Elements" ch n nhóm "Toolbars and Menus" g n tr ng thái vào áy c a s ng d ng B sung tr t vào c a s tài li u t nhóm "Controllers" B sung ph n t "Status Indicator" vào tr ng thái t nhóm "Toolbars and Menus" B sung ch báo s a thu c tính c a thành ch báo chu n "CAP", "NUM" "SCRL" cho Caps Lock, Num Lock Scroll Lock t ng ng Hãy ch báo NUM 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 T o l p c a s tài li u M c tiêu c a b c 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 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 "TaskListDocument" Trong panel Elements , tìm n ph n t Document "Mini Frame Window" nhóm "Windows and Dialogs" b sung vào thi t k i thu c tính title c a thành "Task List" Vào nhóm "Lists and Trees" tìm n ph n t "Check List Box" b sung vào thi t k ( t c a s tài li u) Dãn ph n t cho kín c a s tài li u Nh n úp list box m h p tho i so n th o thu c tính Ch n tab Style tùy ch n "Flat Style" h p so n th 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 box s d ng Alt+I sách Walk the dog Breakfast Fix the car Lunch nh p vào danh Watch some TV Dinner More TV Go to bed S d ng tab Data ánh d u m c c ch n Hình PL8 ví d ch n m c Lunch Nh p chu t phím OK ch p nh n dvduc-HCI/2007-08 101 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 ph n t mơ t nhóm khác Chuy n sang panel Annotations , ch n "Boxed Annotation" g 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 Title c a ph n t thành More Info 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 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 d u ó di nh p chu t h p mơ t k t thúc (hình PL10) L u tr thi t k vào t p k t thúc b c b t u n i, sau Hình PL10 102 dvduc-HCI/2007-08 Ph l c Ph n m m công c xây d ng prototype B c T o l p h p tho i Edit Task H p tho i Edit Task xu t hi n ng i s d ng mu n s a i m t nhi m v ang có s n máy (hình PL11) Nó t ng t h p tho i New Task Có th s d ng m t h p tho i cho hai công vi c 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 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" chép t t 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 "EditTaskDialog" S d ng l nh "Edit | Paste" dán m i ph n t v a chép D ch chuy n chúng vào gi a hình Thay i v n b n h p so n th o Summary thành "Lunch" 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 B a v i tên t p EditTaskDialog.gui, k t thúc b c c G p c l i quan sát c ng d ng Task List Manager ch y nh th (hình PL12), ta c n g p thành ph n thi t k l i có tồn c nh hình (screenshot) Các b c th c hi n nh d i ây M panel "Project" t o l p tài li u thi t k m i v i tên "Screenshot" Di nh t p thi t k "ApplicationWindow.gui" t d án vào thi t k Th c hi n t ng t v i t p thi t k "TaskListDocument.gui" "EditTaskDialog.gui" nh 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.gui k t thúc dvduc-HCI/2007-08 103 Ph l c Ph n m m cơng c xây d ng prototype Hình PL12 B c Quan sát k t qu Cho n th i i m hi n t i, thi t k c th c hi n Design Mode s d ng t p l c màu thi t k ôi 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 c th c hi n nh cơng c Simulator, trình di n thi t k c a s 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 cơng c Nh n phím ESC kh i ch mơ ph ng sau quan sát 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 nh liên ti p nhau, hình thành câu chuy n Trong ph n m m, storyboard trình t hình GUI hình thành lu ng i u n nh ng i s d ng th c hi n hành ng Ta s s d ng thành ph n thi t k c th c hi n theo h ng d n ây xây d ng storyboards Ti p theo, ta s b sung thi t k c a s tài li u gi i thi u thành ph n h p tho i chu n Sau ây b c th c hi n thi t k b n m u ng d ng t ng tác B c T o l p storyboard n gi n M panel "Project" t o l p tài li u thi t k m i "Storyboard1" Di nh t p thi t k "ApplicationWindow.gui" t d án vào thi t k Th c hi n t ng t v i t p thi t k "TaskListDocument.gui", "EditTaskDialog.gui" "NewTaskDialog.gui" 104 dvduc-HCI/2007-08 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 ng d n Có th s d ng ng th i phím Shift nh n phím cơng c có kh n ng t o nhi u k t n i Nh n phím ESC kh i ch k t n i Chú ý: Khi không n i c bi u t ng công c v i c a s có ngh a ch a v Toolbar Button mà ch di nh Icons công c Hãy k t n i phím cơng c nh d i ây l n l t vào thành ph n TaskListDocument, NewTaskDialog 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 kh i ch mơ ph ng 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 k t thúc b B c B sung c tr ng d n c ng Trong b c 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 cho h p tho i c a s có th c óng b ng chu t hay phím ESC Hình PL14 ví d thi t k c a b c 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 ng liên k t gi a phím cơng c New Document c a s tài li u Task List m thu c tính c a chúng Trong Navigation Type thay i Modal Popup thành Show Window (hình PL15) Ch y Simulator (F9) th nh p chu t phím cơng c 'New Document' m c as tài li u Task List , nh p chu t 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 Thốt kh i ch mơ ph ng b ng phím ESC dvduc-HCI/2007-08 105 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 cm gi a hình Có th thay i v trí hi n th h p tho i T panel "Storyboard" Design Bar, 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" k t n i v i phím óng X tiêu c a c a s nh hình PL14 V i phím "OK" "Cancel": B sung ph n t "Close and Accept" "Close and 106 dvduc-HCI/2007-08 Ph l c Ph n m m công c xây d ng prototype Cancel" t panel "Storyboard" k t n i chúng t i phím "OK" "Cancel" nh hình PL14 ng th i k t n i phím óng X 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 v i phím óng X tiêu c a c a s nh hình PL14 M i kích ho t h p l nh "Exit", b mơ ph ng c óng Ki m th thi t k B c B sung h p tho i chu n File Open dialog B c xây d ng c s ch c n ng c a b c ây t th vi n chu n Hình PL17 ví d thi t k c a b c a cách s d ng ph n 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 ây "Task List Document" làm c s B sung tính ch t d n ng theo cách ã trình bày ây hay theo cách sau: Ch n t p "TaskListDocument.gui" 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 h y chúng b ng l nh th c n "Edit | Delete" hay phím Delete K t n i gi a ph n t c xóa t ng m i hai ph n t mà k t n i b xóa Nh p úp chu t h p danh sách nhi m v m trình so n th o thu c tính h y m i u vào danh sách (hình PL18) Nh p chu t phím OK l u tr thi t k Tr l i v i storyboard Trong b c thi t k ây, t p thi t k c l u tr riêng bi t thay cho vi c l u tr m t t p storyboard Do v y, s d ng ph ng pháp Duplicate Design hay m tài li u thi t k "Storyboard2" s d ng l nh th c n "File | Save As " t o t p thi t k m i v i tên "Storyboard3.gui" Ch n c a s tài li u Task List 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 r ng Di - nh t p thi t k "EmptyDocument.gui" t panel Project vào dvduc-HCI/2007-08 107 Ph l c Ph n m m công c xây d ng prototype Hình PL18 Gán l i ch c n ng c a phím l nh New Document công c m c a s tài li u r ng Ch n h y ng n i n c a s tài li u th nh t t phím l nh nh v ch t Bây gi t o liên k t m i n c a s tài li u r ng B sung h p "Close" khác t panel Storyboard n i n phím óng X c a c a s tài li u r ng tiêu c a Hãy s d ng Simulator (F9 key) th l i hành vi m i Thành ph n cu i mà c n c b sung vào storyboard File Open dialog Hãy tìm n t p thành ph n File Open dialog ("Dialog_FileOpen_Standard.gui") nh hình PL19 Hình PL19 Tr ng h p khơng th y có Standard Component panel Project, t o liên k t n chúng b ng nh p phím l nh "Add Project Link" panel Project Duy t n Standard Component , ng d n GUI Design Studio\Samples\Standard Components sau cài t GUI Design Studio Hình PL20 108 dvduc-HCI/2007-08 Ph l c Ph n m m công c xây d ng prototype File Open dialog h p tho i chu n ch a tên danh m c chi ti t khác (hình PL20) Cái có th ch a th c s phù h p v i yêu c u ng d ng Có th t o h p tho i riêng nh m u có s n hay b sung thêm ph n t lên d u i nh ng ph n mu n thay i Hãy m t p File Open ("Dialog_FileOpen_Standard.gui") kh o sát thi t k b ng cách nh p úp chu t Project browser Bây gi c n móc h p tho i File Open B t u b ng cách b sung k t n i Modal Popup m c nh t phím Open công c n h p tho i Hãy th l i thi t k Cái mà ta th c s mu n phím "Open" th c hi n óng h p tho i sau ó m c a s tài li u Task List Khi a hành ng d n ng x y t m t phím, chúng c th c hi n theo th t mà c t o N u ta hi n th c a s tài li u tr c óng h p tho i c a s s m c v i h p tho i s c óng v i h p tho i Tr c h t b sung h p "Close and Accept" t panel Storyboard vào thi t k b sung liên k t t phím "Open" t i Hãy ki m th thi t k n th i i m này, c a s tài li u s xu t hi n t i v trí m c nh gi a hình, v y, b sung thêm ch t v trí cho phù h p V trí i m ch t t t nh t nh hình PL17 Cu i cùng, thi t l p liên k t cho ng i s d ng nh p úp chu t m c l a ch n (chi u sáng) c a s tài li u Task List (ví d , Lunch) m h p tho i so n th o Task Details t ng t nh nh n phím 'Edit Task' cơng c Hãy tìm n ph n t "Navigation Overlay" panel "Storyboard" Di vào b n thi t k nh v chúng nhi m v l a ch n Lunch nh hình PL21 Hình PL21 Hãy b sung k t n i t h p tho i x p ch ng n h p tho i Edit Task Details thi t k Nh p úp chu t ng k t n i m so n th o thu c tính c a thay i thu c tính "Event Trigger" t m c nh "Left Click" thành "Left Double Click" Th l i l u thi t k vào t p B c B sung h th ng th c n Trong b c 4, b c cu i cùng, ta s hoàn thi n thi t k b ng b sung h th ng th c n (hình PL1) Các b c th c hi n nh sau ây Hãy s d ng cách a thích ('Duplicate Design' hay 'Open and Save As') t o tài li u thi t k "Storyboard4.gui" M i th c n popup có th c t o l p t phác h a nh ng ti t ki m th i gian ta s s d ng ph n t th c n chu n Hãy m t p thành ph n ("Common_Menus.gui") t d án th vi n "Standard Components" (hình PL22) Hãy s d ng Ctrl+Left Click ch n ph n t thành ph n c a th c n File, Edit, View, Window Help, sau ó nh p Ctrl+C chép vào clipboard dvduc-HCI/2007-08 109 Ph l c Ph n m m cơng c xây d ng prototype Hình PL22 Hãy tr v tài li u thi t k "Storyboard4" s d ng Ctrl+V dán vào Bây gi s p x p chúng Application Window thi t k nh hình PL21 N u ta c n thêm th c n "Task", b sung ph n t m i "Popup Menu" t nhóm "Toolbars and Menus" panel Elements Hãy s a i thu c tính c a có m c th c n "New " "Edit " (hình PL23) Hình PL23 Ta có th thay i m c "About Application Name" th c n Help thành "About Tutorial Application" Hãy n i t ng m c th c n c a Application Window v i th c n t ng ng c a N u s d ng phím Shift nh p chu t phím cơng c "Make Connection" t o l nh dính Nh n phím Esc kh i mode B i m c tiêu th c n popup, ta th y Navigation Type m i k t n i ct ng t v "Modal Choice Popup" nh d u hi u h p tho i ng m i tên B sung h p "Exit" t panel Storyboard n i v i l nh Exit th c n File N i l nh "Open " th c n File n h p tho i File Open N i l nh "New " "Edit " th c n Task n h p tho i Task Details k t h p Ki m th Simulator l u tr thi t k 110 dvduc-HCI/2007-08 ... "ApplicationWindow .gui" t d án vào thi t k Th c hi n t ng t v i t p thi t k "TaskListDocument .gui" , "EditTaskDialog .gui" "NewTaskDialog .gui" 104 dvduc-HCI/2007-08 Ph l c Ph n m m công c xây d ng... "ApplicationWindow .gui" t d án vào thi t k Th c hi n t ng t v i t p thi t k "TaskListDocument .gui" "EditTaskDialog .gui" nh 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 .gui. .. Thi t k thành ph n GUI M t thi t k GUI 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 tách chúng thành nhóm thành ph n d qu n lý Ví d GUI Ph l c có ba thành