Bao cao tuong tac nguoi may

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 và các chức năng trên GUI Design Studio và
mô phỏng lại phần mềm Paint trên 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 của Giảng Viên Hướng Dẫn
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………

……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
……………………………………………………………
TP.HCM, ngày…tháng…năm…
Giảng viên


Mục Lục
1. Giới thiệu về GUI Design Studio.
2. Giao diện của GUI Design Studio.
3. Các bước thiếc kế các 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 cả lại.
Bước 7: Quan sát kết quả.
4. 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ác đặ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.
5. Mô phỏng phần mềm Paint trên Window 10 bằng GUI Design
Studio.
a. Giao diện khi click vào nút “Home” trên thanh công cụ
trong Paint.
b. Giao diện khi click vào nút “File” trên thanh công cụ
trong Paint.
c. Giao diện khi click vào nút “View” trên thanh công cụ
trong Paint.


1. Giới thiệu về GUI Design Studio:
 GUI Design Studio được dùng để mô tả một môi trường làm việc thân
thiện với người sử dụng, được sử dụng những hình tượng đồ họa, như
các Icon để thay thế những dòng lệnh tương tác với máy tính.
 GUI Design Studio là một công cụ để thiết kế giao diện người dùng
cho hệ điều hành Windows mà bạn có thể sử dụng để nhanh chóng tạo
những prototype thể hiện không cần viết mã.
 GUI Design Studio : Giúp vẽ từng màn hình, cửa sổ và phụ kiện đơn
lẻ sử dụng những yếu tố chuẩn, kết nối chúng với nhau thành quá
trình xảy ra theo kịch bản và sau đó chạy thử thiết kế của bạn.
 GUI Design Studio : là một công cụ đặc biệt cho nhà thiết kế phần
mềm, nhà phân tích, kỹ sư có thể dùng để quản lý đề án và cố vấn.
 GUI Design Studio có thể được sử dụng bất cứ khi nào bạn cần như
vẽ một chương trình nhìn như thế nào hay cho thấy các phần của nó
kết nối và làm việc nhịp nhàng ra sao.
 Sử dụng GUI Design Studio khi bạn cần cung cấp phần mềm đáp ứng
chính xác yêu cầu của người dùng và bạn muốn làm cho nó đúng ngay
lần đầu tiên.

 Các nhà thiết kế phần mềm, các chuyên gia về kinh nghiệm người
dùng, các nhà phân tích kinh doanh, các nhà phát triển, các nhà quản
lý dự án và các chuyên gia tư vấn. Bất cứ ai thiết kế hoặc chỉ định
giao diện người dùng.
 Nhanh chóng đưa ra các ý tưởng và thử nghiệm chúng trong môi
trường chi phí thấp, không có rủi ro và tránh việc thực hiện lại quá
trình thực hiện tốn kém bằng cách nhận được thiết kế phù hợp đã thỏa
thuận trước.
 GUI Design Studio thường được sử dụng :
o Dẫn chứng bằ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 và yêu cầu thiết kế.
o Tạo các mô hình trên màn hình.
o Cung cấp các đặc điểm chi tiết cho nhà phát triển.
o Đề xuất các cải tiếm cho sản phẩm hiện tại.


 Icon Express - Tính năng:
• Biểu tượng Express là trình chỉnh sửa biểu tượng đơn giản,
không vô nghĩa và miễn phí với tất cả các tính năng cần thiết để tạo
các biểu tượng đơn giản:
Vẽ pixel
Vẽ đường thẳng
Bản vẽ hình chữ nhật và hình elip (đầy hoặc không có)
Văn bản vẽ trong phông chữ bất kỳ
Tùy chọn điền dàn
Lựa chọn màu thay thế
Cục gôm
Lật và xoay
Công cụ lựa chọn để cắt từng phần, sao chép và dán

Dán đồ họa bên ngoài để tạo một biểu tượng
Hỗ trợ 16, 256 và các biểu tượng màu True
Nhiều định dạng biểu tượng cho mỗi tệp tin
Kích thước biểu tượng lên đến 127 x 127 được hỗ trợ
Không thể hoàn tác / làm lại
Cửa sổ soạn thảo có thể mở rộng với xem trước kích thước thực
tế
 Tất nhiên, có rất nhiều tính năng và năng lực mà chúng ta có thể thêm
vào Icon Express, đặc biệt là so với một số trình chỉnh sửa biểu tượng
khác nhưng sẵn có nhanh chóng và dễ sử dụng, và tốt nhất là nó hiện
đang miễn phí.
 Ngoài ra, còn có trình xem thiết kế giao diện người dùng:
