Bài giảng môn Tin học - Chương 4: Quy trình thiết kế trực quan giao điện ứng dụng trình bày các nội dung: Dự án và ứng dụng; tạo/xóa đối tượng giao diện, hiệu chỉnh giá trị thuộc tính của đối tượng giao diện; tạo menubar; tạo toolbar; tạo và viết thủ tục xử lý sự kiện. Mời các bạn cùng tham khảo nội dung chi tiết.
MƠN TIN HỌC Chương 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 đối tượng giao diện 4.4 Tạo menubar 4.5 Tạo Toolbar 4.6 Tạo viết thủ tục xử lý kiện Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 93 4.1 Dự Án Và Ứng Dụng ứng dụng VB 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", class đặc tả loại đối tượng cần dùng cho giải thuật chương trình Các đối tượng khác thư viện liên kết động, database, Để quản lý ứng dụng dễ dàng ta sử dụng phương tiện "Dự án" (Project) Dự án thứ bậc phần tử cấu thành ứng dụng Viết ứng dụng qui trình tạo dự án, thêm/bớt, hiệu chỉnh phần tử dự án Thao tác để thực tác vụ giống với thao tác mà ta biết hệ thống file thứ bậc máy tính Khoa Cơng nghệ Thơng tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 94 47 Khởi động VB 6.0 VB ứng dụng bao ứng dụng khác Để khởi động ứng dụng, ta có nhiều cách khau : chọn menu Start.Programs.Microsoft Visual Basic 6.0.Microsoft Visual Basic 6.0 Ấn kép chuột vào icon shortcut VB hình desktop (ta phải tạo trước icon shortcut này) chọn menu Start.Run, nhập hàng lệnh chạy ứng dụng, thí dụ "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 VB khởi động, ta thường thấy cửa sổ sau: Khoa Cơng nghệ Thơng tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 95 Cửa sổ khởi động VB Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 96 48 Tạo dự án Cửa sổ New Project VB có ba thẻ (Tab) : New : tạo dự án (tab chọn default) Existing : Mở dự án có sẵn máy (dự án cũ đó) Recent : Mở dự án n dự án gần Với tab New chọn, bạn tạo dự án theo loại đó, ứng dụng thông thường ta dùng loại dự án "Standard EXE" Ấn kép vào icon "Standard EXE" để tạo dự án tương ứng form tạo tự động để bạn thiết kế trực quan form giao diện Qui trình thiết kế giao diện thiết kế form theo yêu cầu, muốn tạo form khác (hay đối tượng vào dự án), bạn ấn kép chuột vào cửa sổ Project, dời chuột đến menu "Add", chọn mục "Form" danh sách Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 97 Thí dụ form thiết kế : MiniCalculator Control buttons Window ≡ Form, Dialogbox Title bar Menu Toolbar Textbox Command Button Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 98 49 4.2 Tạo đối tượng giao diện form Để hiển thị làm việc trực quan với form, ấn kép chuột vào mục tên form cửa sổ Project Để tạo đối tượng giao diện form, dùng chuột chọn icon tương ứng với đối tượng cửa sổ Toolbox vẽ đối tượng vị trí kích thước mong muốn form Bạn tạo đối tượng giao diện dùng chế sinh sản vơ tính : chọn đối tượng có, ấn button Copy Toolbar ấn button Past Toolbar, đối tượng sinh giống y đối tượng có sẵn (nên đặt lại tên khác cách chọn button "No" hộp thoại yêu cầu sau ấn icon Past) Đây nhiều cách để tạo nhiều đối tượng có kích thước giống hệt Thí dụ slide sau miêu tả trạng thái form sau ta vẽ textbox hiển thị số button bên trái máy tính Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 99 4.3 Thiết lập giá trị cho thuộc tính Để dễ cân chỉnh vị trí kích thước đối tượng, ta nên thiết lập thuộc tính sau : "Name", "Caption" Thuộc tính "Name" dùng để truy xuất đối tượng lúc lập trình, cịn thuộc tính "Caption" hiển thị phần tử (không phải đối tượng có Caption) Khoa Cơng nghệ Thơng tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 100 50 Thiết lập giá trị cho thuộc tính (tt) Để xem hiệu chỉnh giá trị thuộc tính đối tượng giao diện, bạn ấn chuột chọn đối tượng, cửa sổ Properties bên phải hình hiển thị thuộc tính đối tượng chọn Bạn duyệt thuộc tính từ xuống nhập vào giá trị cho thuộc tính mong muốn Khoa Cơng nghệ Thơng tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 101 Cân chỉnh kích thước đối tượng Nếu vẽ tay đối tượng khó lịng đảm bảo kích thước chúng nhau, bạn nên dùng chế sinh sản vơ tính (Copy-Paste) Tuy nhiên lở tạo tay đối tượng để làm kích thước nhiều đối tượng giống y nhau, bạn chọn đối tượng chọn menu Format.Make Same Size.Both (bằng kích thước đối tượng chọn cuối cùng) Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 102 51 Đồng chỉnh vị trí đối tượng Tương tự, vẽ tay đối tượng khó lịng đảm bảo khoảng cách chúng Để khoảng cách dọc đối tượng nhau, bạn chọn đối tượng chọn menu Format.Vertical Spacing.Make Equal (cố định vị trí đối tượng xa theo chiều dọc chỉnh dọc đối tượng cịn lại) Khoa Cơng nghệ Thơng tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 103 Kết tạm thời form MiniCalculator Với qui trình tạo đối tượng, thiết lập thuộc tính cần thiết chỉnh dạng đối tượng giao diện trình bày, bạn tiếp tục tạo đối tượng lại form MiniCalculator Kết sau : Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình tủhiết kế trực quan giao diện ứng dụng Slide 104 52 Danh sách thuộc tính đối tượng Danh sách giá trị thuộc tính thiết lập cho đối tượng (sẽ tham khảo code chương trình 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình tủhiết kế trực quan giao diện ứng dụng Slide 105 4.4 Thiết kế menu bar cho form giao diện Giả sử form MiniCalculator cần có hệ thống menu sau : Để tạo menu bar cho form đó, ta hiển thị cửa sổ chứa form (ấn kép mục tên form cửa sổ Project chứa thứ bậc phần tử) chọn menu Tools.Menu Bar Cửa sổ slide sau lên : Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình tủhiết kế trực quan giao diện ứng dụng Slide 106 53 Dùng Menu Editor để thiết kế menu bar VB tạo sẵn mục trống hàng cuối danh sách Thêm phần tử chọn mục nhập thuộc tính Caption Name Button Next cho phép dời mục chọn xuống hàng Button Insert cho phép chèn mục trống vào trước mục chọn hành Button Delete cho phép xóa mục chọn Các button ↑,↓ cho phép dời mục chọn lên hay xuống vị trí Các button →,← cho phép dời mục chọn vô thêm hay bớt cấp hệ thống phân cấp menu Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 107 Dùng Menu Editor để thiết kế menu bar (tt) Dựa vào đặc tả menu bar slide trước đây, nhập mục sau : Caption = File, Name = mnuFile Caption = Copy, Name = mnuFileCopy, ấn button → để vô thêm cấp Caption = Paste, Name = mnuFilePaste Caption = View, Name = mnuView, ấn button ← để cấp Caption = Standard, Name = mnuViewStand, ấn button → để vô thêm cấp Caption = Scientific, Name = mnuViewScien Caption = -, Name = mnuViewBar Caption = Digital grouping, Name = mnuViewDigital Caption = Help, Name = mnuHelp, ấn button ← để cấp Caption = Help Topics, Name = mnuHelpTopics, ấn button → để vô thêm cấp Caption = -, Name = mnuHelpBar Caption = About MiniCalculator, Name = mnuHelpAbout Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 108 54 Dùng Menu Editor để thiết kế menu bar (tt) Sau đặc tả xong menu, cửa sổ menu editor có dạng sau Lưu ý lúc bạn chưa thấy menu cách trực quan : Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 109 Kết hoạt động thiết kế menubar Sau tạo menu xong, ấn nút OK để đóng tiện ích "Menu Editor", form giao diện chương trình giống hình bên : Khoa Cơng nghệ Thơng tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 110 55 4.5 Thiết kế Toolbar cho form giao diện Để tạo Toolbar cho form project, trước hết ta phải thêm tập điều khiển "Window Common Controls 6.0" vào cửa sổ Toolbox project : ấn phải chuột vào vị trí trống Toolbox, chọn mục Components Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM chọn tab Controls, duyệt chọn mục tương ứng, chọn OK icon thêm vào Toolbox Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 111 Qui trình tạo Toolbar form Toolbar cửa sổ chứa nhiều button (icon), button cho phép thực chức ứng dụng Các button có kích thước nhau, nên kết hợp ảnh bitmap với button, nội dung ảnh gợi ý cho người dùng chức tương ứng (thí dụ ảnh dạng kéo gợi ý chức Cut, ) Công việc cần thực dùng trình soạn thảo đồ họa (Paint, CorelDraw, ) để thiết kế (vẽ) ảnh bitmap gợi ý cho button Toolbar Bạn dùng trình "Screen Capture" cắt icon có sẵn ứng dụng chạy dán vào vùng soạn thảo ảnh trình soạn thảo đồ họa Sau soạn xong ảnh, ta cất ảnh lên file dạng *.bmp Lưu ý ảnh phải có kích thước (thí dụ 16*16, 20*20,32*32, ) Slide kế miêu tả cửa sổ trình soạn thảo đồ họa Paint Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 112 56 Vẽ ảnh cho button trình Paint soạn thảo button vẽ pixel ảnh Để dễ vẽ, bạn nên phóng to ảnh lên khoảng 400% trở lên trước vẽ pixel, chọn màu vẽ thích hợp sau 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 Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 113 Qui trình tạo Toolbar form (tt) Dùng qui trình tạo phần tử giao diện form giới thiệu để tạo đối tượng ImageList, đối tượng chứa ảnh bitmap dùng cho icon Toolbar, vị trí kích thước đối tượng ImageList khơng quan trọng bị ẩn chương trình chạy 2.1 ấn phải chuột vào đối tượng ImageList chọn mục Properties để hiển thị cửa sổ "Properties Page" đối tượng ImageList Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 114 57 Qui trình tạo Toolbar form (tt) 2.2 chọn tab General, chọn checkbox Custom nhập kích thước button Toolbar vào field Height Width Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 115 Qui trình tạo Toolbar form (tt) 2.3 chọn tab Images thêm ảnh button vào ImageList trình tự : ấn Insert Picture, duyệt chọn file image, nhập giá trị cho field Key Để truy xuất ảnh button, ta dùng thuộc tính Index thuộc tính Key (tên gợi nhớ) Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 116 58 Qui trình tạo Toolbar form (tt) 2.4 sau lần insert icon vào ImageList, ta có kết hình bên Bạn chọn lại icon để kiểm tra/hiệu chỉnh thuộc tính Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 117 Qui trình tạo Toolbar form (tt) Tạo đối tượng Toolbar, vị trí kích thước đối tượng khơng quan trọng ln xếp menubar Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 118 59 Qui trình tạo Toolbar form (tt) 3.1 Mở cửa sổ thuộc tính Toolbar, chọn tab General, chọn ImageList kết hợp với Toolbar listbox ImageList Nếu muốn hình ảnh icon khác cho trạng thái (chưa chọn, chọn, bị cấm), bạn phải tạo ImageList khác : HotImageList (trạng thái chọn) DisableImageList (trạng thái bị cấm) Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 119 Qui trình tạo Toolbar form (tt) 3.2 Chọn tab Buttons, thêm button vào Toolbar thiết lập thuộc tính trình tự hoạt động sau : ấn Insert Button để thêm button mới, nhập giá trị thuộc tính "Key", nhập số "Images" ImageList dùng cho button, nhập trị cho thuộc tính "ToolTipText" Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 120 60 Qui trình tạo Toolbar form (tt) 3.3 sau thêm button vào Toolbar Toolbar có dạng sau : Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 121 Ghi qui trình tạo giao diện Thường form giao diện MiniCalculator khơng cần chứa menubar Toolbar Giao diện dạng gọi Dialog based Còn dạng giao diện ứng dụng phổ biến khác : SDI (Single Document Interface) : cửa sổ chương trình gồm menubar, hay nhiều Toolbar cửa sổ làm việc Từng thời điểm, cửa sổ làm việc cho phép hiển thị/hiệu chỉnh document ứng dụng MDI (Multiple Document Interface) : cửa sổ chương trình gồm menubar, hay nhiều Toolbar n cửa sổ làm việc khác nhau, cửa sổ làm việc cho phép hiển thị/hiệu chỉnh document ứng dụng Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 122 61 Giao diện SDI (Single Document Interface) Menubar Toolbar Working region (tại thời điểm có để xử lý document ứng dụng) Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 123 Giao diện MDI (Multiple Document Interface) Menubar Toolbar Working region (tại thời điểm mở n cửa sổ để xử lý n document khác nhau) Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 124 62 Ghi qui trình tạo giao diện (tt) Để tạo giao diện trực quan ứng dụng SDI MDI dễ dàng, VB cung cấp cho người dùng dạng Project tên "VB Application Wizard" Chọn dạng Project tạo Project, VB hướng dẫn người dùng tạo phần tử giao diện dễ dàng, đối tượng menubar Toolbar VB tạo tự động, người lập trình cần hiệu chỉnh lại theo yêu cầu riêng Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 125 4.6 Tạo thủ tục xử lý kiện cho đối tượng giao diện Sau thiết kế trực quan giao diện ứng dụng theo yêu cầu, bạn tạo thủ tục xử lý kiện cần thiết cho đối tượng giao diện Để tạo thủ tục xử lý cho option menu, bạn chọn menu tương ứng, dời chuột option cần tạo thủ tục chọn nó, template thủ tục tạo Các chương tới giới thiệu cú pháp VB để bạn viết code cho thủ tục Khoa Cơng nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 126 63 Tạo thủ tục xử lý kiện cho đối tượng giao diện (tt) Để tạo thủ tục xử lý cho button Toolbar, bạn ấn kép chuột vào button đó, template thủ tục tạo (lưu ý có thủ tục xử lý cho tất button Toolbar, thủ tục dựa vào thuộc tính Button.Key để biết button chọn) Để tạo thủ tục xử lý cho command button, bạn ấn kép chuột vào command button đó, template thụ tục tạo : Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 127 Tạo thủ tục xử lý kiện cho đối tượng giao diện (tt) Cách tổng quát để tạo thủ tục xử lý kiện mở cửa sổ code (View.Code), chọn tên đối tượng danh sách chọn kiện cần xử lý, thủ tục xử lý tương ứng tạo : Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 128 64 ... Bách Khoa Tp.HCM Mơn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 95 Cửa sổ khởi động VB Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: ... Toolbar Textbox Command Button Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình thiết kế trực quan giao diện ứng dụng Slide 98 49 4. 2 Tạo đối tượng giao diện... Text = 0., Name = txtDisplay Khoa Công nghệ Thông tin Trường ĐH Bách Khoa Tp.HCM Môn : Tin học Chương 4: Qui trình tủhiết kế trực quan giao diện ứng dụng Slide 105 4. 4 Thiết kế menu bar cho form