›
›

Bài giảng Lập trình hướng đối tượng - Chương 11: Tạo đối tượng giao diện cá nhân hóa bằng VC#

Download
Chương 11  
Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
11.0 Dẫn nhập  
11.1 Tổng quát về giao diện cá nhân hóa  
11.2 Xây dựng User control & ứng dụng  
11.3 Xây dựng Inherited control & ứng dụng  
11.4 Xây dựng Owner-drawn control & ứng dụng  
11.5 Kết chương  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 1  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.0 Dẫn nhập  
Chương này giới thiệu cách thức dùng tính thừa kế ₫ể tạo mới 3  
loại ₫ối tượng giao diện cá nhân hóa phổ biến là User Control,  
Inherited Control và Owner-drawn Control.  
Chương này cũng giới thiệu cách thức viết chương trình sử dụng  
lại các ₫ối tượng giao diện cá nhân hóa.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 2  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.1 Tổng quát về giao diện cá nhân hóa  
Mỗi chương trình dùng giao diện ₫ồ họa thường có nhiều cửa sổ  
giao diện. Mỗi cửa sổ giao diện chứa nhiều ₫ối tượng giao diện.  
Microsoft ₫ã cung cấp sẵn nhiều ₫ối tượng giao diện (control) phổ  
dụng ₫ể ta thiết kế form giao diện dễ dàng. Tuy nhiên trong từng  
ứng dụng, có thể ta cần 1 số ₫ối tượng giao diện ₫ặc thù, ta gọi  
chúng là ₫ối tượng cá nhân hóa (user control).  
Thường có 3 dạng ₫ối tượng giao diện cá nhân hóa :  
1. User Control : là dạng ₫ơn giản nhất, nó thừa kế class  
UserControl sẵn có, tích hợp nhiều control có sẵn ₫ể tạo ₫ối  
tượng cá nhân hóa. Thí dụ 1 LoginControl gồm 2 TextBox ₫ể  
nhập username, password và 1 Button ₫ăng nhập.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 3  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.1 Tổng quát về giao diện cá nhân hóa  
2. Inherited Control : chức năng và hành vi của nó gần giống control  
₫ã có sẵn. Để xây dựng nó, ta thừa kế class có sẵn mà chức năng  
gần giống nhất, rồi hiệu chỉnh (override) 1 số tác vụ ₫ể thể hiện  
chức năng thay ₫ổi. Ta cũng có thể thêm mới 1 số tác vụ ₫ể thể  
hiện các chức năng tăng cường. Thí dụ MyTextBox có chức năng  
gần giống như TextBox có sẵn, nhưng nó có nhiều chế ₫ộ khác  
nhau, ở mỗi chế ₫ộ nó phản ứng khác nhau. Thí dụ nếu ở chế ₫ộ  
nhập số nguyên, nó chỉ cho phép nhập ký số, chứ không cho nhập  
ký tự khác.  
3. Owner-drawn control : chức năng giống y như control có sẵn  
nhưng bộ mặt giao diện thì khác. Ta sẽ thừa kế class có sẵn mà  
chức năng giống y rồi override tác vụ OnPaint ₫ể vẽ lại bộ mặt  
mới. Thí dụ HeartControl là một Button nhưng bộ mặt không phải  
là khung chữ nhật bình thường mà là trái tim màu ₫ỏ tươi.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 4  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
Qui trình xây dựng 1 hay nhiều User Control gồm các bước chính :  
1. chạy Visual Studio .Net, mở/tạo Project loại "Windows Control  
Library" ₫ể quản lý 1 hay nhiều user control.  
2. Tạo mới 1 User Control rồi thiết kế giao diện/viết code cho nó.  
3. Dịch project ra file *.dll, ta gọi file này là thư viện chứa các user  
control.  
Thí dụ ta hãy xây dựng 1 User Control có tên là LoginControl, nó  
gồm 2 TextBox và 1 Button ₫ể giúp người dùng ₫ăng ký tài khoàn  
₫ể truy xuất hệ thống. Hình ảnh LoginControl như sau :  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 5  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
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  
Windows, chọn icon "Windows Control Library" trong listbox  
"Templates" bên phải, thiết lập thư mục chứa Project trong listbox  
"Location", nhập tên Project vào textbox "Name:" (td.  
MyUserControls), click button OK ₫ể tạo Project theo các thông số  
₫ã khai báo.  
3. Ngay sau Project vừa ₫ược tạo ra, nó có sẵn 1 User Control mới có  
tên mặc ₫ịnh là UserControl1, nó chỉ là 1 vùng hình chữ nhật  
trống, chứ chưa có gì. Dời chuột về cửa sổ Solution Explorer  
(thường ở trên phải màn hình), ấn kép chuột vào mục  
UserControl1.cs ₫ể hiển thị menu lệnh, chọn option Rename, nhập  
tên mới là LoginControl.cs và chọn button Yes khi ₫ược hỏi.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 6  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
4. Nếu cử sổ ToolBox chưa hiển thị, chọn menu View.Toolbox ₫ể  
hiển thị nó (thường nằm ở bên trái màn hình). 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 LoginControl và vẽ nó với kích thước mong muốn.  
Hiệu chỉnh thuộc tính Text = "Nhập tên user :". Nếu cần, hãy thay  
₫ổi vị trí và kích thước của Label và của LoginControl.  
5. Dời chuột về cửa sổ ToolBox, duyệt tìm phần tử TextBox (trong  
nhóm Common Controls), chọn nó, dời chuột về vị trí thích hợp  
trong LoginControl (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) = txtUser. Nếu cần,  
hãy thay ₫ổi vị trí và kích thước của TextBox.  
6. Lặp lại các bước 4 và 5 ₫ể vẽ Label "Nhập passwword :", TextBox  
có (Name) = txtPassword, 1 button "Đăng nhập" có (Name) =  
btnLogin.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 7  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
4. Nếu cửa sổ ToolBox chưa hiển thị, chọn menu View.Toolbox ₫ể  
hiển thị nó (thường nằm ở bên trái màn hình). 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 LoginControl và vẽ nó với kích thước mong muốn.  
Hiệu chỉnh thuộc tính Text = "Nhập tên user :". Nếu cần, hãy thay  
₫ổi vị trí và kích thước của Label và của LoginControl.  
5. Dời chuột về cửa sổ ToolBox, duyệt tìm phần tử TextBox (trong  
nhóm Common Controls), chọn nó, dời chuột về vị trí thích hợp  
trong LoginControl (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) = txtUser. Nếu cần,  
hãy thay ₫ổi vị trí và kích thước của TextBox.  
6. Lặp lại các bước 4 và 5 ₫ể vẽ Label "Nhập passwword :", TextBox  
có (Name) = txtPassword, 1 button "Đăng nhập" có (Name) =  
btnLogin.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 8  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
7. Dời chuột về và chọn button "Đăng nhập", 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 Button,  
duyệt tìm sự kiện Click, ấn kép chuột vào comboBox bên phải của  
Click ₫ể máy tạo tự ₫ộng hàm xử lý rồi viết code cho hàm này như  
sau :  
private void btnLogin_Click(object sender, EventArgs e) {  
//kiểm tra ₫ã nhập user name chưa  
if (txtUser.Text.Length == 0) {  
MessageBox.Show("Hãy nhập tên user."); return;  
}
//kiểm tra ₫ã nhập password chưa  
if (txtPassword.Text.Length == 0) {  
MessageBox.Show("Hãy nhập password."); return;  
}
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 9  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
//tạo sự kiện Click ₫ể gọi hàm xử lý sự kiện Click  
//do người lập trình ứng dụng viết  
OnSubmitClicked(sender,e);  
}
8. Viết thêm ₫oạn code ₫ịnh nghĩa delegate, event và 2 thuộc tính  
UserName, Password như sau (nằm trước hay sau hàm sự lý Click  
chuột cho button) :  
//₫ịnh nghĩa delegate phục vụ cho event  
public delegate void SubmitClickedHandler(object sender, EventArgs e);  
//₫ịnh nghĩa event SubmitClicked  
public event SubmitClickedHandler SubmitClicked;  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 10  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
//₫ịnh nghĩa hàm xử lý sự kiện SubmitClicked  
protected virtual void OnSubmitClicked(object sender, EventArgs e) {  
// kiểm tra xem có hàm xử lý sự kiện SubmitClicked ?  
//nếu có thì gọi nó  
if (SubmitClicked != null) {  
SubmitClicked(sender, e); // Notify Subscribers  
}
}
//₫ịnh nghĩa thuộc tính giao tiếp có tên là UserName  
public string UserName {  
get { return txtUser.Text; }  
set { txtUser.Text = value; }  
}
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 11  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.2 Xây dựng User control  
//₫ịnh nghĩa thuộc tính giao tiếp có tên là Password  
public string Password {  
get { return txtPassword.Text; }  
set { txtPassword.Text = value; }  
}
9. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư viện chứa  
các user control. Nếu có lỗi thì sữa và dịch lại.  
10. Nếu dịch thành công, file thư viện có tên là MyUserControls.dll sẽ  
₫ược tạo ra trong thư mục con Debug (hay Release tùy chế ₫ộ  
dịch) trong thư mục chứa Project. Ta nên copy file này vào thư  
mục chung chứa các file thư viện ₫ể sau này dùng tiện lợi hơn.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 12  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
Xây dựng ứng dụng dùng User Control  
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  
Windows, chọn icon "Windows Application" trong listbox  
"Templates" bên phải, thiết lập thư mục chứa Project trong listbox  
"Location", nhập tên Project vào textbox "Name:" (td.  
UseLoginControl), 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 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 13  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
Xây dựng ứng dụng dùng User control  
4. Nếu cửa sổ ToolBox chưa hiển thị, chọn menu View.Toolbox ₫ể  
hiển thị nó (thường nằm ở bên trái màn hình). Dời chuột vào trong  
cửa sổ Toolbox, ấn phải chuột ₫ể hiển thị menu lệnh, chọn option  
"Choose Items". Khi cửa sổ "Choose Toolbox Items" hiển thị, click  
chuột vào button Browse ₫ể hiển thị cửa sổ duyệt tìm file, hãy  
duyệt tìm ₫ến thư mục chứa file MyUserControls.dll vừa xây dựng  
₫ược trong các slide trước, chọn file dll rồi click button OK ₫ể  
"add" các usercontrol trong thư viện này vào cửa sổ Toolbox của  
Project ứng dụng. Bây giờ việc dùng LoginControl giống y như các  
₫iều khiển có sẵn khác.  
5. Duyệt tìm phần tử LoginControl (trong nhóm General ở cuối cửa  
sổ Toolbox), 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.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 14  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
Xây dựng ứng dụng dùng User control  
6. Chọn ₫ối tượng LoginControl ₫ể hiển thị cửa sổ thuộc tính của nó,  
click chuột vào button Events ₫ể hiển thị các event của nó. duyệt  
tìm event SubmitClicked vào tạo hàm xử lý cho event này. Viết  
code cho hàm xử lý như sau :  
private void loginControl1_SubmitClicked(object sender, EventArgs e) {  
//viết code xử lý việc ₫ăng nhập tài khoản  
//ở ₫ây chỉ hiển thị thông báo ₫ể kiểm tra  
MessageBox.Show("Đã ₫ăng ký tài khoản : "  
+ loginControl1.UserName);  
}
7. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng.  
Hãy thử sử dụng ₫ối tượng LoginControl và ₫ánh giá kết quả.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 15  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.3 Xây dựng Inherited control  
Qui trình xây dựng 1 hay nhiều Inherited Control gồm các bước  
chính :  
1. chạy Visual Studio .Net, mở/tạo Project loại "Windows Control  
Library" ₫ể quản lý 1 hay nhiều user control.  
2. Ấn phải chuột vào gốc của cây Project trong cửa sổ "Solution  
Explorer", chọn option Add.User Control ₫ể tạo mới 1 User  
Control.  
3. Hiển thị cửa sổ soạn mã nguồn của user Control, hiệu chỉnh lại  
tên class base cần thừa kế rồi override/tăng cường các tác vụ  
chức năng mong muốn.  
4. Dịch project ra file *.dll, ta gọi file này là thư viện chứa các user  
control.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 16  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.3 Xây dựng Inherited control  
Thí dụ ta hãy xây dựng 1 Inherited Control có tên là MyTextBox,  
nó là TextBox nhưng có thể hoạt ₫ộng ở 1 trong nhiều chế ₫ộ khác  
nhau :  
. Common (giống như textbox của .Net),  
. Text (chỉ cho nhập các ký tự alphabet),  
. NumInt (chỉ cho phép nhập các ký số),  
. NumReal (chỉ cho phép nhập các ký số và dấu chấm thập  
phân).  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 17  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.3 Xây dựng Inherited control  
Qui trình xây dựng MyTextBox và chứa nó trong thư viện có sẵn  
(thư viện chứa ₫ối tượng LoginControl) như sau :  
1. Chạy VS .Net, chọn menu File.Open.Project ₫ể hiển thị cửa sổ  
duyệt file. Duyệt và tìm file *.sln quản lý Project "Windows  
Control Library" có sẵn ₫ể mở lại Project này.  
2. Quan sát cây Project, chúng ta ₫ã thấy có mục LoginControl.cs  
quản lý user control ₫ã xây dựng trong mục 9.2. Ấn phải chuột vào  
gốc của cây Project trong cửa sổ "Solution Explorer", chọn option  
Add.User Control ₫ể tạo mới 1 User Control, nhập tên là  
MyTextBox.cs rồi click button Add ₫ể tạo mới nó.  
3. Lúc này control mới chỉ là 1 vùng hình chữ nhật trống. Dời chuột  
về mục MyTextBox.cs trong cửa sổ Project, ấn phải chuột trên nó  
rồi chọn option "View Code" ₫ể hiển thị cửa sổ soạn mã nguồn cho  
MyTextBox control.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 18  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.3 Xây dựng Inherited control  
4. Thêm lệnh ₫ịnh nghĩa kiểu liệt kê các chế ₫ộ làm việc của  
MyTextBox :  
public enum ValidationType {  
Common = 0,  
NumInt,  
NumReal,  
Text };  
//giống như TextBox bình thường  
//chỉ nhận các ký số  
//chỉ nhận các ký số và dấu chấm thập phân  
//chỉ nhận các ký tự chữ  
5. Hiệu chỉnh lại lệnh ₫ịnh nghĩa class MyTextBox ₫ể thừa kế class  
TextBox (thay vì UserControl như mặc ₫ịnh). Nội dung chi tiết của  
class MyTextBox ₫ược liệt kê ở các slide sau.  
6. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư viện chứa  
các user control. Nếu có lỗi thì sữa và dịch lại. Lưu ý khi máy báo  
lỗi ở hàng lệnh this.AutoScaleMode = ... thì hãy chú thích hàng  
lệnh này hay xóa nó luôn cũng ₫ược.  
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
Slide 19  
Khoa Khoa học & Kỹ thuật Máy tính  
Trường ĐH Bách Khoa Tp.HCM  
© 2010  
11.3 Xây dựng Inherited control  
public partial class MyTextBox : TextBox {  
bool fPoint;  
//hàm contructor  
public MyTextBox() : base() {  
InitializeComponent();  
//₫ăng ký hàm xử lý sự kiện KeyPress  
this.KeyPress += new KeyPressEventHandler(OnKeyPress);  
}
//₫ịnh nghĩa thuộc tính ValidateFor miêu tả chế ₫ộ làm việc  
private int intValidType = (int)ValidationType.Text;  
public ValidationType ValidateFor {  
get { return (ValidationType)intValidType; }  
set { intValidType = (int)value; }  
}
Môn : Lập trình hướng ₫ối tượng  
Chương 11 : Tạo ₫ối tượng giao diện cá nhân hóa bằng VC#  
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 42 trang myanh 18660 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 11: Tạo đối tượng giao diện cá nhân hóa bằng VC#", để 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_11_tao_doi_tuong.pdf