o GUI Design Viewer là một sản phẩm đi kèm với GUI Design
Studio cho phép bạn xem thiết kế giao diện người dùng và chạy
các nguyên mẫu của bạn. Và bởi vì họ chia sẻ cùng một động
cơ, thiết kế của bạn sẽ giống nhau và nguyên mẫu của bạn sẽ
hoạt động giống nhau trong các phiên bản tương thích của cả
hai sản phẩm.
 Mở bất kỳ dự án thiết kế giao diện (.gdp) hoặc tệp thiết
kế cá nhân (.gui)
 Mở các bản phân phối dự án tập tin được tạo ra đặc biệt
(tệp .gdd) như các mẫu thiết kế có sẵn trên trang web này.
o
o
o
o
o
o
o
o

o
o
o
o
o
o
o


 Duyệt và xem các tệp thiết kế bao gồm và chạy chúng
riêng lẻ hoặc toàn bộ dự án như một mẫu thử nghiệm ứng
dụng.
 Về xuất khẩu từ GUI Design Studio, phân phối có thể
được thiết lập sao cho Viewer tự động chạy nguyên mẫu
khi tệp được mở và tùy chọn đóng lại sau đó để dự án
hoạt động gần giống như một ứng dụng thực.
 Hỗ trợ cùng một kiểu hình ảnh và các lựa chọn màu sắc
cho visualization .
 Zoom và pan thiết kế với con chuột.
 Xem chú thích và chú thích thiết kế, bao gồm mô tả cửa
sổ bật lên.
 Xuất thiết kế đến các tệp hình ảnh phổ biến (.bmp, .gif,
.jpg, .png, .emf).
 In thiết kế bao gồm một cơ sở xem trước in.
 Tự do có sẵn và có thể 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ả năng
hỗ trợ việc thiết kệ giao diện người sử dụng đồ họa (GUI). Phụ lục
nà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:
.
 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:
o Thiết kế các thành phần GUI. Mỗi thành phần để trong một tệp
dự án (project file).
o 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 story board. story board 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. Giao diện của GUI Design Studio:

Một số chức năng của GUI Design Studio V5
• Trong giao diện của GUI Design Studio V5 có Menu Bar, Toolbar, Status Bar,
Design Bar.
• Menu Bar nằm ở góc trên gồm File, Edit, View, Project, Design, Data, Layout,
Run, Window và 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 và Exit. Trong Edit có Undo,
Redo, Cut, Copy, Duplicate, Paste, Delete, Select All, Copy Design Image và
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 và 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 và 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 và Refresh All.
• Trong Data có New Data Table, Edit Data Table, Import Data, Rename,
Delete, Restore Original Data, Keep Session Data và 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 và Snap to Edges.

3. Các bước thiếc kế các thành phần GUI:
Bước 1. Khởi tạo dự án:
 Mở để chạy chương trình 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 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 này sẽ tạo ra
danh mục con ”thuc_hanh” trong dự án.

 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ủ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 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ỏ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 lệnh chọn 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à bấm phím “OK” ( ).
Hãy lưu trữ tài liệu thiết kế của thành phần này lên tệp với tê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ào thiết kế.
 Nhấp đúng 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).

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ác 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 các 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ếp sau dấu &
trong câu có nghĩa rằng nó là phím lệnh cấp tốc.
 Bổ sung Edit Box và Multiple Line Edit Box như 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 Ctrl + 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ản trong thuộc tính Text của Edit Box và
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).

Hình PL5
Trình tự thiết kế như sau:
 Tạo lập tài liệu thiết kế mớ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ổ để đổ 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í 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 đơ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 PL6).


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 “Toolbar 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 and Menus” và gắn thanh trạng thái vào đáy cửa sổ
ứng dụ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 trang thái từ nhóm
“Toolbars and Menus”. Bổ sung 3 chỉ báo và sửa cac 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 title củ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 (đặt tê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 “Plat 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 và 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 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.

Hình PL8

 Bổ sung mô tả (annotations) 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 Title củ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 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 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
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 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 đúng 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” để gán mọi phần tử 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 đĩa vớ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ạy như 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.gui và kết thúc.


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 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
sát.

phím ESC để thoát khỏi chế độ mô mỏng sau quan

4. 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ồn đ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 để
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ụng tươ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”.
 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ên 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 sau
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
PL4 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 cửa sổ modeless: nhấp đúng 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 ‘TaskList’ để 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.


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). 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” 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 Cancel” từ panel “Storyboard” và kết nối chúng
đến 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 hoat 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 “Empty Document”.
 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 OK và 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 Project vào.

Hình PL18
 Gán lại chức năng của phím lệnh New Document trên thanh công cụ để
