Đang tải... (xem toàn văn)
Chương 4 trình bày về Qui trình thiết kế trực quan giao diện của ứng dụng. Nội dung cụ thể của chương này gồm có: 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Ơ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 ứ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 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 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 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 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 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, 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 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 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 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 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 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 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 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 là: 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 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 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 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 ra: 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 ra: 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 ... 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... 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... 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 4. 5 Thiết kế Toolbar