Tài liệu Chương 2: Thiết kế giao diện pdf

Chương 2: THIẾT KẾ GIAO DIỆN Biểu mẫu (Form) • Là cửa sổ hộp thoại tạo nên phần giao diện ứng dụng • Trong đề án có nhiều Form, Form lưu thành file độc lập có mở rộng (*.Frm) Các thuộc tính thơng dụng Thuộc tính Giải thích Name Tên đặt cho điều khiển BackColor Màu điều khiển Caption Nhãn lên điều khiển tiêu đề Enabled Có làm việc với điều khiển hay không TabIndex Thứ tự điều khiển ấn phím Tab Visible Có nhìn thấy điều khiển hay khơng Font Font chữ, kích cỡ nhãn điều khiển ToolTipText Nội dung lên di chuột qua điều khiển Các thuộc tính thơng dụng (cont) Alignment BorderStyle Canh hàng Dạng đường viền xung quanh điều khiển Left, Top, Vị trí cạnh trái, cạnh trên, chiều cao, Height, Width chiều rộng điều khiển SetFocus Cho biết điều khiển chọn ứng dụng thi hành Nhấn phím Tab thấy điểm đánh dấu di chuyển từ điều khiển đến điều khiển khác Text Dùng cho điều khiển để nhập liệu từ người sử dụng Các điều khiển thường dùng • Thiết kế Form thực chất tạo Form điều khiển Các điều khiển tạo nhờ công cụ hộp công cụ (Toolbox) - B1: Chọn điều khiển hộp Toolbox - B2:Chọn vị trí để đặt điều khiển Form - B3: Ấn kéo để tạo dáng điều khiển 2.1 Nút lệnh (CommandButton) • Mục đích: Cho phép người sử dụng thực hành động • Đặt phím nóng (hot key) cách thêm & vào trước chữ cần tạo phím nóng &Close hiển thị Close tương ứng với phím nóng Alt + C • Sự kiện: Click • Ví dụ: Khi click vào nút Close khỏi chương trình Private Sub cmdClose_Click() Unload Me End Sub 2.2 Hộp văn (TextBox) • Mục đích: Nhận liệu từ người sử dụng hiển thị liệu lên hình • Một số thuộc tính khác: Thuộc tính Giải thích Locked Cho phép người sử dụng nhập liệu hay khơng MaxLength Số kí tự tối đa nhập vào ( không giới hạn) MultiLine Khi văn dài TextBox tự động xuống dịng PasswordChar Dùng kí hiệu để biểu tượng cho tất kí tự ScrollBar Có dùng cuộn hộp văn hay không? Text Nội dung văn chứa TextBox 2.3.Nhãn (Label) • Mục đích: Hiển thị chuỗi kí tự biểu mẫu, thường kèm với TextBox TextBox khơng có thuộc tính Caption • Thơng thường chuỗi kí tự thuộc Nhãn khơng đổi • Thường thao tác với vài thuộc tính: Font, BorderStyle 2.4 Ơ tuỳ chọn (CheckBox) • Mục đích: Cho phép user chọn hay khơng chọn khả Trong nhóm có nhiều CheckBox chọn 1, nhiều tất • Thuộc tính:  Alignment: Canh lề cho tiêu đề CheckBox  Value: –Unchecked : Không chọn – Checked : Chọn – Grayed : Cấm chọn 2.5 Nút tuỳ chọn (OptionButton) • Mục đích: Trong nhóm có nhiều nút tuỳ chọn, user chọn khả Khi nút chọn có giá trị True, nút cịn lại có giá trị False • Thường dùng mảng điều khiển 2.6 Khung (Frame) • Mục đích: dùng để gộp nhóm điều khiển khác • Điều khiển đơn giản, thường khơng sử dụng đến kiện khung, thay đổi số thuộc tính như: Name, Caption, Font 10 1- Simple Combo: Luôn hiển thị danh sách cho phép người sử dụng gõ vào hộp văn Để nhìn thấy tất danh sách phải kéo ComboBox đủ rông 15 ComboBox o – Dropdown ListBox: Người sử dụng lựa chọn từ danh sách, gõ vào hộp văn danh sách cuộn đến phần tử cần yêu cầu - Phương thức: Tương tự ListBox - Kích cỡ ComboBox khơng thay đổi 16 Quy ước đặt tên điều khiển Đối tượng Qui ước Ví dụ Form frm frmHello CheckBox chk chkDraw ComboBox Cbo cboSelect CommandButton cmd cmdDisplay Frame Fra fraShow Label Lbl lblName ListBox Lst lstNew Menu Mnu mnuEdit OptionButton Opt optCheck TextBox Txt txtAddress 17 Căn chỉnh điều khiển • Căn lề: Khi làm việc với nhiều điều khiển, ta lề nhanh: Format -> Align -> Lefts, Centers, Rights, Tops, Middles, Bottoms • Điều chỉnh kích cỡ: Format -> Make Same Size -> Width, Height, Both 18 Bước 1: Tạo dự án mới, ta sử dụng OLE Hộp thoại Insert Object để ta lựa chon, chọn kích hoạt Create New, Object Type Bitmap Image, đánh dấu chọn Display as Icon 19 Bước 2: Nhấn OK, Vb gọi trình ứng dụng Paint ta vẽ hình lên cửa sổ Paint Sau chọn File Exit &Return cửa sổ Form, ta Bước 3:Chạy ứng dụng, nhấp đúp vào biểu tượng Bitmap Image 20 THAO TÁC VỚI DRIVELISTBOX, DIRLISTBOX, FILELISTBOX • • • • • Một Form Một điều khiển DriveListBox Một điều khiển DirListBox Một điều khiển FileListBox Một điều khiển ImageBox 21 Bước 1: Tạo giao diện người dùng Ta cần nhấp vẽ vị trí điều khiển Form 1: DriveListBox Name: drvSource 2: DirListBox Name: dirSource 3: FileListBox Name:filSource Pattern:*.bmp;*.wmf; *.ico;*.jpg 4: ImageBox Name:imgSource Stretch:True 22 Bước 2: Viết mã trao đổi thông tin đối tượng: Trong cửa số thiết kế Form, nhấp đúp vào DriveListBox, cửa số Code xử lý kiện sau: Private Sub drvsource_Change() DirSource.Path = drvsource.Drive End Sub Tương tự cho DirListBox & FileListBox Private Sub DirSource_Change() FilSource.Path = DirSource.Path End Sub Private Sub FilSource_Click() Imgsource.Picture = LoadPicture(FilSource.Path & "\" & FilSource.FileName) End Sub 23 Bước 3: Lưu dự án lại vào thư mục, chạy chương trình nhấn phím F5 24 BÀI TẬP 2: LISTBOX, TEXTBOX, COMMAND Bước 1: Tạo giao diện người dùng Ta cần nhấp vẽ vị trí điều khiển Form 25 1,2: Frame: Caption : Thông tin, Nhập thông tin, Font Vntimeh 3: Label: Caption: Mã Sinh viên, Họ tên, Nơi sinh 46: ListBox : Name: lstma, lstHt, lstNs List: CBK01 CBK02 : TextBox: Name: txtma, txtht, txtns Text: Để trống 8: Command Button: Name: cmdNhap, Cmdnhaplai, cmdXoa, CmdClose Caption: &Nhập, N&hập lại, &Xóa, &Close 26 Bước 2: Viết mã trao đổi thơng tin giưa đối tượng: • Trong cửa số thiết kế Form, nhấp đúp vào Nhập, cửa số Code xử lý kiện sau: Private Sub cmdnhap_Click() ‘Khi nhập liệu vào ô Nhập thông tin nhấn vào nút Nhập chuyển DL lên Listbox Thông tin Lstma.AddItem txtma.Text lstHt.AddItem txtht.Text lstns.AddItem txtns.Text txtma.Text = "" txtht.Text = "" txtns.Text = "" End Sub 27 Private Sub cmdnhaplai_Click() txtma.Text = "" txtht.Text = "" txtns.Text = "" txtma.SetFocus ‘chuyển DL nhập lại lên Txtma mà dùng chuột End Sub Private Sub cmdthoat_Click() End End Sub Private Sub cmdxoa_Click() lstma.RemoveItem lstma.ListIndex lstHt.RemoveItem lstHt.ListIndex lstns.RemoveItem lstns.ListIndex End Sub 28 Bước 3: Lưu dự án lại vào thư mục, chạy chương trình nhấn phím F5 29 ... án lại vào thư mục, chạy chương trình nhấn phím F5 24 BÀI TẬP 2: LISTBOX, TEXTBOX, COMMAND Bước 1: Tạo giao diện người dùng Ta cần nhấp vẽ vị trí điều khiển Form 25 1 ,2: Frame: Caption : Thông... nhập liệu từ người sử dụng Các điều khiển thường dùng • Thiết kế Form thực chất tạo Form điều khiển Các điều khiển tạo nhờ công cụ hộp công cụ (Toolbox) - B1: Chọn điều khiển hộp Toolbox - B2:Chọn... &Close 26 Bước 2: Viết mã trao đổi thông tin giưa đối tượng: • Trong cửa số thiết kế Form, nhấp đúp vào Nhập, cửa số Code xử lý kiện sau: Private Sub cmdnhap_Click() ‘Khi nhập liệu vào ô Nhập