Chương 2: Thiết kế giao diện

Chia sẻ: Tuyet Long | Ngày: | Loại File: PPT | Số trang:29

0
270
lượt xem
126
download

Chương 2: Thiết kế giao diện

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Biểu mẫu: • Là một cửa sổ hoặc hộp thoại tạo nên một phần giao diện của ứng dụng. • Trong một đề án có thể có nhiều Form, mỗi Form được lưu thành 1 file độc lập có đuôi mở rộng (*.Frm).

Chủ đề:
Lưu

Nội dung Text: Chương 2: Thiết kế giao diện

  1. Chương 2: THIẾT KẾ GIAO DIỆN 1. Biểu mẫu (Form) • Là một cửa sổ hoặc hộp thoại tạo nên một phần giao diện của ứng dụng. • Trong một đề án có thể có nhiều Form, mỗi Form được lưu thành 1 file độc lập có đuôi mở rộng (*.Frm).   1
  2. 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 nền của điều khiển Caption Nhãn hiện lên trên điều khiển như tiêu đề Enabled Có được làm việc với điều khiển hay không TabIndex Thứ tự của điều khiển khi ấn phím Tab Visible Có nhìn thấy điều khiển hay không Font Font chữ, kích cỡ của nhãn hiện trên điều khiển ToolTipText Nội dung sẽ hiện lên khi di chuột qua điều khiển   2
  3. Các thuộc tính thông dụng (cont) Alignment Canh hàng BorderStyle 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 của điều khiển SetFocus Cho biết điều khiển nào đang được chọn khi ứng dụng thi hành. Nhấn phím Tab sẽ thấy điểm đánh dấu di chuyển từ điều khiển này đến điều khiển khác. Text Dùng cho những điều khiển để   nhập dữ liệu từ người sử dụng. 3
  4. 2. Các điều khiển thường dùng • Thiết kế Form thực chất là tạo trên Form các điều khiển. Các điều khiển được tạo nhờ các công cụ trong hộp công cụ (Toolbox) - B1: Chọn điều khiển trong hộp Toolbox - B2:Chọn vị trí để đặt điều khiển trên Form - B3: Ấn và kéo để tạo dáng điều khiển.   4
  5. 2.1. Nút lệnh (CommandButton) • Mục đích: Cho phép người sử dụng thực hiện một hành động • Đặt phím nóng (hot key) bằng cách thêm & vào trước chữ cần tạo phím nóng. &Close sẽ được 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 sẽ thoát khỏi chương trình Private Sub cmdClose_Click()   Unload Me 5 End Sub
  6. 2.2. Hộp văn bản (TextBox) • Mục đích: Nhận dữ liệu từ người sử dụng hoặc hiển thị dữ liệu lên mà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 dữ liệu hay không MaxLength Số kí tự tối đa được nhập vào ( 0 là không giới hạn) MultiLine Khi văn bản quá dài TextBox sẽ tự động xuống dòng PasswordChar Dùng kí hiệu để biểu tượng cho tất cả các kí tự ScrollBar Có dùng thanh cuộn trong hộp văn bản hay không? Text   Nội dung văn bản chứa trong TextBox 6
  7. 2.3.Nhãn (Label) • Mục đích: Hiển thị chuỗi kí tự trên biểu mẫu, thường đi kèm với TextBox vì TextBox không có thuộc tính Caption. • Thông thường chuỗi kí tự thuộc Nhãn là không đổi. • Thường chỉ thao tác với một vài thuộc tính: Font, BorderStyle...   7
  8. 2.4. Ô tuỳ chọn (CheckBox) • Mục đích: Cho phép user chọn hay không chọn một khả năng nào đó. Trong một nhóm có nhiều CheckBox có thể chọn 1, nhiều hoặc tất cả. • Thuộc tính:  Alignment: Canh lề cho tiêu đề của CheckBox  Value: 0 –Unchecked : Không chọn 1 – Checked : Chọn 2 – Grayed : Cấm chọn   8
  9. 2.5. Nút tuỳ chọn (OptionButton) • Mục đích: Trong một nhóm có nhiều nút tuỳ chọn, user chỉ được chọn 1 khả năng. Khi đó nút được chọn có giá trị True, các nút còn lại sẽ có giá trị False. • Thường dùng mảng điều khiển   9
  10. 2.6. Khung (Frame) • Mục đích: dùng để gộp nhóm các điều khiển khác. • Điều khiển đơn giản, thường không sử dụng đến các sự kiện của khung, chỉ thay đổi một số thuộc tính như: Name, Caption, Font...   10
  11. 2.7.Hộp danh sách (ListBox) • Mục đích: Liệt kê các phần tử, người sử dụng chỉ được nhìn thấy và chọn 1 hoặc nhiều phần tử trong danh sách. • Một số thuộc tính: MultiSelect: 0 – None: Cho phép người sử dụng chỉ được chọn một phần tử 1 – Simple: Đa lựa chọn đơn giản. Từng phần tử khi nhấn chuột sẽ được chọn, nhấn chuột một lần nữa trên một phần tử sẽ là bỏ chọn. 2 – Extended: Đa lựa chọn mở rộng. Hỗ trợ cách lựa chọn có ấn phím Shift.   11
  12. Hộp danh sách (ListBox) Sorted: o True: Các phần tử trong danh sách được sắp xếp theo thứ tự ABC nhưng làm chậm quá trình thêm phần tử vào danh sách. o False: Các phần tử được sắp xếp theo thứ tự được nhập danh sách. Columns: Hiển thị ListBox theo nhiều cột.   12
  13.  Truy cập vào các phần tử trong ListBox: o ListIndex: số thứ tự trong danh sách của phần tử được chọn. Nếu không có phần tử nào được chọn thì ListIndex = -1. Các phần từ trong ListBox được đánh số thứ tự từ 0. o ListCount: số lượng các phần tử trong danh sách. Giá trị của ListCount luôn lớn hơn 1 so với giá trị của ListIndex. o List: Lấy nội dung của phần tử được chỉ định hoặc thêm vào danh sách tại vị trí được chỉ định ( Object.List(index) = [string]) Thêm các phần tử vào ListBox trong lúc design. o Text: Lấy nội dung của phần tử được chọn.   13
  14. 2.8. Danh sách thả xuống (ComboBox) •Mục đích: Cho phép user lựa chọn 1 item bằng cách nhập vào ComboBox hoặc lựa chọn từ danh sách. ComboBox = ListBox + TextBox •Một số thuộc tính: Có các thuộc tính tương tự như ListBox, ngoài ra: Style: o 0-Dropdown Combo: Cho phép người sử dụng gõ vào dữ liệu. Khi nhấn vào nút   mũi tên ↓ sẽ xổ danh sách để chọn lựa. 14
  15. 1- Simple Combo: Luôn hiển thị cả danh sách và cho phép người sử dụng gõ vào hộp văn bản. Để nhìn thấy tất cả danh sách phải kéo ComboBox đủ rông.   15
  16. ComboBox o 2 – Dropdown ListBox: Người sử dụng chỉ có thể lựa chọn từ danh sách, gõ vào hộp văn bản thì danh sách sẽ cuộn đến đúng phần tử cần yêu cầu. - Phương thức: Tương tự như ListBox - Kích cỡ của ComboBox không thay đổi được.   16
  17. Quy ước đặt tên các điều khiển cơ bả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
  18. Căn chỉnh các điều khiển • Căn lề: Khi làm việc với nhiều điều khiển, ta có thể căn 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
  19. Bước 1: Tạo dự án mới, trong đó ta có thể sử dụng OLE Hộp thoại Insert Object hiện ra để ta lựa chon, ở đây chọn kích hoạt Create New, Object Type là Bitmap Image, đánh dấu chọn Display as Icon   19
  20. Bước 2: Nhấn OK, Vb sẽ gọi trình ứng dụng Paint và ta vẽ hình lên cửa sổ Paint. Sau đó chọn File Exit &Return trong cửa sổ Form, ta được Bước 3:Chạy ứng dụng, nhấp đúp vào biểu tượng Bitmap Image   20
Đồng bộ tài khoản