BÀI 2:

THIẾT KẾ FORM VÀ XỬ LÝ SỰ KIỆ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

 Mục tiêu bài học

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

Xử lý sự kiện, biến và phép toán trong lập trình 3

 Thiết kế GUI và điều khiển GUI

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
Label để
hiển thị
kết quả

Button
để tính

TextBox để
nhập dữ liệu

Xử lý sự kiện, biến và phép toán trong lập trình 4

 Điều khiển GUI
Đ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

Xử lý sự kiện, biến và phép toán trong lập trình 5

 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

Thanh Tên file lưu

tiêu đề Form
Form

Cửa sổ
Properties
Form của Form

Xử lý sự kiện, biến và phép toán trong lập trình 7

 Tên Form
nên có tiền
tố Form

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
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

 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ố

Đ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: http://msdn.microsoft.com/en-

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

 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

Label
đầu ra
Label
mô tả

Xử lý sự kiện, biến và phép toán trong lập trình 11

 Thêm Label vào Form

Biểu tượng
Label trên
ToolBox

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

Xử lý sự kiện, biến và phép toán trong lập trình 12

 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

Căn chỉnh nội

dung hiển thị
trên Label

Xử lý sự kiện, biến và phép toán trong lập trình 14

 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

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

Căn chỉnh nội

dung hiển thị
Tên nên có Thiết lập vị trí trên TextBox
tiền tố TextBox cho TextBox

Xử lý sự kiện, biến và phép toán trong lập trình 17

 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

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

Xử lý sự kiện, biến và phép toán trong lập trình 19

 Textbox và sơ lược về ghi file

Thêm namespace System.IO

Imports System.IO
Khai báo biến StreamWriter
Dim output As StreamWriter
Khởi tạo giá trị cho đối tượng StreamWriter
output = New StreamWriter (“calendar.txt”, True)
Mục đích là để báo
Tên file mà dữ liệu rằng muốn thêm thông
sẽ được ghi ra tin vào cuối file
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

 Textbox và sơ lược về ghi file

Ghi dữ liệu ra file

Phương thức Write
Ghi giá trị đối số của nó ra file
output.Write(TextBox1.Text)
Phương thức WriteLine
Ghi giá trị đối số ra file, kèm theo là một ký tự xuống dòng
output.WriteLine(TextBox1.Text)
Đóng StreamWriter
output.Close()

Xử lý sự kiện, biến và phép toán trong lập trình 21

 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

 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

Đường gióng màu tím

để gióng các văn bản
trên điều khiển

Xử lý sự kiện, biến và phép toán trong lập trình 24

 Giới thiệu mã Visual Basic

Xem mã ứng dụng

Chọn View > Code

Định nghĩa
lớp

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
 Tìm hiểu định nghĩa lớp

Từ khóa là những từ được VB đăng ký sử dụng để biểu diễn

cho một mục đích nào đó. Theo mặc định, từ khóa trong VB
có màu xanh.
Từ khóa Class: bắt đầu của định nghĩa lớp
Tên lớp
Tên lớp là một định danh
Định danh là một chuỗi ký tự bao gồm các chữ cái, chữ số và
gạch dưới (_). Định danh không được bắt đầu bằng chữ số và
không được chứa ký tự trắng.
Từ khóa và định danh không phân biệt viết hoa hay viết thường
trong VB
7welcome
value1
label_value exitButton input field
Từ khóa End Class: Kết thúc của định nghĩa lớp
•Xử lý sự kiện, 26
 Xử lý sự kiện

Sự kiện
a Form

y ra
kích hoạt
n Click
y (xử lý sự kiện)
Mỗi điều khiển có một nhóm sự kiện khác nhau

Xử lý sự kiện, biến và phép toán trong lập trình 27

 Thêm xử lý sự kiện vào mã

Nhấn đúp vào Button trên chế độ Design để thêm xử lý

sự kiện Click cho Button. Mã trong xử lý sự kiện này sẽ
được thực thi khi người dùng nhấn Button đó.
Demo: Thêm xử lý sự kiện cho Button Calculate Total
của ứng dụng Inventory

Định nghĩa
xử lý sự
kiện

