›
›

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#

pdf 21 trang vanle 2620
Download
Bạn đang xem 20 trang mẫu của tài liệu "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 bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdflap_trinh_huong_doi_tuong_chuong_11_tao_oi_tuong_giao_dien_c.pdf

Nội dung text: 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#

  1. Chương 11 Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# 11.0 Dẫnnhậ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ếtchương Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 1 11.0 Dẫnnhập ‰ Chương này giớithiệucáchthức dùng tính thừakế₫ểtạomới3 loại ₫ốitượ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ớithiệucáchthứcviếtchương trình sử dụng lạicác₫ốitượng giao diện cá nhân hóa. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 2
  2. 11.1 Tổng quát về giao diện cá nhân hóa ‰ Mỗichương trình dùng giao diện ₫ồ họathường có nhiềucửasổ giao diện. Mỗicửasổ giao diệnchứanhiều ₫ốitượng giao diện. Microsoft ₫ã cung cấpsẵnnhiều ₫ốitượng giao diện (control) phổ dụng ₫ể ta thiếtkế form giao diệndễ dàng. Tuy nhiên trong từng ứng dụng, có thể ta cần1 số₫ốitượng giao diện ₫ặcthù, tagọi chúng là ₫ốitượng cá nhân hóa (user control). ‰ Thường có 3 dạng ₫ốitượng giao diệncánhânhóa: 1. User Control : là dạng ₫ơngiảnnhất, nó thừakế 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ồm2 TextBox₫ể nhập username, password và 1 Button ₫ăng nhập. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 3 11.1 Tổng quát về giao diện cá nhân hóa 2. Inherited Control : chứcnăng và hành vi củanógầngiống control ₫ãcósẵn. Để xây dựng nó, ta thừakế class có sẵnmàchức năng gầngiống nhất, rồihiệuchỉnh (override) 1 số tác vụ₫ểthể hiệnchứcnăng thay ₫ổi. Ta cũng có thể thêm mới1 số tác vụ₫ể thể hiệncácchứcnăng tăng cường. Thí dụ MyTextBox có chức năng gầngiống như TextBox có sẵn, nhưng nó có nhiềuchế₫ộ khác nhau, ở mỗichế₫ộnó phản ứng khác nhau. Thí dụ nếu ở chế₫ộnhậpsố nguyên, nó chỉ chophépnhậpkýsố, chứ không cho nhậpkýtự khác. 3. Owner-drawn control : chứcnăng giống y như control có sẵn nhưng bộ mặtgiaodiện thì khác. Ta sẽ thừakế class có sẵnmà chứcnăng giống y rồi override tác vụ OnPaint ₫ể vẽ lạibộ mặt mới. Thí dụ HeartControl là một Button nhưng bộ mặt không phải là khung chữ nhậtbìnhthường mà là trái tim màu ₫ỏ tươi. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 4
  3. 11.2 Xây dựng User control ‰ Qui trình xây dựng 1 hay nhiều User Control gồmcácbướcchính: 1. chạy Visual Studio .Net, mở/tạoProject loại "Windows Control Library" ₫ể quản lý 1 hay nhiều user control. 2. Tạomới 1 User Control rồithiếtkế giao diện/viết code cho nó. 3. Dịch project ra file *.dll, ta gọi file này là thư việnchứ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ấthệ thống. Hình ảnh LoginControl như sau : Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 5 11.2 Xây dựng User control 1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiểnthị cửasổ 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ếtlậpthư mụcchứ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 ₫ượctạ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ưacógì. Dờichuộtvề cửasổ Solution Explorer (thường ở trên phải màn hình), ấn kép chuộtvàomục UserControl1.cs ₫ể hiểnthị menu lệnh, chọn option Rename, nhậptênmới là LoginControl.cs và chọn button Yes khi ₫ượchỏi. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 6
  4. 11.2 Xây dựng User control 4. Nếucử sổ ToolBox chưahiểnthị, chọn menu View.Toolbox ₫ể hiểnthị nó (thường nằm ở bên trái màn hình). Duyệt tìm phầntử Label (trong nhóm Common Controls), chọnnó, dờichuộtvề vị trí thích hợp trong LoginControl và vẽ nó vớikíchthướcmongmuốn. Hiệuchỉnh thuộc tính Text = "Nhập tên user :". Nếucần, hãy thay ₫ổivị trí và kích thướccủa Label và của LoginControl. 5. Dờichuộtvề cửasổ ToolBox, duyệttìmphầntử TextBox (trong nhóm Common Controls), chọn nó, dờichuộtvề vị trí thích hợp trong LoginControl (bên phải Label vừavẽ) và vẽ nó vớikích thước mong muốn. Hiệuchỉnh thuộc tính (Name) = txtUser. Nếu cần, hãy thay ₫ổivị trí và kích thướccủa TextBox. 6. Lặplạicácbước4 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 Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 7 11.2 Xây dựng User control 4. Nếucửasổ ToolBox chưahiểnthị, chọn menu View.Toolbox ₫ể hiểnthị nó (thường nằm ở bên trái màn hình). Duyệt tìm phầntử Label (trong nhóm Common Controls), chọnnó, dờichuộtvề vị trí thích hợp trong LoginControl và vẽ nó vớikíchthướcmongmuốn. Hiệuchỉnh thuộc tính Text = "Nhập tên user :". Nếucần, hãy thay ₫ổivị trí và kích thướccủa Label và của LoginControl. 5. Dờichuộtvề cửasổ ToolBox, duyệttìmphầntử TextBox (trong nhóm Common Controls), chọn nó, dờichuộtvề vị trí thích hợp trong LoginControl (bên phải Label vừavẽ) và vẽ nó vớikích thước mong muốn. Hiệuchỉnh thuộc tính (Name) = txtUser. Nếu cần, hãy thay ₫ổivị trí và kích thướccủa TextBox. 6. Lặplạicácbước4 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 Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 8
  5. 11.2 Xây dựng User control 7. Dờichuộtvề và chọn button "Đăng nhập", cửasổ thuộc tính của nó sẽ hiểnthị, click icon ₫ể hiểnthị danh sách các sự kiện Button, duyệttìmsự kiện Click, ấn kép chuột vào comboBox bên phảicủa Click ₫ể máy tạotự₫ộng hàm xử lý rồiviết code cho hàm này như sau : private void btnLogin_Click(object sender, EventArgs e) { //kiểmtra₫ãnhập user name chưa if (txtUser.Text.Length == 0) { MessageBox.Show("Hãy nhập tên user."); return; } //kiểmtra₫ã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 Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 9 11.2 Xây dựng User control //tạosự kiện Click ₫ể gọi hàm xử lý sự kiện Click //do ngườilậptrì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ộctính UserName, Password như sau (nằmtrước hay sau hàm sự lý Click chuột cho button) : //₫ịnh nghĩa delegate phụcvụ 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 Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 10
  6. 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ệnSubmitClicked? //nếucóthìgọinó if (SubmitClicked != null) { SubmitClicked(sender, e); // Notify Subscribers } } //₫ịnh nghĩathuộctínhgiaotiếp có tên là UserName public string UserName { get { return txtUser.Text; } set { txtUser.Text = value; } } Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 11 11.2 Xây dựng User control //₫ịnh nghĩathuộctínhgiaotiếpcótênlà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ệnchứa các user control. Nếucólỗithìsữavàdịch lại. 10. Nếudịch thành công, file thư viện có tên là MyUserControls.dll sẽ ₫ượctạoratrongthư mục con Debug (hay Release tùy chế₫ộ dịch) trong thư mụcchứ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ệnlợihơn. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 12
  7. Xây dựng ứng dụng dùng User Control 1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiểnthị cửasổ 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ếtlậpthư mụcchứ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 ₫ầutiêncủa ứng dụng ₫ãhiểnthị trong cửasổ thiếtkế, việc thiếtkế form là quá trình lặp 4 thao tác tạomới/xóa/hiệuchỉnh thuộc tính/tạo hàm xử lý sự kiệnchotừng ₫ốitượng cầndùng trong form. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 13 Xây dựng ứng dụng dùng User control 4. Nếucửasổ ToolBox chưahiểnthị, chọn menu View.Toolbox ₫ể hiểnthị nó (thường nằm ở bên trái màn hình). Dờichuột vào trong cửasổ Toolbox, ấnphảichuột ₫ể hiểnthị menu lệnh, chọn option "Choose Items". Khi cửasổ "Choose Toolbox Items" hiểnthị, click chuột vào button Browse ₫ể hiểnthị cửasổ duyệt tìm file, hãy duyệttìm₫ếnthư mụcchứa file MyUserControls.dll vừaxâ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ửasổ Toolbox củaProject ứng dụng. Bây giờ việc dùng LoginControl giống y như các ₫iềukhiểncósẵn khác. 5. Duyệttìmphầntử LoginControl (trong nhóm General ở cuốicửa sổ Toolbox), chọn nó, dờichuộtvề vị trí thích hợp trong Form và vẽ nó vớikíchthước mong muốn. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 14
  8. Xây dựng ứng dụng dùng User control 6. Chọn ₫ốitượng LoginControl ₫ể hiểnthị cửasổ thuộctínhcủa nó, click chuột vào button Events ₫ể hiểnthị 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ểnthị thông báo ₫ể kiểmtra 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 ₫ốitượng LoginControl và ₫ánh giá kếtquả. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 15 11.3 Xây dựng Inherited control ‰ Qui trình xây dựng 1 hay nhiều Inherited Control gồmcácbước chính : 1. chạy Visual Studio .Net, mở/tạoProject loại "Windows Control Library" ₫ể quản lý 1 hay nhiều user control. 2. Ấnphảichuộtvàogốccủa cây Project trong cửasổ "Solution Explorer", chọn option Add.User Control ₫ể tạomới1 User Control. 3. Hiểnthị cửasổ soạnmãnguồncủa user Control, hiệuchỉnh lại tên class base cầnthừakế rồi override/tăng cường các tác vụ chứcnăng mong muốn. 4. Dịch project ra file *.dll, ta gọi file này là thư việnchứa các user control. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 16
  9. 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ềuchế₫ộ 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ỉ chophépnhập các ký số và dấuchấmthập phân). Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 17 11.3 Xây dựng Inherited control ‰ Qui trình xây dựng MyTextBox và chứa nó trong thư việncósẵn (thư việnchứa ₫ốitượng LoginControl) như sau : 1. Chạy VS .Net, chọn menu File.Open.Project ₫ể hiểnthị cửasổ 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ấycómục LoginControl.cs quản lý user control ₫ãxâydựng trong mục9.2. Ấnphảichuột vào gốccủa cây Project trong cửasổ "Solution Explorer", chọn option Add.User Control ₫ể tạomới 1 User Control, nhậptênlà MyTextBox.cs rồi click button Add ₫ể tạomớinó. 3. Lúc này control mớichỉ là 1 vùng hình chữ nhậttrống. Dờichuột về mục MyTextBox.cs trong cửasổ Project, ấnphảichuộttrênnó rồichọn option "View Code" ₫ể hiểnthị cửasổ soạnmãnguồn cho MyTextBox control. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 18
  10. 11.3 Xây dựng Inherited control 4. Thêm lệnh ₫ịnh nghĩakiểuliệtkêcácchế₫ộlàm việccủa MyTextBox : public enum ValidationType { Common = 0, //giống như TextBox bình thường NumInt, //chỉ nhận các ký số NumReal, //chỉ nhận các ký số và dấuchấmthập phân Text } //chỉ nhận các ký tự chữ 5. Hiệuchỉnh lạilệnh ₫ịnh nghĩa class MyTextBox ₫ể thừakế class TextBox (thay vì UserControl như mặc ₫ịnh). Nội dung chi tiết của class MyTextBox ₫ượcliệtkêở các slide sau. 6. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư việnchứa các user control. Nếucólỗithìsữavà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. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 19 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ệnKeyPress this.KeyPress += new KeyPressEventHandler(OnKeyPress); } //₫ịnh nghĩathuộ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; } } Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 20
  11. 11.3 Xây dựng Inherited control //hàmxử lý sự kiệngỏ phím KeyPress protected void OnKeyPress(object sender, KeyPressEventArgs e) { //xác ₫ịnh mã ký tự ₫ượcnhập char ch = e.KeyChar; //kiểmtrachế₫ộhoạt ₫ộng ₫ể phản ứng switch (intValidType) { case (int)ValidationType.Common: //nếulàkiểutổng quát, thì không xử lý thêm gì cả return; case (int)ValidationType.NumInt: //nếulàkiểusố nguyên thì chỉ nhậnkýsố if (!Char.IsDigit(ch)) e.KeyChar = (char)0; return; Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 21 11.3 Xây dựng Inherited control case (int)ValidationType.NumReal: //nếulàkiểusố thựcthìchỉ nhậnkýsố + dấu. if (Char.IsDigit(ch)) return; if (ch == '.' && fPoint==false) { fPoint = true; return; } e.KeyChar = (char)0; return; case (int)ValidationType.Text: //nếulàkiểuchuỗivănbảnthìchỉ nhậnkýtự chữ ch = Char.ToLower(ch); if (ch < 'a' || 'z' < ch) e.KeyChar = (char)0; return; } } //kết thúc lệnh switch, hàm OnKeyPress, Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 22
  12. Xây dựng ứng dụng dùng Inherited control 1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiểnthị cửasổ 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ếtlậpthư mụcchứa Project trong listbox "Location", nhập tên Project vào textbox "Name:" (td. UseMyTextBox), click button OK ₫ể tạo Project theo các thông số ₫ãkhaibáo. 3. Form ₫ầutiêncủa ứng dụng ₫ãhiểnthị trong cửasổ thiếtkế, việc thiếtkế form là quá trình lặp 4 thao tác tạomới/xóa/hiệuchỉnh thuộc tính/tạo hàm xử lý sự kiệnchotừng ₫ốitượng cầndùng trong form. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 23 Xây dựng ứng dụng dùng Inherited control 4. Nếucửasổ ToolBox chưahiểnthị, chọn menu View.Toolbox ₫ể hiểnthị nó (thường nằm ở bên trái màn hình). Dờichuột vào trong cửasổ Toolbox, ấnphảichuột ₫ể hiểnthị menu lệnh, chọn option "Choose Items". Khi cửasổ "Choose Toolbox Items" hiểnthị, click chuột vào button Browse ₫ể hiểnthị cửasổ duyệt tìm file, hãy duyệttìm₫ếnthư mụcchứa file MyUserControls.dll vừaxâ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ửasổ Toolbox của Project ứng dụng. 5. Duyệttìmphầntử Label (trong nhóm Common Controls), chọn nó, dờichuộtvề vị trí thích hợp trong form và vẽ nó vớikíchthước mong muốn. Hiệuchỉnh thuộc tính Text = "Nhậpchuỗibấtkỳ :". Nếucần, hãy thay ₫ổivị trí và kích thướccủa Label và Form. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 24
  13. Xây dựng ứng dụng dùng Inherited control 6. Duyệttìmphầntử MyTextBox (trong nhóm General ở cuốicửasổ Toolbox), chọn nó, dờichuộtvề vị trí thích hợp trong Form (bên phải Label vừavẽ) và vẽ nó vớikíchthước mong muốn. Vào cửa sổ thuộctínhcủa ₫ốitượng MyTextBox vừavẽ, ₫ặtthuộctính (Name) = txtCommon, thuộc tính ValidateFor = Common ₫ể nó hoạt ₫ộng ở chế₫ộnhậpkýtự bình thường. 7. Lặp2 bước 5 và 6 ba lần ₫ể tạo thêm 3 cặp (Label, MyTextBox) khác, các MyTextBox tạomớilầnlượtcóthuộc tính ValidateFor = Text, NumInt, NumReal ₫ể hoạt ₫ộng trên hoặcchuỗivănbản, hoặcsố nguyên, hoặcsố thực. ‰ Đốivớicác₫ốitượ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. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 25 Xây dựng ứng dụng dùng Inherited control ‰ Sau khi thiếtkế xong, Form có dạng sau : 8. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng. Hãy thử nhậpcácloạikýtự vào các ₫ốitượng MyTextBox và ₫ánh giá kếtquả. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 26
  14. 11.4 Xây dựng Owner-drawn control ‰ Qui trình xây dựng 1 hay nhiều Owner-drawn Control cũng giống như Inherited control, gồmcácbước chính : 1. chạy Visual Studio .Net, mở/tạoProject loại "Windows Control Library" ₫ể quản lý 1 hay nhiều user control. 2. Ấnphảichuộtvàogốccủa cây Project trong cửasổ "Solution Explorer", chọn option Add.User Control ₫ể tạomới1 User Control. 3. Hiểnthị cửasổ soạn mã nguồncủa User Control, hiệuchỉnh lại tên class base cầnthừakế rồi override/tăng cường các tác vụ chứcnăng mong muốn, trong ₫óthiếtyếunhấtlàhàm OnPaint ₫ể vẽ bộ mặtcủa ₫ốitượng giao diện. 4. Dịch project ra file *.dll, ta gọi file này là thư việnchứa các user control. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 27 11.4 Xây dựng Owner-drawn control ‰ Thí dụ ta hãy xây dựng 1 Owner-drawn Control có tên là HeartButton, nó là Button nhưng bộ mặt không phảilàhìnhchữ nhậtcó₫ường viền thông thường mà là một trái tim màu ₫ỏ tươi. ‰ Qui trình xây dựng HeartButton và chứanótrongthư việncósẵn (thư viện ₫ãtạo ra trong mục 9.2 và 9.3) như sau : 1. Chạy VS .Net, chọn menu File.Open.Project ₫ể hiểnthị cửasổ 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, ta thấycómục LoginControl.cs quảnlý usercontrol ₫ãxâydựng trong mục 9.2, mục MyTextBox.cs quản lý inherited control ₫ãxâydựng trong mục 9.3. Ấnphảichuộtvào gốc cây Project trong cửasổ "Solution Explorer", chọnoption Add.User Control ₫ể tạomới 1 User Control, nhậptênlà HeartButton.cs rồi click button Add ₫ể tạomới nó. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 28
  15. 11.4 Xây dựng Owner-drawn control 3. Lúc này control mớichỉ là 1 vùng hình chữ nhậttrống. Dờichuột về mục HeartButton.cs trong cửasổ Project, ấnphảichuộttrên nó rồichọn option "View Code" ₫ể hiểnthị cửasổ soạnmã nguồn cho HeartButton control. 4. Hiệuchỉnh lạilệnh ₫ịnh nghĩa class HeartButton ₫ể thừakế class Button (thay vì UserControl như mặc ₫ịnh). Nội dung chi tiếtcủa class HeartButton ₫ượcliệtkêở các slide sau. 5. Chọn menu Build.Build Solution ₫ể dịch và tạo file thư việnchứa các user control. Nếucólỗithìsữavà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. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 29 11.4 Xây dựng Owner-drawn control public partial class HeartButton : Button { //hàm contructor củaclass public HeartButton() { InitializeComponent(); } //hàm vẽ bộ mặtcủa button protected override void OnPaint(PaintEventArgs e) { //xác ₫ịnh ₫ốitượng vẽ của Button Graphics g = e.Graphics; //tạo ₫ốitượng image gốcchứa ảnh trái tim màu ₫ỏ Image bgimg = Image.FromFile("c:\\bgbutton.jpg"); //vẽ inage gốc theo chế₫ộzoom vào button g.DrawImage(bgimg, 0, 0,this.Width,this.Height); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 30
  16. 11.4 Xây dựng Owner-drawn control //₫ịnh nghĩa ₫ốitượng miêu tả cách thứchiểnthị chuỗi StringFormat format1 = new StringFormat (StringFormatFlags.NoClip); format1.Alignment = StringAlignment.Center; //vẽ chuỗi caption của button g.DrawString(this.Text, this.Font, Brushes.White, this.Width / 2, this.Height / 3, format1); } //hết hàm OnPaint } //hết class HeartButton Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 31 Xây dựng ứng dụng dùng Owner-drawn control 1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiểnthị cửasổ 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ếtlậpthư mụcchứa Project trong listbox "Location", nhập tên Project vào textbox "Name:" (td. UseHeartButton), click button OK ₫ể tạo Project theo các thông số₫ã khai báo. 3. Form ₫ầutiêncủa ứng dụng ₫ãhiểnthị trong cửasổ thiếtkế, việc thiếtkế form là quá trình lặp 4 thao tác tạomới/xóa/hiệuchỉnh thuộc tính/tạo hàm xử lý sự kiệnchotừng ₫ốitượng cầndùng trong form. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 32
  17. Xây dựng ứng dụng dùng Owner-drawn control 4. Nếucửasổ ToolBox chưahiểnthị, chọn menu View.Toolbox ₫ể hiểnthị nó (thường nằm ở bên trái màn hình). Dờichuột vào trong cửasổ Toolbox, ấnphảichuột ₫ể hiểnthị menu lệnh, chọn option "Choose Items". Khi cửasổ "Choose Toolbox Items" hiểnthị, click chuột vào button Browse ₫ể hiểnthị cửasổ duyệt tìm file, hãy duyệttìm₫ếnthư mụcchứa file MyUserControls.dll vừaxâ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ửasổ Toolbox của Project ứng dụng. 5. Duyệttìmphầntử HeartButton (trong nhóm General ở chuốicửa sổ), chọn nó, dờichuộtvề vị trí thích hợp trong form và vẽ nó với kích thước mong muốn. Hiệuchỉnh thuộctínhText = "Bắt ₫ầu thựchiện". Nếucần, hãy thay ₫ổivị trí và kích thướccủa Button và Form. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 33 Xây dựng ứng dụng dùng Owner-drawn control 6. Ấn kép chuột vào button vừatạo ₫ể tạo hàm xử lý sự kiện Click của Button rồiviết code như sau : //hàm xử lý Click chuột trên button private void btnStart_Click (object sender, EventArgs e) { MessageBox.Show("Bạnvừa ấnchuột trên Button"); //thử thay ₫ổinội dung Caption btnStart.Text = "Kết thúc"; } 7. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng. Hãy thử click chuộttrên₫ốitượng HeartButton và ₫ánh giá kết quả. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 34
  18. 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Các ₫ốitượng giao diện, dù nhỏ hay lớn (Button, TextBox, ListBox, TreeView, ), ₫ều ₫ược Windows quảnlýgiống nhau : Windows xử lý chúng như là window. ‰ Mỗi window sẽ ₫ượchiểnthịởdạng mặc ₫ịnh là hình chữ nhậtcó ₫ường viền xung quanh và titlebar ở phía trên. Tuy nhiên ta có thể miêu tả lạihìnhdạng cho window theo nhu cầuriêngcủa mình. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 35 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Các thuộctínhsau₫ây sẽ xác ₫ịnh chính xác hình dạng củamột window : ƒ BackgroundImage : miêu tả hình bitmap ₫ượcdùng₫ể hiển thị nền window và ₫ể xác ₫ịnh hình dạng củawindow. ƒ FormBorderStyle : miêu tả chế₫ộhiểnthị các ₫ường biên và titlebar của window. ƒ Region : miêu tả vùng hiểnthị và làm việccủa window, nó gồmtừ 1 tớinhiều vùng rờirạc, mỗi vùng rờirạc ₫ượcbao ₫óng bởi1 ₫ường viền khép kín. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 36
  19. 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Đường viềnkhépkíncủa1 vùng₫ộclậpcóthể ₫ượcxác₫ịnh bằng 1 trong 2 phương pháp : ƒ Danh sách các ₫oạnthẳng hay cong liên tiếp và khép kín, mỗi ₫oạnthẳng hay cong có thể miêu tả bởi 1 hàm toán họcnhư Line, Arc, ƒ Do hình bitmap nào ₫óxác₫ịnh. ‰ Có 2 kỹ thuậtxâydựng window có hình dạng bấtkỳ : ƒ Khai báo các thuộctínhliênquan1 cáchtrực quan tạithời ₫iểmthiếtkế. ƒ Lậptrình₫ộng ₫ể thiếtlập các giá trị phù hợpchocácthuộc tính liên quan ₫ến window. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 37 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Qui trình xây dựng ₫ốitượng giao diệncóhìnhdạng bấtkỳ bằng cách khai báo các thuộc tính liên quan 1 cách trực quan tạithời ₫iểmthiếtkế : Tạo form cần dùng, chọnnó₫ể hiểnthị cửasổ thuộc tính, tìm và thiếtlậpgiátrị cho các thuộctínhsau₫ây : ƒ BackgroundImage : khai báo file bitmap ₫ược dùng ₫ể hiểnthị nền window và ₫ể xác ₫ịnh hình dạng của window. Lưu ý hình bitmap cần có tính chất : các vùng diệntíchcủabitmap phải có màu khác vớimàunềncủahìnhbitmap; kíchthướchình bitmap nên phù hợpvớinhucầusử dụng củaform tương ứng. ƒ FormBorderStyle = None. ƒ TranparenceKey : miêu tả màu RGB nềncủahìnhbitmap cần lọcbỏ. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 38
  20. 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Thí dụ hãy xây dựng ứng dụng giảiphương trình bậc2 cóhình dạng như sau : Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 39 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Qui trình xây dựng ₫ốitượng giao diệncóhìnhdạng bấtkỳ bằng cách viết code thiếtlập ₫ộng các thuộc tính liên quan : Tạoform cần dùng, viết ₫oạn code thiếtlập3 thuộctínhliênquankhicần thiết: ƒ BackgroundImage : miêu tả hình bitmap ₫ượcdùng₫ể hiển thị nền window. ƒ FormBorderStyle = None. ƒ Region : miêu tả vùng diện tích làm việccủa ₫ốitượng. ‰ Thường Region ₫ượcxác₫ịnh thông qua ₫ốitượng Path, ₫ối tượng này miêu tả ₫ường viềncủa Region. ‰ Để tạo Path, ta có thể dùng các hàm toán họcmiêutả từng ₫oạn viền hay dùng ₫ường viềncủahìnhbitmap bấtkỳ. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 40
  21. 11.5 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Thí dụ hãy xây dựng ứng dụng giảiphương trình bậc2 cóhình dạng như sau : Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 41 11.6 Kếtchương ‰ Chương này ₫ãgiớithiệucáchthức dùng tính thừakế₫ểtạomới 3 loại ₫ốitượng giao diện cá nhân hóa phổ biếnlàUser Control, Inherited Control và Owner-drawn Control. ‰ Chương này cũng ₫ãgiớithiệucáchthứcviếtchương trình sử dụng lạicác₫ốitượng giao diện cá nhân hóa. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 11 : Tạo ₫ốitượng giao diện cá nhân hóa bằng VC# © 2010 Slide 42