Qui trình thiết kế trực quan giao diện của ứng dụng

1. CHƯƠNG 4 Qui trình thiết kế trực quan giao diện của ứng dụng

2. Ứng dụng VB • Một ứng dụng VB được xây dựng dựa trên khái niệm cây dự án (project). • Dự án được hiện thực thông qua các module như hình sau: Dự án Module

3. Các module cơ bản • Form module • Dùng để xây dựng giao diện. • Phần objects chứa các đối tượng giao diện như command button, label, textbox, . . . • Phần code chứa các hàm xử lý sự kiện tương tác của các đối tượng giao diện như click, change, . . . • Class module • Dùng để định nghĩa các lớp đối tượng. • Standard module • Dùng cho các ứng dụng dạng lập trình cấu trúc. • Chỉ chứa code dưới dạng các function.

4. Phân loại đối tượng • Một ứng dụng OOP có thể sử dụng 3 loại đối tượng : • Các phần tử giao diện gắn vào “form module”. • Các đối tượng đặc tả trong "class module". • Các đối tượng có sẳn khác trong các thư viện liên kết động, các database, . . . • Dùng các đối tượng giao diện có sẳn cần phải biết về các thuộc tính và tác vụ của đối tượng.

5. Viết ứng dụng • Viết ứng dụng trong VB là thực hiện các công việc sau : • Chọn loại dự án và đặt tên. • Chọn loại module thêm vào dự án và đặt tên. • Chọn đối tượng giao diện gắn lên form module, đặt tên và chỉnh sửa các giá trị ban đầu của các thuộc tính cần thiết. • Chọn sự kiện tương tác với các đối tượng giao diện và viết code xử lý tương ứng. • Chạy thử ứng dụng và sửa lỗi nếu có. • Lưu trữ. • Lưu trữ ứng dụng lên đĩa nên theo dạng cây phân cấp riêng của mỗi người.

6. Khởi động VB • Chọn menu Start -> All Programs -> Microsoft Visual Studio 6.0 -> Microsoft Visual Basic 6.0 • Ấn kép chuột vào icon shortcut của VB trên màn hình desktop (ta phải tạo trước icon shortcut này). • Chọn menu Start -> Run, rồi nhập hàng lệnh chạy ứng dụng, thí dụ như : c:\Program Files\Microsoft Visual Studio\VB98\VB6.exe • Dùng Windows explorer, duyệt đến thư mục chứa file chương trình VB (thí dụ c:\Program Files\Microsoft Visual Studio\VB98), ấn kép vào file chương trình VB6.exe Minh họa

7. Cửa sổ khởi động VB Dự án mới Dự án vừa viết Dự án đã có

8. Cửa sổ làm việc Form Layout Properties Window Project Explorer ToolBox

9. Window / Form / DialogBox Control buttons Title bar Menu ToolBar TextBox Command button Ví dụ thiết kế giao diện

10. Minh họa trên VB • Khởi động VB. • Chọn new project. • Project : đổi tên (name). • Form : đổi tên (name), tiêu đề (caption). • Chỉnh tên (name), và các thuộc tính cần thiết • Dùng Properties Window. • Lưu ý chỉnh đồng loạt một thuộc tính của tất cả các phần tử sẽ nhanh hơn chỉnh nhiều thuộc tính của cùng một phần tử. • Thêm phần tử giao diện • Copy-Paste (chọn "No" - dùng tên khác, không dùng thuộc tính Index. Nếu chọn "Yes" - dùng chung tên, thuộc tính index bật lên. Muốn sửa lại phải đổi Name và xoá thuộc tính Index) • Format - Make same size - Both • Format - Vertical Spacing - Make equal

