Nội dung

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 Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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. Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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. Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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. Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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 : Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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. Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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. Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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. Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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; } Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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 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; Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 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