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

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

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

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

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ả

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

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.

Cửa sổ Properties của Form

Tên file lưu Form

Thanh

tiêu đề

Form

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

Ví dụ về đặt tên theo tiền tố

Có thể xem tại:

http://msdn.microsoft.com/en-us/library/aa263493%28v=vs.60%29.aspx

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

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

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ố

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ố

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

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.

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

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

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

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

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

Button sẽ ra lệnh cho ứng dụng thực hiện một hành

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

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

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

Đườ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

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

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

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

Từ khóa và định danh không phân biệt viết hoa hay viết thường

trong VB

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

Từ khóa và định danh không phân biệt viết hoa hay viết thường

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

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

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

Định nghĩa

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ã

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ã

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 cho biết kết thúc thủ tục calculateButton_Click

Thêm lệnh

Trong mã VB, các thuộc tính được truy cập bằng cách đặtdấ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

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 đặtdấ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

tính cần thêm, nhấn Enter hoặc

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

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

totalResultLabel.Text = cartonsTextBox.Text

Toán hạng trái

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

Hàm Val

Trả về giá trị số từ chuỗi ký tự

Val đọc từng ký tự trong đối số

cho đến khi gặp phải một ký tự

Val nhận biết dấu chấm thập

phân, ký tự cộng và trừ đầu chuỗi

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

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

Val đọc từng ký tự trong đối số

cho đến khi gặp phải một ký tự

Val nhận biết dấu chấm thập

phân, ký tự cộng và trừ đầu chuỗi

Val(“14 Main St.”) 14 Val(“+1 2 3 4 5) 123

45 Val(“hello”) 0

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

totalResultLabel.Text = _

Val(cartonsTextBox.Text) * Val(itemsTextBox.Text )

Phép nhân

Kết quả sau khi thực hiện phép nhân

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

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

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

Có hai loại lỗi

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

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 cú pháp là một phần của 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

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

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

Hướng dẫn làm Assignment

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

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