›
›

Bài giảng Lập trình hướng đối tượng - Chương 6: Xây dựng giao diện ứng dụng bằng Visual Studio

Download
Chương 6  
Xây dựng giao diện ứng dụng bằng Visual Studio  
6.0 Dẫn nhập  
6.1 Tổng quát về xây dựng ứng dụng bằng VS .Net  
6.2 Một số ₫ối tượng giao diện thường dùng  
6.3 Hiệu chỉnh thuộc tính các ₫ối tượng giao diện  
6.4 Sự kiện - Hàm xử lý sự kiện  
6.5 Qui trình ₫iển hình viết 1 ứng dụng bằng VC#  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
6.7 Kết chương  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 1  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.0 Dẫn nhập  
Chương này giới thiệu các ₫ối tượng giao diện phổ dụng, qui trình  
tạo/xóa/hiệu chỉnh thuộc tính của ₫ối tượng cũng như tạo hàm xử  
lý sự kiện cho 1 số sự kiện quan tâm trên ₫ối tượng giao diện.  
Chương này cũng giới thiệu qui trình ₫iển hình ₫ể xây dựng  
chương trình có giao diện ₫ồ họa ₫ược thiết kế trực quan (thay vì  
phải viết code khó khăn).  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 2  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.1 Tổng quát về xây dựng ứng dụng bằng VS .Net  
Một trong các yêu cầu quan trọng của các ứng dụng hiện nay là phải  
có tính thân thiện cao, gần gũi với người dùng. Để thỏa mãn yêu cầu  
này, ứng dụng thường sẽ hoạt ₫ộng ở chế ₫ộ ₫ồ họa trực quan.  
Các class cấu thành chương trình dùng giao diện ₫ồ họa ₫ược chia  
làm 2 nhóm chính :  
. Các class miêu tả các ₫ối tượng giao diện với người dùng như  
Form, Button, TextBox, Checkbox,... Nhiệm vụ của các ₫ối tượng  
này là giúp người dùng có thể tương tác dễdàng, trực quan với  
chương trình ₫ể nhập/xuất dữ liệu, ₫ể ₫iều khiển/giám sát hoạt  
₫ộng của chương trình. Các ₫ối tượng này còn che dấu mọi chi  
tiết về thuật giải và dữ liệu bên trong chương trình, người dùng  
không cần quan tâm ₫ến chúng.  
. Các class miêu tả các chức năng cần thực hiện của chương trình.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 3  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.1 Tổng quát về xây dựng ứng dụng bằng VS .Net  
Viết code tường minh ₫ể ₫ặc tả các ₫ối tượng giao diện là 1 công  
việc rất khó khăn và tốn nhiều công sức, thời gian.  
Để giảm nhẹ công sức ₫ặc tả các ₫ối tượng giao diện, các môi  
trường lập trình trực quan (như Visual Studio .Net) ₫ã viết sẵn 1  
số ₫ối tượng giao diện thường dùng và cung cấp công cụ ₫ể người  
lập trình thiết kế trực quan giao diện của ứng dụng bằng cách tích  
hợp các ₫ối tượng giao diện có sẵn này : người lập trình ₫óng vai  
trò họa sĩ ₫ể vẽ/hiệu chỉnh kích thước, di chuyển vị trí các phần tử  
giao diện cần cho ứng dụng.  
Ngoài ra môi trường trực quan còn cho phép người lập trình tự tạo  
các ₫ối tượng giao diện mới (User Control) ₫ể dùng trong các ứng  
dụng ₫ược viết sau ₫ó (chương 9).  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 4  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.1 Tổng quát về xây dựng ứng dụng bằng VS .Net  
Qui trình viết ứng dụng theo cơ chế này ₫ược gọi là viết ứng dụng  
bằng cách lắp ghép các linh kiện phần mềm, nó giống như việc lắp  
máy tính từ các linh kiện phần cứng như CPU, RAM, disk,  
keyboard, monitor,... rất dễdàng và nhanh chóng.  
Mọi phần tử giao diện, dù nhỏ hay lớn, dù ₫ơn giản hay phức tạp,  
₫ều là cửa sổ (window). HĐH Windows sẽ quản lý các cửa sổ làm  
việc theo thời gian. Một ứng dụng có thể dùng nhiều cửa sổ trong  
quá trình hoạt ₫ộng, nhưng từng thời ₫iểm chỉ có 1 số ít cửa sổ  
₫ược chương trình hiển thị ₫ể làm việc với người dùng.  
Chúng ta sẽ làm quen 1 số ₫ối tượng giao diện, nắm ₫ược tính  
chất và khả năng của từng ₫ối tượng ₫ể khi lập trình ứng dụng nào  
₫ó, ta sẽ chủ ₫ộng chọn lựa và dùng chúng cho phú hợp với từng  
ngữ cảnh sử dụng.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 5  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.2 Một số ₫ối tượng giao diện thường dùng  
Control buttons  
Window Form,  
Dialogbox  
Title bar  
Textbox  
Button  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 6  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.2 Một số ₫ối tượng giao diện thường dùng  
Label  
DriveListBox  
Combobox   
Textbox + ListBox  
DirListBox  
FileListBox ListBox  
PictureBox  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 7  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.2 Một số ₫ối tượng giao diện thường dùng  
GroupBox  
RadioButton  
Checkbox  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 8  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.2 Một số ₫ối tượng giao diện thường dùng  
MenuTrip  
ToolTrip  
Button  
Pop-up Menu  
1 window chứa 1  
document của ứng  
dụng  
StatusTrip  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 9  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
Các tính chất chung của các ₫ối tượng giao diện  
Đối tượng giao diện có những tính chất giống như ₫ối tượng bình  
thường, nó cũng ₫ược cấu thành từ các loại thành phần : thuộc  
tính, tác vụ, event, delegate...  
Mỗi ₫ối tượng giao diện chứa khá nhiều thuộc tính liên quan ₫ến  
nhiều loại trạng thái khác nhau :  
. (Name) : ₫ây là thuộc tính ₫ặc biệt, xác ₫ịnh tên nhận dạng  
của ₫ối tượng, giá trị của thuộc tính này sẽ trở thành biến tham  
khảo ₫ến ₫ối tượng, code của ứng dụng sẽ dùng biến này ₫ể  
truy xuất ₫ối tượng.  
. các thuộc tính xác ₫ịnh vị trí và kích thước (Layout) : Location,  
Size, Margin...  
. các thuộc tính xác ₫ịnh tính chất hiển thị : Text, Font,  
ForeColor, BackColor,...  
. các thuộc tính xác ₫ịnh hành vi (Behavoir) : Enable, Visible...  
. các thuộc tính liên kết dữ liệu database : DataBindings,...  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 10  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.3 Hiệu chỉnh thuộc tính các ₫ối tượng giao diện  
Khi tạo trực quan 1 ₫ối tượng giao diện, môi  
trường ₫ã gán giá trị ₫ầu mặc ₫ịnh cho các thuộc  
tính, thường ta chỉ cần thay ₫ổi 1 vài thuộc tính  
là ₫áp ứng ₫ược yêu cầu riêng. Có 2 cách ₫ể hiệu  
chỉnh giá trị 1 thuộc tính :  
. trực quan thông qua cửa sổ thuộc tính của  
₫ối tượng giao diện.  
. lập trình truy xuất thuộc tính của ₫ối tượng  
giao diện.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 11  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.4 Sự kiện - Hàm xử lý sự kiện  
Mỗi ₫ối tượng giao diện có khá nhiều sự kiện ₫ể người dùng kích  
hoạt. Người lập trình có thể ₫ịnh nghĩa hàm xử lý kết hợp với sự  
kiện cần xử lý. Khi ứng dụng chạy, lúc người dùng kích hoạt sự  
kiện, hàm xử lý sự kiện tương ứng (nếu có) sẽ chạy.  
Thí dụ khi user ấn chuột vào button tên "button1", hệ thống tạo ra  
sự kiện "Click" ₫ể kích khởi hàm button1_Click() chạy.  
Muốn tạo hàm xử lý sự kiện trên ₫ối tượng  
giao diện, ta chọn ₫ối tượng, cửa sổ thuộc  
tính của nó sẽ hiển thị, click icon ₫ể hiển  
thị danh sách các sự kiện của ₫ối tượng,  
duyệt tìm sự kiện cần xử lý, nhập tên hàm  
xử lý vào combobox bên phải sự kiện (hay  
ấn kép chuột vào comboBox ₫ể máy tạo tự  
₫ộng hàm xử lý).  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 12  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.5 Qui trình ₫iển hình viết 1 ứng dụng bằng VC#  
1. Trước hết phải nắm bắt yêu cầu phần mềm ₫ể xác ₫ịnh các chức  
năng mà ứng dụng phải cung cấp cho người dùng.  
2. Phân tích sơ lược từng chức năng và tìm ra các class phân tích cấu  
thành chức năng tương ứng.  
3. Thiết kế chi tiết các class phân tích : xác ₫ịnh các thuộc tính và các  
tác vụ cũng như phác họa giải thuật của từng tác vụ. Phân loại các  
class phần mềm thành 2 nhóm : nhóm các ₫ối tượng giao diện (các  
form giao diện) và nhóm các class miêu tả thuật giải các chức năng  
bên trong của ứng dụng. Trong các ứng dụng nhỏ dùng thuật giải  
₫ơn giản, ta thường ₫ặt các thuật giải chức năng trực tiếp trong các  
hàm xử lý sự kiện của các ₫ối tượng giao diện.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 13  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.5 Qui trình ₫iển hình viết 1 ứng dụng bằng VC#  
4. Hiện thực phần mềm bằng VC# gồm 2 công việc chính :  
. thiết kế trực quan các form giao diện người dùng : mỗi form  
chứa nhiều phần tử giao diện, các phần tử giao diện thường ₫ã  
có sẵn, nếu không ta phải tạo thêm 1 số ₫ối tượng giao diện mới  
(User Control). Ứng với mỗi phần tử giao diện vừa tạo ra, nên  
thiết lập giá trị ₫ầu cho thuộc tính "Name" và 1 vài thuộc tính  
cần thiết.  
. tạo hàm xử lý sự kiện cho các sự kiện cần thiết trên các phần tử  
giao diện rồi viết code cho từng hàm xử lý sự kiện vừa tạo ra.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 14  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiển thị cửa sổ New  
Project.  
2. Mở rộng mục Visual C# trong TreeView "Project Types", chọn mục  
Window, chọn icon "Windows Application" trong listbox  
"Templates" bên phải, thiết lập thư mục chức Project trong listbox  
"Location", nhập tên Project vào textbox "Name:", click button OK  
₫ể tạo Project theo các thông số ₫ã khai báo.  
3. Form ₫ầu tiên của ứng dụng ₫ã hiển thị trong cửa sổ thiết kế, việc  
thiết kế form là quá trình lặp 4 thao tác tạo mới/xóa/hiệu chỉnh  
thuộc tính/tạo hàm xử lý sự kiện cho từng ₫ối tượng cần dùng  
trong form.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 15  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
4. Nếu cửa sổ ToolBox chưa hiển thị chi tiết, chọn menu  
View.Toolbox ₫ể hiển thị nó (thường nằm ở bên trái màn hình).  
Click chuột vào button (Auto Hide) nằm ở góc trên phải cửa sổ  
ToolBox ₫ể chuyển nó về chế ₫ộ hiển thị thường trực.  
5. Duyệt tìm phần tử Label (trong nhóm Common Controls), chọn  
nó, dời chuột về vị trí thích hợp trong form và vẽ nó với kích thước  
mong muốn. Hiệu chỉnh thuộc tính Text = "Nhap a :". Nếu cần,  
hãy thay ₫ổi vị trí và kích thước của Labelvà của Form.  
6. Duyệt tìm phần tử TextBox (trong nhóm Common Controls), chọn  
nó, dời chuột về vị trí bên phải Label vừa vẽ và vẽ nó với kích  
thước mong muốn. Hiệu chỉnh thuộc tính (Name) = txtA. Nếu  
cần, hãy thay ₫ổi vị trí và kích thước của TextBox.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 16  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
7. Lặp lại các bước 4, 5 ₫ể vẽ 2  
Label "Nhập b :", "Nhập c :", 2  
TextBox có (Name) = txtB, txtC,  
1 button "Bắt ₫ầu giải" có  
(Name) = btnStart, 3 Label có  
(Name) lần lượt là lblKetqua,  
lblX1, lblX2.  
Đối với các ₫ối tượng giống  
nhau, ta có thể dùng kỹ thuật  
Copy-Paste ₫ể nhân bản vô tính  
chúng cho dễdàng.  
Sau khi thiết kế xong, Form có  
dạng sau :  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 17  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
8. Dời chuột về button "Bắt ₫ầu giải", ấn kép chuột vào nó ₫ể tạo  
hàm xử lý sự kiện Click chuột cho button, cửa sổ mã nguồn sẽ hiển  
thị ₫ể ta bắt ₫ầu viết code cho hàm. Lưu ý rằng ₫ể tạo hàm xử lý  
sự kiện bất kỳ cho ₫ối tượng 1 cách chính quy, ta phải hiển thị cửa  
sổ thuộc tính của ₫ối tượng, rồi hiển thị danh sách các sự kiện rồi  
mới ₫ịnh nghĩa hàm xử lý sự kiện mong muốn.  
9. Viết code cho hàm btnStart_Click() như sau :  
private void btnStart_Click(object sender, EventArgs e) {  
//₫ịnh nghĩa các biến cần dùng  
double a, b, c;  
double delta;  
double x1, x2;  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 18  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
//mã hóa chuỗi nhập thành giá trị thực a,b,c  
a = Double.Parse(txtA.Text);  
b = Double.Parse(txtB.Text);  
c = Double.Parse(txtC.Text);  
//tính biệt số delta của phương trình  
delta = b * b - 4 * a * c;  
if (delta >= 0) { //nếu có nghiệm thực  
x1 = (-b + Math.Sqrt(delta)) / 2 / a;  
x2 = (-b - Math.Sqrt(delta)) / 2 / a;  
lblKetqua.Text = "Phương trình có 2 nghiệm thực :";  
lblX1.Text = "X1 = " + x1;  
lblX2.Text = "X2 = " + x2;  
}
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 19  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
6.6 Thí dụ viết ứng dụng giải phương trình bậc 2  
else { //nếu vô nghiệm  
lblKetqua.Text = "Phương trình vô nghiệm";  
lblX1.Text = lblX2.Text = "";  
}
}
10.Hiệu chỉnh hàm khởi tạo form như sau :  
public Form1() {  
InitializeComponent();  
//xóa nội dung ban ₫ầu của các Label kết quả  
lblKetqua.Text = lblX1.Text = lblX2.Text = "";  
}
11.Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng.  
Hãy thử nhập từng bộ ba (a,b,c) của phương trình bậc 2 rồi ấn  
button "Bắt ₫ầu giải" ₫ể giải và xem kết quả.  
Môn : Lập trình hướng ₫ối tượng  
Chương 6 : Xây dựng giao diện ứng dụng bằng Visual Studio  
Slide 20  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
Tải về để xem bản đầy đủ
pdf 21 trang myanh 26460 Free
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình hướng đối tượng - Chương 6: Xây dựng giao diện ứng dụng bằng Visual Studio", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_lap_trinh_huong_doi_tuong_chuong_6_xay_dung_giao_d.pdf