mở cửa sổ tài liệu rỗng. Chọn và hủy các đường nối đến cửa sổ tài liệu
thứ nhết từ phím lệnh và định vị chốt. bây giờ tạo các 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 và nối đến phím đóng ‘X’
của cửa sổ tài liệu rỗng trên thanh tiêu đề của nó. Hãy sử dụng Simulator
(F9 key) để thử lại các hành vi mới.


 Thành phần cuối cùng mà cần được bổ sung vào Storyboard là 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’ trên panel Project, hãy
hãy tạo liên kết đến chúng bằng nhấn phím lệnh “Add Project Link” trên
panel Project. Duyệt đến ‘StandardComponent’, nó ở trong đường dẫn
‘GUI Design Studio\Samples\Standard Components’ sau khi cài đặt GUI
Design Studio.

Hình PL 20
File Open dialog là hộp thoại chuẩn chứa tên danh mục và các chi tiết
khác (Hình PL20). Cái này có thể chưa thực sự phù hợp với yêu cầu ứng


dụng. có thể tạo ra hộp thoại riêng nhờ mẫu có sẵn hay bổ sung thêm các
phần tử lên trê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 trên nó trong 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 trên thanh 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 là đóng hộp thoại và sau đó
mở cửa sổ tài liệu Task List. Khi đa hành động xãy ra từ cùng một phím,
chúng được thực hiện theo thứ tự mà nó được tạo ra. Nếu ta hiển thị cửa sổ
tài liệu trước khi đóng hộp thoại thì cửa sổ sẽ ở cùng mức với hộp thoại và
nó sẽ được đóng cùng với hộp thoại. Trước hết hãy bổ sung hộp “Close and
Accept” từ panel Storyboard vào thiết kế và bổ sung liên kết từ phím
“Open” tới nó. 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 là giữa
màn hình. Do vậy, hãy bổ sung thêm chốt vị trí cho phù hợp. Vị trí điểm
chốt tốt nhất là như trong hình PL17.
 Cuối cùng, hãy thiết lập thiết kế sao cho khi người sử dụng nhấp đúp chuột
trên mục lựa chọn (chiếu sáng) trong cửa sổ tài liệu ‘TaskList’ (ví dụ,
Lunch) thì nó mở hộp thoại soạn thảo “Task Details” tương tự khi nhấn
phím ‘Edit Task’ trên thanh công cụ. hãy tìm đến phần tử “Navigation
Overlay” trên panel “Storyboard”. Di nó vào bảng thiết kế và định vị chúng
trên 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 trong thiết kế. Nhấp đúng chuột trên đường kết nối để mở soạn


thảo thuộc tính của nó và thay đổi thuộc tính “Event Trigger” từ mặc định
“Left Click” thành “Left Double Click”.
 Thử lại và lưu thiết kế vào tệp.
Bước 4. 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 các 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 các phần tử thành phần của thực
đơn File, Edit, View, Window và Help, sau đó nhấp Ctrl+C để sao chép
nó vào clipboard.

Hình PL22
 Hãy trở về tài liệu thiết kế “Storyboard4” và sử dụng Ctrl+V để dán vào
nó. Bây giờ sắp xếp chúng trên Application Window trong thiết kế như
trên hình PL21.


 Nếu ta cần thêm thực đơn Task, thì hãy bổ sung phần tử mới “Popup Menu”
từ nhóm “Toolbar and Menus” trên panel Elements. Hãy sửa đổi thuộc tính
của nó để có các mục thực đơn “New…” và “Edit…” (Hình PL23).

Hình PL23








Ta có thể thay đổi mục “About Application Name” trong mục thực đơn
Help thành “About Tutorial Application”.
Hãy nối từng mục trên thanh thực đơn của Application Window với thực
đơn tương ứng của nó. Nếu sử dụng phím Shift khi nhập chuột trên phím
thanh công cụ “Make Connection” để tạo ra lệnh dính. Nhấn phím Esc để
thoát khỏi mode này. Bởi vì mục tiêu là các thực đơn popup, cho nên ta
thấy Navigation Type trên mỗi kết nối được tự động đặt về “Modal
Choice Popup” như dấu hiệu hộp thoại trên đường mũi tên.
Bổ sung hộp “Exit” từ panel Storyboard và nối nó với lệnh Exit trên thực
đơn File.
Nối lệnh “Open…” trên thực đơn File đến hộp thoại File Open.
Nối các lện “New…” và “Edit…” trên thực đơn Task đến các hộp thoại
Task Details kết hợp.
Kiểm thử trong Simulator và lưu trữ thiết kế.