bài 2 thiết kê form và xử lý sự kiện

BÀI 2:
THI Ế T KẾ FORM VÀ XỬ LÝ SỰ KI Ệ N
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Máy tính được chia thành hai phần là phầ n cứ ng và
phầ n mề m
Máy tính được chia làm 6 khố i chứ c năng chính
Ngôn ngữ lậ p trình được chia làm 3 nhóm: ngôn ngữ
máy, ngôn ngữassembly và ngôn ngữbậc cao. Trong đó
Visual Basic là ngôn ngữbậc cao
Visual Basic được phát triển từBASI C, là ngôn ngữ
tạo ra chương trình một cách đơn giản, nhanh chóng, dễ
dàng. BASIC được tạo ra với mục đích hướng dẫn những
người mới học vềkỹthuật lập trình cơ bản
Hệ thố ng bài cũ
2
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Hiểu vềGUI và thiết kếGUI
Làm quen với trình soạn thảo mã
Hiểu vềxửlý sựkiện
Biết cách sửdụng IDE đểhạn chếlỗi biên dịch
Mụ c tiêu bài họ c
3
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
GUI là viết tắt của Graphical User Interface có nghĩa là
Giao diện người dùng đồ họa
GUI được thiế t kế bằng việc thêm vào Form những
điều khiển phù hợp với yêu cầu của mỗi bài toán
Thiế t kế GUI và điề u khiể n GUI
4
TextBox để
nhập dữ liệu

Label để
hiển thị
kết quả
Button
để tính
toán
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Điể u khiể n (Control) là các đối tượng nằm trong Form
Mỗi điều khiển có một tập các thuộ c tính (Property),
phư ơ ng thứ c (Method), và các sự kiệ n (Event) cho
những mục đích riêng
Visual Basic cung cấp rất nhiều điều khiển
Điề u khiể n GUI
5
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Form là cửa sổ chính của ứng dụng giao diện người
dùng đồ họa.
Thuộc tính quan trọng
BackColor - Màu nền của Form.
Font - Tên font, kiểu và kích thước của văn bản hiển thị
trên Form. Theo mặc định, các điều khiển của Form sử
dụng font được thiết lập cho Form.
Name - Tên được sử dụng để xác định Form. Tên form
nên gắn thêm tiền tố Form, ví dụ: mainForm
Size - Chiều rộng và chiều cao của Form (bằng pixel).
Text – Chuỗi được hiển thị trên thanh tiêu đề của Form.
Form
6
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Form

7
Cửa sổ
Properties
của Form
Tên file lưu
Form
Thanh
tiêu đề
Form
Form
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Sử dụng kiểu viết hoa tiêu đề sách cho thanh tiêu đề
Kiểu viết hoa tiêu đề sách là kiểu viết hoa chữ cái đầu của mối từ
quan trọng trong văn bản và không kết thúc bằng dấu chấm câu
Form
8
Thiết lập kiểu font
và kích thước font
Thiết lập tên tiêu đề thông
qua thuộc tính Text
Tên Form
nên có tiền
tố Form
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Một số lưu ý:
Thêm Tiề n tố Form vào sau tên form
Thay đổi tiêu đề Form để người dùng có thể hiểu được
chức năng của Form. Nên sử dụng kiể u viế t hoa tiêu đề
sách cho tên Form.
Thiết lập kiểu font và kích thước trước khi thêm các điều

khiển vào Form. Thiết lập này sẽ áp dụng cho tấ t cả các
điều khiển trên Form
Form
9
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Ví dụ về đặ t tên theo tiề n tố
Có thểxem tại: />us/library/aa263493%28v=vs.60%29.aspx
10
i󰗂u khi󰗄n Ti󰗂n t󰗒 Ví d󰗦
Check box chk chkReadOnly
Combobox cbo cboEnglish
button btn btnExit
Form frm frmEntry
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Label dùng đểhiển thịtiêu đề hay văn bản mang tính
mô tảmà người dùng không thể thay đổi.
Label dùng để định danh cho các điều khiển khác trên
Form được gọi là Label mô tả
Label dùng để hiển thị kết quả đầu ra được gọi là Label
đầ u ra
Label
11
Label
đầu ra
Label
mô tả
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Thêm Label vào Form
12
Thêm Label

vào Form
Biểu tượng
Label trên
ToolBox
Có thể thêm Label vào Form bằng ba cách sau
1. Nhấn đúp vào biểu tượng Label trên ToolBox
2. Nhấn vào biểu tượng Label trên ToolBox, sau đó nhấn vào Form
3. Nhấn giữ và kéo biểu tượng Label trên ToolBox vào Form
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Thuộc tính quan trọng
AutoSize - Cho phép tự động thay đổi kích thước của Label
để vừa với nội dung.
BoderStyle - Xác định hình dáng đường viền của Label.
Font - Tên font, kiểu và kích thước của văn bản được hiển thị
trên Label.
Location – Vị trí của Label trên Form tương ứng với góc trên
bên trái của Form.
Name - Tên sử dụng để xác định Label. Tên nên có tiền tố
Label.
Size - Chỉ ra chiều rộng và chiều cao của Label (bằng pixel).
Text - Văn bản được hiển thị trên Label.
TextAlign - Chỉ ra cách văn bản được căn chỉnh trong phạm vi
Label.
Label
13
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Label
14
Căn chỉnh nội
dung hiển thị