11. Danh sách thuộc tính các đối tượng • Caption = +, Name = cmdAdd • Caption = -, Name = cmdSub • Caption = *, Name = cmdMul • Caption = /, Name = cmdDiv • Caption = +/-, Name = cmdPosNeg • Caption = ., Name = cmdPoint • Caption = =, Name = cmdEqual • Caption = 1/x, Name = cmd1x • Caption = %, Name = cmdPercent • Caption = sqrt, Name = cmdSqrt • Caption = C, Name = cmdC • Caption = CE, Name = cmdCE • Caption = Backspace, Name = cmdBack • Text = 0., Name = txtDisplay • Caption = không có, Name = cmdMemStatus • Caption = MC, Name = cmdMC • Caption = MR, Name = cmdMR • Caption = MS, Name = cmdMS • Caption = MA, Name = cmdMA • Caption = 0, Name = cmd0 • Caption = 1, Name = cmd1 • Caption = 2, Name = cmd2 • Caption = 3, Name = cmd3 • Caption = 4, Name = cmd4 • Caption = 5, Name = cmd5 • Caption = 6, Name = cmd6 • Caption = 7, Name = cmd7 • Caption = 8, Name = cmd8 • Caption = 9, Name = cmd9

12. Menu chính Thiết kế menu bar cho form giao diện • Cấu trúc menu như sau : File Menu Help Menu View Menu

13. Kết quả thiết kế menubar

14. Toolbar ImageList Thiết kế Toolbar • Toolbar là phần tử giao diện có sẳn nhưng nằm trên thư viện, cần phải thêm vào. • Tên thư viện động Microsoft Windows Common Control 6.0

15. Qui trình tạo Toolbar của form • Chuẩn bị hình ảnh. • Tạo ImageList để giữ hình ảnh. • Tạo Toolbar • Định số nút nhấn trên toolbar. • Gán hình ảnh vào từng nút nhấn. • Đặt tên Key cho nút nhấn. • Nhập Tool Tip Text nếu cần.

16. Vẽ ảnh cho button bằng trình Paint • Chọn kích thước ảnh 20x20. • Phóng to 400% và vẽ từng điểm (pixel). • Trước khi vẽ 1 điểm, hãy chọn màu vẽ thích hợp. • Sau khi vẽ xong, dùng menu File.Save As để cất ảnh lên file thích hợp : • copy.bmp • paste.bmp • standard.bmp • scientific.bmp • help.bmp • about.bmp

17. Kho hình ảnh của VB • Trong lúc tạo ImageList, có thể dùng hình ảnh có sẳn của VB. • Tên thư mục của kho hình : • C:\Program Files\Microsoft Visual Studio\Common\Graphics\Bitmaps\TlBr_W95 Copy.bmp Past.bmp Standard.bmp About.bmp Scientific.bmp Help.bmp

18. Kết quả tạo Toolbar

19. Ghi chú về qui trình tạo giao diện • Thường thì form giao diện như MiniCalculator không cần chứa menubar và Tollbar. Giao diện dạng này được gọi là Dialog based. • Còn 2 dạng giao diện ứng dụng phổ biến khác là : • SDI (Single Document Interface) : cửa sổ của chương trình gồm 1 menubar, 1 hay nhiều Toolbar và 1 cửa sổ làm việc duy nhất. Từng thời điểm, cửa sổ làm việc này sẽ cho phép hiển thị/hiệu chỉnh 1 document của ứng dụng. • MDI (Multiple Document Interface) : cửa sổ của chương trình gồm 1 menubar, 1 hay nhiều Toolbar và n cửa sổ làm việc khác nhau, mỗi cửa sổ làm việc sẽ cho phép hiển thị/hiệu chỉnh 1 document của ứng dụng.

20. Giao diện SDI Vùng đánh văn bản

21. Giao diện MDI Vùng đánh văn bản

22. Ghi chú về tạo giao diện • Tạo giao diện SDI, MDI bằng công cụ "VB Application Wizard". • Wizard là dạng công cụ tạo tự động thông qua cách hỏi đáp để thu thập thông tin. • Menu và Toolbar được tạo ra tự động. Minh họa

23. Hàm xử lý sự kiện (biến cố) • Chọn sự kiện của đối tượng cần xử lý. • Ví dụ : sự kiện Click của đối tượng Command button. • Dùng cửa sổ code (menu View - Code) để chọn đối tượng và sự kiện. Đối tượng Viết code vào đây Sự kiện