Báo cáo, Bài tập lớn môn Tương tác người máy, viết về hướng dẫn sử dụng, vài đặt GUI design studio, Hướng dẫn tạo giao diện phần mềm PAINT trên windows 10 bằng công cụ GUI design Studio. Chi tiết về môn tương tác người máy trong chương trình dạy và học, trường IUH
Trường Đại Học Cơng Nghiệp Thành Phố Hồ Chí Minh Khoa Công Nghệ Thông Tin Môn: Tương Tác Người Máy Đề tài: Tìm hiểu giao diện chức GUI Design Studio mô lại phần mềm Paint Window 10 Giảng Viên Hướng Dẫn Nguyễn Thành Thái Sinh Viên Thực Hiện Nguyễn Hoàng Thiện 14018661 Lê Hữu Thắng 14028621 Võ Duy Lân 14043781 TP.HCM – Tháng 10 năm 2017 Nhận xét Giảng Viên Hướng Dẫn …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… …………………………………………………………… TP.HCM, ngày…tháng…năm… Giảng viên Mục Lục Giới thiệu GUI Design Studio Giao diện GUI Design Studio Các bước thiếc kế thành phần GUI Design Studio Bước 1: Khởi tạo dự án Bước 2: Tạo lập hộp thoại nhiệm vụ Bước 3: Khởi tạo cửa sổ ứng dụng Bước 4: Tạo lập cửa sổ tài liệu Bước 5: Tạo lập hộp thoại “Edit Task” Bước 6: Gộp lại Bước 7: Quan sát kết Thiết kế Prototype ứng dụng tương tác Bước 1: Tạo lập storyboard đơn giản Bước 2: Bổ sung đặc trưng dẫn đường Bước 3: Bổ sung hộp thoại chuẩn File Open Dialog Bước 4: Bổ sung hệ thống thực đơn Mô phần mềm Paint Window 10 GUI Design Studio a Giao diện click vào nút “Home” công cụ Paint b Giao diện click vào nút “File” công cụ Paint c Giao diện click vào nút “View” công cụ Paint Giới thiệu GUI Design Studio: GUI Design Studio dùng để mô tả môi trường làm việc thân thiện với người sử dụng, sử dụng hình tượng đồ họa, Icon để thay dòng lệnh tương tác với máy tính GUI Design Studio công cụ để thiết kế giao diện người dùng cho hệ điều hành Windows mà bạn sử dụng để nhanh chóng tạo prototype thể không cần viết mã GUI Design Studio : Giúp vẽ hình, cửa sổ phụ kiện đơn lẻ sử dụng yếu tố chuẩn, kết nối chúng với thành trình xảy theo kịch sau chạy thử thiết kế bạn GUI Design Studio : công cụ đặc biệt cho nhà thiết kế phần mềm, nhà phân tích, kỹ sư dùng để quản lý đề án cố vấn GUI Design Studio sử dụng bạn cần vẽ chương trình nhìn hay cho thấy phần kết nối làm việc nhịp nhàng Sử dụng GUI Design Studio bạn cần cung cấp phần mềm đáp ứng xác yêu cầu người dùng bạn muốn làm cho lần Các nhà thiết kế phần mềm, chuyên gia kinh nghiệm người dùng, nhà phân tích kinh doanh, nhà phát triển, nhà quản lý dự án chuyên gia tư vấn Bất thiết kế định giao diện người dùng Nhanh chóng đưa ý tưởng thử nghiệm chúng môi trường chi phí thấp, khơng có rủi ro tránh việc thực lại trình thực tốn cách nhận thiết kế phù hợp thỏa thuận trước GUI Design Studio thường sử dụng : o Dẫn chứng tài liệu nhữn ý tưởng sản phẩm o Tạo kế hoạch cho dự án o Thu thập ý kiến yêu cầu thiết kế o Tạo mơ hình hình o Cung cấp đặc điểm chi tiết cho nhà phát triển o Đề xuất cải tiếm cho sản phẩm Icon Express - Tính năng: • Biểu tượng Express trình chỉnh sửa biểu tượng đơn giản, khơng vơ nghĩa miễn phí với tất tính cần thiết để tạo biểu tượng đơn giản: Vẽ pixel Vẽ đường thẳng Bản vẽ hình chữ nhật hình elip (đầy khơng có) Văn vẽ phơng chữ Tùy chọn điền dàn Lựa chọn màu thay Cục gôm Lật xoay Công cụ lựa chọn để cắt phần, chép dán Dán đồ họa bên để tạo biểu tượng Hỗ trợ 16, 256 biểu tượng màu True Nhiều định dạng biểu tượng cho tệp tin Kích thước biểu tượng lên đến 127 x 127 hỗ trợ Khơng thể hồn tác / làm lại Cửa sổ soạn thảo mở rộng với xem trước kích thước thực tế Tất nhiên, có nhiều tính lực mà thêm vào Icon Express, đặc biệt so với số trình chỉnh sửa biểu tượng khác sẵn có nhanh chóng dễ sử dụng, tốt miễn phí Ngồi ra, có trình xem thiết kế giao diện người dùng: o GUI Design Viewer sản phẩm kèm với GUI Design Studio cho phép bạn xem thiết kế giao diện người dùng chạy nguyên mẫu bạn Và họ chia sẻ động cơ, thiết kế bạn giống nguyên mẫu bạn hoạt động giống phiên tương thích hai sản phẩm Mở dự án thiết kế giao diện (.gdp) tệp thiết kế cá nhân (.gui) Mở phân phối dự án tập tin tạo đặc biệt (tệp gdd) mẫu thiết kế có sẵn trang web o o o o o o o o o o o o o o o Duyệt xem tệp thiết kế bao gồm chạy chúng riêng lẻ toàn dự án mẫu thử nghiệm ứng dụng Về xuất từ GUI Design Studio, phân phối thiết lập cho Viewer tự động chạy nguyên mẫu tệp mở tùy chọn đóng lại sau để dự án hoạt động gần giống ứng dụng thực Hỗ trợ kiểu hình ảnh lựa chọn màu sắc cho visualization Zoom pan thiết kế với chuột Xem thích thích thiết kế, bao gồm mơ tả cửa sổ bật lên Xuất thiết tệp hình ảnh phổ biến (.bmp, gif, jpg, png, emf) In thiết kế bao gồm sở xem trước in Tự có sẵn phân phối lại o Ngày nay, có nhiều thành phần mềm thương mại với khả 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 ví dụ thiết kế GUI phần mềm công cụ GUI Design Studio [2] phần mềm công cụ GUI Design Studio phiên thử nghiệm hướng dẫn sữ dụng tải từ trang web hãng Caretta Software theo địa sau: http://www.carettasoftware.com GUI Design Studio sử dụng để thực bước thiết kế cho ví dụ sau: o Thiết kế thành phần GUI Mỗi thành phần để tệp dự án (project file) o Thiết kế prototype tương tác Có nghĩa thực kết nối thành phần GUI để hình thành story board story board lưu trữ vào tệp dự án chạy mơ để đánh giá Giao diện GUI Design Studio: Một số chức GUI Design Studio V5 • Trong giao diện GUI Design Studio V5 có Menu Bar, Toolbar, Status Bar, Design Bar • Menu Bar nằm góc gồm File, Edit, View, Project, Design, Data, Layout, Run, Window Help • Trong File có New, Open, Close, Save, Save As, Save All, New Project, Open Project, Close Project, Create Distribution File, Create Template, Generate Documentation, Pack Project for Sharing, Export, Print, Print Preview, Print Setup, Recent Files, Recent Projects, Preferences, Swatches Exit Trong Edit có Undo, Redo, Cut, Copy, Duplicate, Paste, Delete, Select All, Copy Design Image Properties • Trong View có Toolbar, Status Bar, Design Bar, Design Bar Position (gồm Dock Left, Dock Right, Float), Zoom, Zoom to 100%, Zoom In, Zoom Out, Fit Elements to View, Canvas, Annotations, Prototype Information, Resize Anchors, Navigation Connections, Navigation Overlays, Default Element Box High Quality Display • Trong Project có Add Project Link, Add Folder Link, Remove Link, New Folder, New Design, New Icon, Edit Icon, Duplicate Design, Paste Image to File, Import Images, Insert from Template, Rename File/Folder, Delete File/Folder, Delete Icon File, Set as Custom Elements Folder, Set Main Project Design to, Clear Main Project Design Project Options • Trong Design có Sreen Canvas Size, Fit Screen Canvas to Elements, Set Representative Element, Clear Representative Element, Use Default Representative Element, Go To Connection Target, Go To Connection Source, Add Bitmap, Add Icon, Add Sound, Add Component Design, Make Connection, Refresh Refresh All • Trong Data có New Data Table, Edit Data Table, Import Data, Rename, Delete, Restore Original Data, Keep Session Data Refresh Data Tables Trong Layout có Align (gồm Left, Horizontal Centre, Right, Left to Right Edges, Top, Vertical Centre, Bottom, Top to Bottom Edges, Centres), Group Align (gồm Left, Horizontal Centre, Right, Left to Right Edges, Top, Vertical Centre, Bottom, Top to Bottom Edges, Centres), Space Evenly (gồm Horizontally, Vertically), Make Same Size (gồm Width, Height, Both, Span Width, Span Height), Layer (gồm Send to Back, Bring to Front, Back One, Forward One, Send to Back of All), Group Elements, Ungroup Elements, Swap Element Positions Snap to Edges Các bước thiếc kế thành phần GUI: 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 tạo lập 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 Name, việc tạo danh mục ”thuc_hanh” dự án Nhấn phím “OK”, dự án tạo lập 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ông cụ thiết kế Design Bar Tệp dự án 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ô nhiệm vụ Các bước tiến hành sau: Tạo lập tài liệu thiết kế lệnh chọn 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ấm phím “OK” ( ) Hãy lưu trữ tài liệu thiết kế 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 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 thay đổi (hình PL3) Hình PL3 Đảm bảo lệnh thực đơn “Layout | Snap to Edges” chọn (checked) Việc cho phép phần tử GUI tự động chỉnh 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 sở bố trí điều khiển (ví dụ phím OK, Cancel,…) Dãn lưới toàn 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 nhóm “Text and Edit Box” bổ sung cặp phần tử “Left Text” vào phía trái lưới nhấp đúp chuột chúng để thay đổi Text thành ”&Summary” “&Description” Ký tự sau dấu & câu có nghĩa phím lệnh cấp tốc Bổ sung Edit Box Multiple Line Edit Box hình PL4 Hình PL4 Căn chỉnh multiple line edit box sau: chọn “Description” multiple line edit box (có thể sữ dụng phím Ctrl + Click để chọn hai đồng thời) hình PL4; Sử dụng lệnh “Layout | Align | Top ” hay phím lệnh cơng cụ để chỉnh Loại bỏ dòng văn thuộc tính Text 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 phần tử GUI thiết kế bước applicationWindow.gui thông thường cửa sổ ứng dụng cữa sổ MDI (Multiple Vào nhóm “Lists and Trees” tìm đến phần tử “Check List Box” để bổ sung vào thiết (đặt tên 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 “Plat Style” để hộp soạn thảo có đường biên mảnh (Hình PL7) Hình PL7 Nhập xâu ký tự ví dụ sau vào Edit Box sử dụng Alt+I để nhập vào danh sách Walk the dog Watch some TV Breakfast Dinner Fix the car More TV Lunch Go to bed Sử dụng tab “Data” để đánh dấu mục chọn Hình PL8 ví dụ chọn mục “Lunch” Nhấp chuột phím “OK” để chấp nhận Hình PL8 Bổ sung mơ tả (annotations) vào thiết kế 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 phần tử thành “More Info” nhập xâu ký tự,ví dụ, “We probably want more info in conlumns with headers for sorting…” Hình PL9 Bổ sung tín 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 có hình dạng bút chì Hãy nhấp bút dấu đỏ để bắt đầu nối, sau 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 Hình PL10 Bước Tạo lập hộp thoại “Edit Task”: Hộp thoại Edit Task xuất người sử dụng muốn sửa đổi mốt nhiệm vụ có sẵn máy (Hình PL11) Nó tương tự hộp thoại New Task Có thể sử dụng 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 sau: Sao chép (Copy) thiết kế hộp thoại New Task vừa thiết kế Mở tệp “NewTaskDialog.gui” cách nhấp chuột dự án (trong panel “Project”) Sử dụng lệnh thực đơn “Edit | Select All” để chọn phần tử sử dụng lệnh “Edit | Copy” để chép tất 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” để gán phần tử vừa chép Dịch chuyển chúng vào hình Thay đổi văn hộp soạn thảo Summary thành “Lunch” nhập dòng vă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 đĩa với tên tệp EditTaskDialog.gui, kết thúc bước Bước Gộp lại : Để quan sát ứng dụng Task List Manager chạy (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 đây: Mở panel ”Project” tạo lập tài liệu thiết kế với tên “Screenshot” Di nhả tệp thiết kế “ApplicationWindow.gui” từ dự án vào thiết kế Thực tương tự với tệp thiết kế “TaskListDocument.gui” “EditTaskDialog.gui” thành phần hình thành lên screenshot Lưu trữ kết vào tệp với tên Screenshot.gui kết thúc Hình PL12 Bước Quan sát kết quả: Cho đến thời điểm tại, thiết kế thực 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 thiết kế với tập lược đồ màu khác (ví dụ lược đồ màu windows) với annotations, Design Grid Lines, Toolbar Buttons…Việc thực nhờ công cụ Simulator, trình diễn thiết kế cữa sổ hình đầy đủ Thứ tự thực 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 sát phím ESC để khỏi chế độ mơ mỏng sau quan Thiết kế Prototype ứng dụng tương tác: Trong giới phim ảnh, khái niệm “storyboard” 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ồn điều khiển người sử dụng thực hành động Ta sử dụng thành phần thiết kế thực theo hướng dẫn để xây dựng storyboards Tiếp theo, ta 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 bước thực thiết kế 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ế “Storyboard1” Di nhả tệp thiết kế “ApplicationWindow.gui” từ dự án vào thiết kế Thực tương tự với tệp thiết kế ”TaskListDocument.gui”, “EditTaskDialog.gui” “NewTaskDialog.gui” 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ả tạo nhiều kết nối Nhấn phím ESC để khỏi chế độ kết nối Chú ý: không nối biểu tượng cơng cụ với cửa sổ có nghĩa chưa vẽ “Toolbar button” mà di nhả Icons công cụ Hãy kết nối phím cơng cụ vào thành phần TaskListDocument, NewTaskDialog EditTaskDialog tương ứng Lưu trữ lên tệp Chạy mô Simulator (F9 key) để nhìn thấy kết Nhấn phím ESC để khỏi chế độ mơ chọn phần tử ApplicationWindow Sử dụng lên thực đơn “Design | Select Representative Element” để chọn phần tử đại diện Đường viền xanh xuất xung quanh phần tử vừa chọn (Hình PL13) Hình PL13 Chạy lại mơ Lưu trữ thiết kế vào tệp “Storyboard1.gui” kết thúc bước Bước Bổ sung đặc trưng dẫn đường Trong bước ta bổ sung vào storyboard cách thay đổi tài liệu Task List từ cửa sổ modal sang modeless Đồng thời, ta kích hoạt phím đóng sau cho hộp thoại cửa sổ đóng chuột hay phím ESC Hình PL4 ví dụ thiết kế 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 cửa sổ modeless: nhấp chuột đường liên kết phím cơng cụ ‘New Document’ cửa sổ tài liệu ‘TaskList’ để mở thuộc tính 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ửa sổ tài liệu ‘Task List’, nhấp chuột phím ‘New Task’ ‘Edit Task’ để mở hộp thoại Ta thấy cửa sổ ‘Task List’ tồn đồng thời với chúng Thoát khỏi chế độ mơ phím ESC Hình PL14 Hình PL15 Mặc định, cửa sổ mở 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) Sử dụng “Make Connection” để kết nối anchor với cửa sổ tài liệu Hình PL16 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 sổ hình PL14 Với phím “OK” “Cancel”: Bổ sung phần tử “Close and Accept” “Close and Cancel” từ panel “Storyboard” kết nối chúng đến phím “OK” “Cancel” hình PL14 Đồng thời kết nối phím đóng ‘X’ tiêu để 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 sổ hình PL14 Mổi kích hoat hộp lệnh “Exit”, mơ đó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 sở chức bước đưa cách sử dụng phần tử thư viện chuẩn Hình PL17 ví dụ thiết kế bước 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 “Task List Document” làm sở Bổ sung tính chất dẫn đường theo cách trình bà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 “Empty Document” Chọn hai phần tử mô tả hủy chúng lệnh thực đơn “Edit | Delete” hay phím Delete Kết nối giửa phần tử xóa tự động 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 đầ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ế lưu trữ riêng biệt thay cho việc lưu trữ 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ế 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 rỗng Di – nhả tệp thiết kế “EmptyDocument.gui” từ panel Project vào Hình PL18 Gán lại chức 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 tạo liên kết đế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 sổ tài liệu rỗng tiêu đề Hãy sử dụng Simulator (F9 key) để thử lại hành vi Thành phần cuối mà cần 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”) hình PL19 Hình PL19 Trường hợp khơng thấy có ‘Standard Component’ panel Project, hãy tạo liên kết đến chúng nhấn phím lệnh “Add Project Link” panel Project Duyệt đến ‘StandardComponent’, đường dẫn ‘GUI Design Studio\Samples\Standard Components’ sau cài đặt GUI Design Studio Hình PL 20 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 chưa thực phù hợp với yêu cầu ứng dụng 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 phần muốn thay đổi Hãy mở tệp File Open (“Dialog_FileOpen_Standard.gui”) để khảo sát thiết kế cách nhấp đúp chuột Project browser Bây cần móc hộp thoại File Open Bắt đầu 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 muốn phím “Open” thực đóng hộp thoại sau mở cửa sổ tài liệu Task List Khi đa hành động xãy từ phím, chúng thực theo thứ tự mà 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ổ mức với hộp thoại đó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 xuất vị trí mặc định hình Do vậy, bổ sung thêm chốt vị trí cho phù hợp Vị trí điểm chốt tốt hình PL17 Cuối cùng, thiết lập thiết kế 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 ‘TaskList’ (ví dụ, Lunch) mở hộp thoại soạn thảo “Task Details” tương tự nhấn phím ‘Edit Task’ cơng cụ tìm đến phần tử “Navigation Overlay” panel “Storyboard” Di vào bảng thiết kế định vị chúng nhiệm vụ lựa chọn Lunch 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 chuột đường kết nối để mở soạn thảo thuộc tính 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 hoàn thiện thiết kế bổ sung hệ thống thực đơn (Hình PL1) Các bước thực 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 tạo lập từ phác họa để tiết kiệm thời gian ta 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 thực đơn File, Edit, View, Window Help, sau nhấp Ctrl+C để chép vào clipboard Hình PL22 Hãy trở tài liệu thiết kế “Storyboard4” sử dụng Ctrl+V để dán vào Bây xếp chúng Application Window thiết kế hình PL21 Nếu ta cần thêm thực đơn Task, bổ sung phần tử “Popup Menu” từ nhóm “Toolbar and Menus” panel Elements Hãy sửa đổi thuộc tính để có mục thực đơn “New…” “Edit…” (Hình PL23) Hình PL23 Ta thay đổi mục “About Application Name” mục thực đơn Help thành “About Tutorial Application” Hãy nối mục thực đơn Application Window với thực đơn tương ứng 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 kết nối tự động đặt “Modal Choice Popup” 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ện “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ế Mô phần mềm Paint Window 10 GUI Design Studio: a Giao diện Click vào nút “Home” công cụ Paint: b Giao diện Click vào nút “File” công cụ Paint: c Giao diện Click vào nút “View” công cụ Paint: ... thiết kế với chuột Xem thích thích thiết kế, bao gồm mơ tả cửa sổ bật lên Xuất thiết tệp hình ảnh phổ biến (.bmp, gif, jpg, png, emf) In thiết kế bao gồm sở xem trước in Tự có sẵn phân phối... (tệp gdd) mẫu thiết kế có sẵn trang web o o o o o o o o o o o o o o o Duyệt xem tệp thiết kế bao gồm chạy chúng riêng lẻ toàn dự án mẫu thử nghiệm ứng dụng Về xuất từ GUI Design Studio, phân