Tên điều khiển Tên sự kiện

Xử lý sự kiện, biến và phép toán trong lập trình 28

 Thêm mã vào xử lý sự kiện

Thêm chú thích

Thêm chú thích vào chương trình để mã dễ hiểu hơn
Chú thích giải thích cho mã để lập trình viên khác khi làm
việc với ứng dụng hiểu được chức năng của đoạn mã được
chú thích
Chú thích cũng giúp bạn hiểu mã của mình, nhất là khi về
sau xem lại
Chú thích bắt đầu bằng ký tự nháy đơn (‘)
Trình biên dịch bỏ qua chú thích, nghĩa là chúng không
làm cho máy tính thực hiện bất cứ một hành động nào khi
ứng dụng chạy
Có thể đặt chú thích trên một dòng riêng hoặc đặt sau
dòng mã

Xử lý sự kiện, biến và phép toán trong lập trình 29

 Thêm mã vào xử lý sự kiện

Chú thích giải thích cho

câu lệnh ở phía dưới

Chú thích
trên một
dòng

Chú thích sau Chú thích cho biết kết thúc thủ tục
dòng mã calculateButton_Click

Xử lý sự kiện, biến và phép toán trong lập trình 30

 Thêm mã vào xử lý sự kiện

Thêm lệnh
Trong mã VB, các thuộc tính được truy cập bằng cách đặt
dấu chấm giữa tên điều khiển và thuộc tính. Dấu chấm
này được gọi là toán tử truy cập thành viên
Khi gõ tên đối tượng và toán tử truy cập thành viên, sẽ
xuất hiện cửa sổ liệt kê các thành phần của đối tượng

Cửa sổ liệt kê
các thành phần
của đối tượng Tìm đến thuộc
tính cần thêm,
nhấn Enter hoặc
Tab để thêm

Xử lý sự kiện, biến và phép toán trong lập trình 31

 Thêm mã vào xử lý sự kiện

Thêm lệnh gán

Toán tử gán gán giá trị bên phải của toán tử (toán hạng phải)
cho biến ở bên trái của toán tử (toán hạng trái)
Toán tử gán là toán hạng hai ngôi

totalResultLabel.Text = cartonsTextBox.Text
Toán hạng trái
Toán hạng phải
Toán tử gán

Kết quả sau khi

nhấn vào Button
Calculate Total

Xử lý sự kiện, biến và phép toán trong lập trình 32

 Thêm mã vào xử lý sự kiện

Thêm ký tự nối dòng

Ký tự nối dòng (gạch dưới sau ít nhất một ký tự trắng) để
phân tách một dòng lệnh thành nhiều dòng

Ký tự nối dòng tách

một dòng thành ba
dòng để mã nằm gọn
trong cửa số

Xử lý sự kiện, biến và phép toán trong lập trình 33

 Thêm mã vào xử lý sự kiện

Hàm Val Ví dụ lời gọi hàm Val Kết