trên Label
Xác định
hình dáng
đường
viền cho
Label
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Một số lưu ý
Thêm tiề n tố Label vào sau tên của điều khiển Label
Với Label mô tả nên sử dụng kiể u viế t hoa đầ u câu và
kết thúc bằng dấu hai chấm
Thiết lập hình dáng Label đầu ra khác với Label mô tả
bằng cách đặt giá trị thuộc tính BorderStyle của Label
đầu ra là Fixed3D
Ban đầu, giá trị hiển thị trên Label đầu ra cần được xóa
hoặc cung cấp giá trị mặ c đị nh
Label
15
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
TextBox cho phép người dùng nhậ p dữ liệu từ bàn phím
và có thểhiể n thị dữ liệu cho người dùng
Thuộc tính quan trọng
Location - Vị trí của TextBox trên Form tương ứng với góc
trên bên trái của của Form.
Name - Tên sử dụng để xác định TextBox. Tên nên có tiền tố
TextBox.
Size - Chiều rộng và chiều cao của TextBox (bằng pixel).
Text - Văn bản được hiển thị trong TextBox.
TextAlign - Xác định cách văn bản được căn chỉnh trong
phạm vi TextBox.

Width - Xác định chiều rộng (bằng pixel) của TextBox.
TextBox
16
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
TextBox
17
Tên nên có
tiền tố TextBox
Thiết lập vị trí
cho TextBox
Căn chỉnh nội
dung hiển thị
trên TextBox
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Một số lưu ý
Thêm tiề n tố TextBox vào sau tên của điều khiển TextBox
Đặt mỗi Label mô tả ởtrên hoặc bên trái của TextBox
mà Label đó định danh
Điều khiển để TextBox đủ rộ ng cho thông tin đầu vào mà
nó nhận
Label mô tả và điều khiển mà nó định danh phải được căn
trái nếu chúng được xếp hàng dọ c
Văn bản trong Label mô tả và văn bản trong điều khiển
Label mà nó định danh phải được căn dư ớ i nếu chúng
được xếp ngang hàng
TextBox
18
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
TextBox
19

Vn b󰖤n trên i󰗂u khi󰗄n và trên
Label mô t󰖤 i󰗂u khi󰗄n 󰖸t
th󰖴ng hàng
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Thêm namespace System.IO
Khai báo biến StreamWriter
Khởi tạo giá trị cho đối tượng StreamWriter
Nếu tham số thứ hai là False, nội dung có sẵn trong file
(nếu file tồn tại) sẽ được xóa hết
TextBox và sơ lư ợ c về ghi file
20
Imports System.IO
Dim output As StreamWriter
output = New StreamWriter (󰜝calendar.txt󰜞, True)
Tên file mà d󰗰 li󰗈u
s󰖾 󰗤c ghi ra
Ch󰗊 󰗌nh mu󰗒n thêm
thông tin vào cu󰗒i file
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Ghi dữ liệu ra file
Phương thức Write
Ghi giá trị đối số của nó ra file
Phương thức WriteLine
Ghi giá trị đối số ra file, kèm theo là một ký tự xuống dòng
Đóng StreamWriter
TextBox và sơ lư ợ c về ghi file
21
output.Write(TextBox1.Text)
output.WriteLine(TextBox1.Text)
output.Close()

Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Button sẽ ra lệnh cho ứng dụng thực hiện một hành
động khi được nhấn
Thuộc tính quan trọng
Location - Vị trí của Button trên Form so với góc trên cùng
bên trái.
Name - Tên được sử dụng để xác định Button. Tên nên có
tiền tố Button.
Size - Chiều rộng và chiều cao (bằng pixel) của Button.
Text - Văn bản được hiển thị trên Button.
Button
22
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Một số lưu ý
Các Button thường đặt từtrên xuố ng dưới, bắt đầu từ góc
trên bên phải của Form; hoặc được sắp xếp trên cùng mộ t
dòng bắt đầu từ góc dưới bên phải của Form
Thêm tiề n tố Button vào sau tên điều khiển Button
Khi bạn kéo điều khiển IDE sẽ hiển thị các dòng màu xanh
nước biển và màu tím gọi là đư ờ ng gióng giúp các điều khiển
và văn bản trên điều khiển được gióng thẳng với nhau
Các Button được gán nhãn bằng cách sử dụng thuộc tính Text
của chúng. Các nhãn này sử dụng kiể u viế t hoa tiêu đề và
càng ngắn càng tốt, nhưng vẫn rõ nghĩa để người dùng có thể
hiểu được
Button
23
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Button
24

󰗞ng gióng màu xanh
󰗄 gióng các i󰗂u khi󰗄n
󰗞ng gióng màu tím
󰗄 gióng các vn b󰖤n
trên i󰗂u khi󰗄n
Bài 2: THIẾT KẾFORM VÀ XỬLÝ SỰKIỆN
Xem mã ứng dụng
Chọn View > Code
Lớp chứa các nhóm lệnh đểthực hiện một tác vụ
Hầu hết các ứng dụng do Visual Basic đều bao gồm tập
hợp các lớp do lập trình viên vết nên và những lớp có sẵn
do Microsoft viết và cung cấp trong .Net Framework
Class Library
Chìa khóa đểphát triển ứng dụng Visual Basic thành công
là sựkết hợp giữa hai thành phần này
Giớ i thiệ u mã Visual Basic
25
Định nghĩa
lớp