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ữ assembley 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ừ BASIC, 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ũ
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ữ assembley 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ừ BASIC, 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
Xử lý sự kiện, biến và phép toán trong lập trình
2
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
Xử lý sự kiện, biến và phép toán trong lập trình

3
GUI là viết tắt cho 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 cho yêu cầu của mỗi bài toán đặt ra
Thiết kế GUI và điều khiển GUI
Label để
hiển thị
kết quả
Xử lý sự kiện, biến và phép toán trong lập trình
4
TextBox để
nhập dữ liệu
Label để
hiển thị
kết quả
Button
để tính
Đ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
Xử lý sự kiện, biến và phép toán trong lập trình
5
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
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.
Xử lý sự kiện, biến và phép toán trong lập trình
6
Form
Cửa sổ
Properties
của Form
Tên file lưu
Form
Thanh
tiêu đề
Form

Xử lý sự kiện, biến và phép toán trong lập trình
7
Cửa sổ
Properties
của Form
Form
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
Thiết lập kiểu font
và kích thước font
Tên Form
nên có tiền
tố Form
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
Thiết kế Form và xử lý sự kiện
8
Thiết lập kiểu font
và kích thước font
Thiết lập tên tiêu đề bằng
thuộc tính Text
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
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
Xử lý sự kiện, biến và phép toán trong lập trình
9
Ví dụ về đặt tên theo tiền tố
Có thể xem tại: />us/library/aa263493%28v=vs.60%29.aspx
Điều khiển
Tiền tố
Ví dụ
Check box
chk
chkReadOnly
Combobox
cbo
cboEnglish
button
btn
btnExit
Form
frm
frmEntry
Có thể xem tại: />us/library/aa263493%28v=vs.60%29.aspx

Xử lý sự kiện, biến và phép toán trong lập trình
10
Form
frm
frmEntry
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
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
Xử lý sự kiện, biến và phép toán trong lập trình
11
Label
đầu ra
Label
mô tả
Thêm Label vào Form
Thêm Label
vào Form
Biểu tượng
Label trên
ToolBox

Xử lý sự kiện, biến và phép toán trong lập trình
12
Thêm Label
vào Form
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
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
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.
Xử lý sự kiện, biến và phép toán trong lập trình
13
Label
Xác định
hình dáng
đường
viền cho
Label
Xử lý sự kiện, biến và phép toán trong lập trình
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
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
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
Xử lý sự kiện, biến và phép toán trong lập trình
15
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
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.
Xử lý sự kiện, biến và phép toán trong lập trình
16
TextBox
Xử lý sự kiện, biến và phép toán trong lập trình
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
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
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
Xử lý sự kiện, biến và phép toán trong lập trình
18
TextBox
Xử lý sự kiện, biến và phép toán trong lập trình
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
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

Imports System.IO
Dim output As StreamWriter
output = New StreamWriter (“calendar.txt”, True)
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
Xử lý sự kiện, biến và phép toán trong lập trình
20
output = New StreamWriter (“calendar.txt”, True)
Tên file mà dữ liệu
sẽ được ghi ra
Mục đích là để báo
rằng muốn thêm thông
tin vào cuối file
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
output.Write(TextBox1.Text)
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

Xử lý sự kiện, biến và phép toán trong lập trình
21
output.WriteLine(TextBox1.Text)
output.Close()
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
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.
Xử lý sự kiện, biến và phép toán trong lập trình
22
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
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
Xử lý sự kiện, biến và phép toán trong lập trình
23
Button
Đường gióng màu xanh
để gióng các điều khiển
Xử lý sự kiện, biến và phép toán trong lập trình
24
Đường gióng màu tím
để gióng các văn bản
trên điều khiể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
Định nghĩa
lớp
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
Xử lý sự kiện, biến và phép toán trong lập trình
25