Trả về giá trị số từ chuỗi ký tự quả
Val đọc từng ký tự trong đối số Val(“16”) 16
cho đến khi gặp phải một ký tự Val(“-3”) -3
không phải số Val(“1.5”) 1.5
Nếu bắt gặp ký tự không phải ký Val(“67a4) 67
tự số, Val trả về số mà nó đã đọc Val(“8+5” 8
trong thời điểm đó
Val(“14 Main St.”) 14
Val bỏ qua ký tự trắng Val(“+1 2 3 4 5) 123
Val nhận biết dấu chấm thập 45
phân, ký tự cộng và trừ đầu chuỗi Val(“hello”) 0

Xử lý sự kiện, biến và phép toán trong lập trình 34

 Thêm mã vào xử lý sự kiện

Thực hiện phép nhân

Thứ tự thực hiện câu lệnh dưới
Lấy giá trị số của chuỗi cartonsTextBox.Text
Lấy giá trị số của chuỗi itemsTextBox.Text
Nhân hai giá trị này với nhau
Gán kết quả cho totalResultLabel.Text
Phép nhân
totalResultLabel.Text = _
Val(cartonsTextBox.Text) * Val(itemsTextBox.Text)

Kết quả sau

khi thực hiện
phép nhân

Xử lý sự kiện, biến và phép toán trong lập trình 35

 Tùy chỉnh IDE

Bạn có thể tùy chỉnh IDE để thêm chỉ số dòng, điều chỉnh
độ rộng tab và thiết lập font và màu.
Chọn Tools > Options…>Text Editor Basic > Editor để thêm
chỉ số dòng, điều chỉnh độ rộng của Tab và lùi đầu dòng

Tính năng lùi

đầu dòng
Smart

Thêm chỉ số
dòng

Xử lý sự kiện, biến và phép toán trong lập trình 36

 Tùy chỉnh IDE

Chọn Tools > Options…>Text Editor Basic > Environment >

Fonts and Colors để điều chỉnh font và màu cho trình soạn
thảo mã

Chọn Fonts và
Colors

Xử lý sự kiện, biến và phép toán trong lập trình 37

 Sử dụng IDE để hạn chế lỗi biên dịch

Gỡ lỗi là quá trình sửa lỗi của ứng dụng

Có hai loại lỗi
Lỗi biên dịch:
Xuất hiện khi lệnh vi phạm các quy tắc ngữ pháp của ngôn ngữ lập
trình VB
– Viết sai từ khóa hoặc định danh
– Không dùng ký tự nối dòng khi tách lệnh thành nhiều dòng
Ứng dụng chỉ thực thi khi tất cả các lỗi biên dịch đều được sửa
Lỗi cú pháp là một phần của lỗi biên dịch
Lỗi logic:
Không ngăn cản ứng dụng biên dịch thành công, nhưng có thể làm
cho ứng dụng đưa ra kết quả sai
IDE Visual Basic có bộ gỡ lỗi cho phép bạn phân tích hoạt động của
ứng dụng để xác định xem ứng dụng có thực thi đúng hay không
Xử lý sự kiện, biến và phép toán trong lập trình 38
 Sử dụng IDE để hạn chế lỗi biên dịch

Sử dụng Build > Build [Tên project] để biên dịch

Cửa sổ Output hiển thị kết quả biên dịch
Cửa sổ Error List hiển thị mọi lỗi biên dịch

Cửa sổ Output
hiển thị kết
quả biên dịch
thành công

Cửa sổ Error
List liệt kê các
lỗi biên dịch

Xử lý sự kiện, biến và phép toán trong lập trình 39

 Sử dụng IDE để hạn chế lỗi biên dịch

Demo sử dụng IDE để hạn chế lỗi biên dịch

Tạo lỗi
Tìm lỗi
Sửa lỗi

Xử lý sự kiện, biến và phép toán trong lập trình 40

 Hướng dẫn làm Assignment

Thiết kế ứng dụng:

Thiết kế sơ đồ form, luồng thực các form
Thiết kế giao diện ứng dụng

Thiết kế Form và xử lý sự kiện 41

 Tổng kết bài học

Form là cửa sổ chính của giao diện người dùng đồ họa.

Thiết kế giao diện tức là thêm vào Form các điều khiển
phù hợp với yêu cầu của ứng dụng
Lớp chứa nhóm lệnh để thực hiện một tác vụ cụ thể.
Một ứng dụng gồm một hoặc nhiều lớp. Visual Basic
cung cấp nhiều lớp có sẵn.
Tên lớp phải là một định danh hợp lệ
Sự kiện xẩy ra khi người dùng kích hoạt lên điều khiển
trên Form. Xử lý sự kiện n mã c i n khi
t sư n y ra

Xử lý sự kiện, biến và phép toán trong lập trình 42

 Tổng kết bài học

Có hai loại lỗi là lỗi biên dịch và lỗi logic. Nếu gặp lỗi
biên dịch, ứng dụng sẽ không chạy được. Nếu gặp lỗi
logic, ứng dụng vẫn chạy nhưng có thể đưa ra kết quả
sai
Visual Basic cung cấp tính năng Debug để hạn chế hai
loại lỗi trên
Cách thiết kế ứng dụng

Xử lý sự kiện, biến và phép toán trong lập trình 43