›
›

Bài giảng môn Tin học đại cương - Chương 4: Quy trình thiết kế trực quan giao diện của ứng dụng

pdf 36 trang phuongnguyen 2980
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng môn Tin học đại cương - Chương 4: Quy trình thiết kế trực quan giao diện của ứng dụng", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_mon_tin_hoc_dai_cuong_chuong_4_quy_trinh_thiet_ke.pdf

Nội dung text: Bài giảng môn Tin học đại cương - Chương 4: Quy trình thiết kế trực quan giao diện của ứng dụng

  1. MÔN TIN HỌC Ch ươ ng 4 QUI TRÌNH THI ẾT KẾ TRỰC QUAN GIAO DI ỆN CỦA ỨNG DỤNG 4.1 Dự án và ứng d ụng 4.2 Tạo/xóa đố i t ượ ng giao di ện. 4.3 Hi ệu ch ỉnh giá tr ị thu ộc tính c ủa đố i t ượ ng giao di ện 4.4 T ạo menubar 4.5 Tạo Toolbar 4.6 Tạo và vi ết th ủ t ục x ử lý s ự ki ện Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 93
  2. 4.1 Dự Án Và Ứng Dụng 1 ứng dụng VB đượ c cấu thành từ nhi ều đố i tượ ng thu ộc nhi ều lo ại:  Các ph ần tử giao di ện  Các "class module", mỗi class đặ c tả 1 lo ại đố i tượ ng cần dùng cho gi ải thu ật của ch ươ ng trình.  Các đố i tượ ng khác nh ư các th ư vi ện liên kết độ ng, các database, Để qu ản lý ứng dụng đượ c dễ dàng ta sử dụng ph ươ ng ti ện "D ự án" (Project). Dự án là 1 cây th ứ bậc các ph ần tử cấu thành ứng dụng. Vi ết ứng dụng là qui trình tạo dự án, thêm/b ớt, hi ệu ch ỉnh từng ph ần tử trong dự án. Thao tác để th ực hi ện các tác vụ trên khá gi ống với các thao tác mà ta đã bi ết trên hệ th ống file th ứ bậc của máy tính. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 94
  3. Khởi động VB 6.0 VB là 1 ứng dụng nh ư bao ứng dụng khác. Để kh ởi độ ng 1 ứng dụng, ta có nhi ều cách khau nhau:  Ch ọn menu Start.Programs.Microsoft Visual Basic 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 trình qu ản lý hệ th ống file WE, 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. Sau khi VB đượ c kh ởi độ ng, ta th ườ ng th ấy cửa sổ màn hình nh ư sau: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 95
  4. Cửa sổ khởi động VB Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 96
  5. Tạo mới dự án Cửa sổ New Project của VB có ba th ẻ (Tab):  New: tạo mới một d ự án (tab này đượ c ch ọn default)  Existing: Mở 1 d ự án đã có s ẵn trên máy (d ự án c ũ nào đó).  Recent: Mở 1 d ự án trong n d ự án g ần hi ện t ại nh ất. Với tab New đượ c ch ọn, bạn có th ể tạo 1 dự án theo 1 lo ại nào đó, nh ưng đố i với các ứng dụng thông th ườ ng ta sẽ dùng lo ại dự án "Standard EXE". Ấn kép vào icon "Standard EXE" để tạo mới dự án tươ ng ứng. 1 form mới đượ c tạo ra tự độ ng để bạn có th ể thi ết kế tr ực quan form giao di ện này. Qui trình thi ết kế giao di ện là tu ần tự thi ết kế từng form theo yêu cầu, nếu mu ốn tạo mới 1 form khác (hay 1 đố i tượ ng nào đó vào dự án), bạn ấn kép chu ột vào cửa sổ Project, dời chu ột đế n menu "Add", rồi ch ọn mục "Form" trong danh sách. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 97
  6. Thí dụ về form thi ết kế: MiniCalculator Control buttons Window ≡ Form, Dialogbox Title bar Menu Toolbar Textbox Command Button Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 98
  7. 4.2 Tạo 1 đối t ượng giao di ện trên form  Để hi ển th ị và làm vi ệc tr ực quan với 1 form, ấn kép chu ột vào mục tên form trong cửa sổ Project.  Để tạo mới 1 đố i tượ ng giao di ện trong form, dùng chu ột ch ọn icon tươ ng ứng với đố i tượ ng trong cửa sổ Toolbox rồi vẽ đố i tượ ng ở vị trí và kích th ướ c mong mu ốn trên form.  Bạn cũng có th ể tạo mới đố i tượ ng giao di ện dùng cơ ch ế sinh sản vô tính: ch ọn đố i tượ ng đã có, ấn button Copy trên Toolbar rồi ấn button Past trên Toolbar, đố i tượ ng mới sinh ra gi ống y nh ư đố i tượ ng có sẵn (nên đặ t lại tên khác bằng cách ch ọn button "No" trong hộp tho ại yêu cầu sau khi ấn icon Past). Đây là 1 trong nhi ều cách để tạo nhi ều đố i tượ ng có kích th ướ c gi ống hệt nhau. Thí dụ slide sau miêu tả tr ạng thái của form sau khi ta vẽ đượ c 1 textbox hi ển th ị số và 5 button bên trái nh ất của máy tính. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 99
  8. 4.3 Thi ết l ập giá tr ị cho các thuộc tính  Để dễ cân ch ỉnh vị trí và kích th ướ c của các đố i tượ ng, ta nên thi ết lập các thu ộc tính cơ bản sau: "Name", "Caption". Thu ộc tính "Name" đượ c dùng để truy xu ất đố i tượ ng lúc lập trình, còn thu ộc tính "Caption" đượ c hi ển th ị trên ph ần tử (không ph ải đố i tượ ng nào cũng có Caption). Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 100
  9. Thi ết l ập giá tr ị cho các thuộc tính (tt)  Để xem và hi ệu ch ỉnh giá tr ị của các thu ộc tính của 1 đố i tượ ng giao di ện, bạn ấn chu ột ch ọn đố i tượ ng, cửa sổ Properties bên ph ải màn hình sẽ hi ển th ị các thu ộc tính của đố i tượ ng đượ c ch ọn. Bạn duy ệt các thu ộc tính từ trên xu ống và nh ập vào giá tr ị mới cho thu ộc tính mong mu ốn. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 101
  10. Cân chỉnh kích thước các đối t ượng Nếu vẽ bằng tay tu ần tự các đố i tượ ng thì khó lòng đả m bảo kích th ướ c của chúng bằng nhau, do đó bạn nên dùng cơ ch ế sinh sản vô tính (Copy-Paste). Tuy nhiên nếu lỡ tạo bằng tay các đố i tượ ng rồi thì để làm kích th ướ c nhi ều đố i tượ ng gi ống y nhau, bạn ch ọn các đố i tượ ng rồi ch ọn menu Format.Make Same Size.Both (b ằng kích th ướ c của đố i tượ ng đượ c ch ọn cu ối cùng). Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 102
  11. Đồng chỉnh vị trí các đối t ượng Tươ ng tự, nếu vẽ bằng tay tu ần tự các đố i tượ ng thì khó lòng đả m bảo kho ảng cách gi ữa chúng đề u nhau. Để kho ảng cách dọc gi ữa các đố i tượ ng đề u nhau, bạn ch ọn các đố i tượ ng rồi ch ọn menu Format.Vertical Spacing.Make Equal (c ố đị nh vị trí 2 đố i tượ ng xa nh ất theo chi ều dọc rồi ch ỉnh dọc các đố i tượ ng còn lại). Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 103
  12. Kết quả t ạm thời của form MiniCalculator Với qui trình tạo đố i tượ ng, thi ết lập các thu ộc tính cần thi ết và ch ỉnh dạng các đố i tượ ng giao di ện nh ư đã đượ c trình bày, bạn ti ếp tục tạo các đố i tượ ng còn lại của form MiniCalculator. Kết qu ả nh ư sau: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình t ủhi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 104
  13. Danh sách thuộc tính các đối t ượng Danh sách giá tr ị các thu ộc tính đượ c thi ết lập cho các đố i tượ ng (s ẽ đượ c tham kh ảo bởi code ch ươ ng trình đượ c vi ết sau):  Caption = , Name = cmdMemStatus  Caption = +, Name = cmdAdd  Caption = MC, Name = cmdMC  Caption = -, Name = cmdSub  Caption = MR, Name = cmdMR  Caption = *, Name = cmdMul  Caption = MS, Name = cmdMS  Caption = /, Name = cmdDiv  Caption = MA, Name = cmdMA  Caption = +/-, Name = cmdPosNeg  Caption = 0, Name = cmd0  Caption = ., Name = cmdPoint  Caption = 1, Name = cmd1  Caption = =, Name = cmdEqual  Caption = 2, Name = cmd2  Caption = 1/x, Name = cmd1x  Caption = 3, Name = cmd3  Caption = %, Name = cmdPercent  Caption = 4, Name = cmd4  Caption = sqrt, Name = cmdSqrt  Caption = 5, Name = cmd5  Caption = C, Name = cmdC  Caption = 6, Name = cmd6  Caption = CE, Name = cmdCE  Caption = 7, Name = cmd7  Caption = Backspace, Name =  Caption = 8, Name = cmd8 cmdBack  Caption = 9, Name = cmd9  Text = 0., Name = txtDisplay Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình t ủhi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 105
  14. 4.4 Thi ết kế menu bar cho form giao di ện Gi ả s ử form MiniCalculator c ần có 1 h ệ th ống menu nh ư sau: Để tạo menu bar cho 1 form nào đó, ta hi ển th ị cửa sổ ch ứa form đó (ấn kép mục tên form trong cửa sổ Project ch ứa cây th ứ bậc các ph ần tử) rồi ch ọn menu Tools.Menu Bar Cửa sổ trong slide sau sẽ hi ện lên: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình t ủhi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 106
  15. Dùng Menu Editor để thi ết kế menu bar  VB luôn tạo sẵn 1 mục mới tr ống ở hàng cu ối của danh sách. Thêm 1 ph ần tử mới là ch ọn mục mới này và nh ập ít nh ất 2 thu ộc tính Caption và Name của nó.  Button Next cho phép dời mục ch ọn xu ống 1 hàng.  Button Insert cho phép chèn 1 mục tr ống vào tr ướ c mục đượ c ch ọn hi ện hành.  Button Delete cho phép xóa mục đượ c ch ọn.  Các button ↑,↓ cho phép dời mục đượ c ch ọn đi lên hay xu ống 1 vị trí.  Các button →,← cho phép dời mục đượ c ch ọn vô thêm hay ra bớt 1 cấp trong hệ th ống cây phân cấp menu. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 107
  16. Dùng Menu Editor để thi ết kế menu bar (tt) Dựa vào đặ c tả menu bar của slide tr ướ c đây, nh ập lần lượ t các mục sau:  Caption = File, Name = mnuFile  Caption = Copy, Name = mnuFileCopy, ấn button → để vô thêm 1 cấp  Caption = Paste, Name = mnuFilePaste  Caption = View, Name = mnuView, ấn button ← để ra 1 cấp  Caption = Standard, Name = mnuViewStand, ấn button → để vô thêm 1 cấp  Caption = Scientific, Name = mnuViewScien  Caption = -, Name = mnuViewBar  Caption = Digital grouping, Name = mnuViewDigital  Caption = Help, Name = mnuHelp, ấn button ← để ra 1 cấp  Caption = Help Topics, Name = mnuHelpTopics, ấn button → để vô thêm 1 cấp  Caption = -, Name = mnuHelpBar  Caption = About MiniCalculator, Name = mnuHelpAbout. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 108
  17. Dùng Menu Editor để thi ết kế menu bar (tt) Sau khi đặ c tả xong menu, cửa sổ menu editor có dạng nh ư sau. Lưu ý lúc này bạn vẫn ch ưa th ấy menu 1 cách tr ực quan: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 109
  18. Kết quả của hoạt động thi ết kế menubar Sau khi t ạo menu xong, hãy ấn nút OK để đóng ti ện ích "Menu Editor", form giao di ện c ủa ch ươ ng trình s ẽ gi ống nh ư hình bên: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 110
  19. 4.5 Thi ết kế Toolbar cho form giao di ện Để tạo Toolbar cho 1 form trong project, tr ướ c hết ta ph ải thêm tập các điều khi ển "Window Common Controls 6.0" vào cửa sổ Toolbox của project: 2. Ch ọn tab Controls, duy ệt và ch ọn m ục t ươ ng ứng, ch ọn OK. 1. Ấn ph ải chu ột vào v ị trí tr ống c ủa Toolbox, ch ọn 3. các mục Components icon mới đượ c thêm vào Tool- box Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 111
  20. Qui trình t ạo Toolbar của form  Toolbar là 1 cửa sổ ch ứa nhi ều button (icon), mỗi button cho phép th ực hi ện 1 ch ức năng của ứng dụng. Các button có kích th ướ c đề u nhau, nên kết hợp 1 ảnh bitmap với từng button, nội dung ảnh làm sao gợi ý cho ng ườ i dùng về ch ức năng tươ ng ứng (thí dụ ảnh dạng cái kéo gợi ý ch ức năng Cut, ). 1. Công vi ệc đầ u tiên cần th ực hi ện là dùng 1 trình so ạn th ảo đồ họa (Paint, CorelDraw, ) để thi ết kế (v ẽ) từng ảnh bitmap gợi ý cho từng button trong Toolbar. Bạn có th ể dùng trình "Screen Capture" cắt các icon có sẵn của ứng dụng đang ch ạy và dán vào vùng so ạn th ảo ảnh của trình so ạn th ảo đồ họa. Sau khi so ạn xong 1 ảnh, ta cất ảnh lên file dạng *.bmp. Lưu ý rằng các ảnh ph ải có cùng kích th ướ c (thí dụ 16*16, 20*20,32*32, ). Slide kế miêu tả cửa sổ của trình so ạn th ảo đồ họa Paint. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 112
  21. Vẽ ảnh cho button bằng trình Paint  So ạn th ảo 1 button là v ẽ t ừng pixel ảnh. Để d ễ v ẽ, b ạn nên phóng to ảnh lên kho ảng 400% tr ở lên.  Tr ướ c khi v ẽ 1 pixel, 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 Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 113
  22. Qui trình t ạo Toolbar của form (tt) 2. Dùng qui trình tạo ph ần tử giao di ện trong form nh ư đã gi ới thi ệu để tạo 1 đố i tượ ng ImageList, đố i tượ ng này sẽ ch ứa các ảnh bitmap đượ c dùng cho các icon Toolbar, vị trí và kích th ướ c của đố i tượ ng ImageList không quan tr ọng vì nó sẽ bị ẩn khi ch ươ ng trình ch ạy. 2.1 Ấn ph ải chu ột vào đố i tượ ng ImageList rồi ch ọn mục Properties để hi ển th ị cửa sổ "Properties Page" của đố i tượ ng ImageList. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 114
  23. Qui trình t ạo Toolbar của form (tt) 2.2 Ch ọn tab General, ch ọn checkbox Custom rồi nh ập kích th ướ c của button Toolbar vào 2 field Height và Width. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 115
  24. Qui trình t ạo Toolbar của form (tt) 2.3 Ch ọn tab Images rồi thêm từng ảnh button vào ImageList bằng trình tự: ấn Insert Picture, duy ệt và ch ọn file image, nh ập giá tr ị cho field Key. Để truy xu ất ảnh button, ta dùng ho ặc thu ộc tính Index ho ặc thu ộc tính Key (tên gợi nh ớ). Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 116
  25. Qui trình t ạo Toolbar của form (tt) 2.4 Sau 6 lần insert icon vào ImageList, ta có kết qu ả nh ư hình bên. Bạn có th ể ch ọn lại từng icon để ki ểm tra/hi ệu ch ỉnh các thu ộc tính của nó. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 117
  26. Qui trình t ạo Toolbar của form (tt) 3. Tạo 1 đố i tượ ng Toolbar, vị trí và kích th ướ c của đố i tượ ng này không quan tr ọng vì nó sẽ luôn đượ c xếp ngay dướ i menubar. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 118
  27. Qui trình t ạo Toolbar của form (tt) 3.1 Mở cửa sổ thu ộc tính của Toolbar, ch ọn tab General, ch ọn ImageList kết hợp với Toolbar trong listbox ImageList. Nếu mu ốn hình ảnh của từng icon khác nhau cho từng tr ạng thái (ch ưa ch ọn, đượ c ch ọn, bị cấm), bạn ph ải tạo 2 ImageList khác: HotImageList (tr ạng thái đượ c ch ọn) và DisableImageList (tr ạng thái bị cấm). Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 119
  28. Qui trình t ạo Toolbar của form (tt) 3.2 Ch ọn tab Buttons, thêm từng button vào Toolbar và thi ết lập thu ộc tính của nó bằng trình tự các ho ạt độ ng sau:  Ấn Insert Button để thêm button mới,  Nh ập giá tr ị thu ộc tính "Key",  Nh ập ch ỉ số "Images" trong ImageList đượ c dùng cho button,  Nh ập tr ị cho thu ộc tính "ToolTipText" Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 120
  29. Qui trình t ạo Toolbar của form (tt) 3.3 Sau khi thêm 6 button vào Toolbar thì Toolbar có dạng sau: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 121
  30. 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à Toolbar. 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.  và 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. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 122
  31. Giao di ện SDI (Single Document Interface) Menubar Toolbar Working region (t ại t ừng th ời điểm ch ỉ có 1 để x ử lý 1 document của ứng dụng) Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 123
  32. Giao di ện MDI (Multiple Document Interface) Menubar Toolbar Working region (t ại t ừng th ời điểm có th ể mở n c ửa s ổ để x ử lý n document khác nhau) Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 124
  33. Ghi chú về qui trình t ạo giao di ện (tt)  Để t ạo giao di ện tr ực quan c ủa các ứng d ụng SDI và MDI đượ c dễ dàng, VB cung c ấp cho ng ườ i dùng 1 d ạng Project tên là "VB Application Wizard".  Ch ọn d ạng Project này khi t ạo Project, VB s ẽ h ướ ng d ẫn ng ườ i dùng t ạo ra các ph ần t ử giao di ện r ất d ễ dàng, trong đó 2 đố i tượ ng c ơ b ản là menubar và Toolbar đượ c VB t ạo t ự độ ng, ng ườ i lập trình ch ỉ c ần hi ệu ch ỉnh l ại theo yêu c ầu riêng. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 125
  34. 4.6 T ạo th ủ t ục x ử lý s ự ki ện cho các đố i t ượng giao di ện  Sau khi đã thi ết k ế tr ực quan giao di ện c ủa ứng d ụng theo yêu c ầu, b ạn s ẽ t ạo các th ủ t ục x ử lý s ự ki ện c ần thi ết cho t ừng đố i t ượ ng giao di ện.  Để t ạo th ủ t ục x ử lý cho 1 option trong menu, b ạn ch ọn menu t ươ ng ứng, d ời chu ột v ề option c ần t ạo th ủ t ục r ồi ch ọn nó, template c ủa th ủ t ục s ẽ đượ c t ạo ra.  Các ch ươ ng t ới s ẽ gi ới thi ệu cú pháp VB để b ạn có th ể vi ết code cho th ủ t ục. Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 126
  35. Tạo th ủ t ục x ử lý s ự ki ện cho các đố i t ượng giao di ện (tt)  Để t ạo th ủ t ục x ử lý cho 1 button trong Toolbar, b ạn ấn kép chu ột vào button đó, template c ủa th ủ t ục s ẽ đượ c t ạo ra (l ưu ý ch ỉ có 1 th ủ t ục x ử lý cho t ất c ả các button trong 1 Toolbar, th ủ t ục này s ẽ d ựa vào thu ộc tính Button.Key để bi ết button nào đã đượ c ch ọn).  Để t ạo th ủ t ục x ử lý cho 1 command button, b ạn ấn kép chu ột vào command button đó, template c ủa th ụ t ục s ẽ đượ c t ạo ra: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 127
  36. Tạo th ủ t ục x ử lý s ự ki ện cho các đố i t ượng giao di ện (tt)  Cách t ổng quát để t ạo th ủ t ục x ử lý s ự ki ện là mở c ửa s ổ code (View.Code), ch ọn tên đố i t ượ ng trong danh sách r ồi ch ọn s ự ki ện c ần x ử lý, th ủ t ục x ử lý tươ ng ứng sẽ đượ c t ạo ra: Môn: Tin h ọc Khoa Công ngh ệ Thông tin Ch ươ ng 4: Qui trình thi ết k ế tr ực quan giao di ện c ủa ứng d ụng Tr ườ ng ĐH Bách Khoa Tp.HCM Slide 128