Bài giảng Windows Form - Nguyễn Văn Phong

Nội dung text: Bài giảng Windows Form - Nguyễn Văn Phong

1. Windows Form Nguyễn Văn Phong 1
2. Nội Dung ◼ Graphical User Interface (GUI) ◼ Event Driven Programming ◼ Ứng dụng Windows Form dùng C# ◼ Khuôn mẫu của ứng dụng Windows Form chuẩn ◼ Cách tạo ứng dụng Windows Form trong VS 2005 ❑ Tạo ứng dụng Form ❑ Chỉnh sửa form ❑ Thêm component vào form ❑ Viết phần xử lý cơ bản Nguyễn Văn Phong 2
3. GUI Command line interface: CLI Text user interface: TUI Tương tác qua keyboard GUI dựa trên text Thực thi tuần tự Mức độ tương tác cao hơn Nguyễn Văn Phong 3
4. GUI Graphical User Interface: GUI Tương tác qua giao diện đồ họa độ phân giải cao Đa số các hệ OS hiện đại đều dùng GUI Cho phép user dễ dàng thao tác Nguyễn Văn Phong 4
5. GUIs ◼ Chương trình hiện đại đều dùng GUI ◼ Graphical: text, window, menu, button ◼ User: người sử dụng chương trình ◼ Interface: cách tương tác chương trình ◼ Thành phần đồ họa điển hình ❑ Window: một vùng bên trong màn hình chính ❑ Menu: liệt kê những chức năng ❑ Button: nút lệnh cho phép click vào ❑ TextBox: cho phép user nhập dữ liệu text Nguyễn Văn Phong 5
6. GUI Application ◼ Windows Form là nền tảng GUI cho ứng dụng desktop ❑ (Ngược với Web Form ứng dụng cho Web) ❑ Single Document Interface (SDI) ❑ Multiple Document Interface (MDI) ◼ Các namespace chứa các lớp hỗ trợ GUI trong .NET ❑ System.Windows.Forms: ◼ Chứa GUI components/controls và form ❑ System.Drawing: ◼ Chức năng liên quan đến tô vẽ cho thành phần GUI ◼ Cung cấp chức năng truy cập đến GDI+ cơ bản Nguyễn Văn Phong 6
7. Event- Driven Programming Cách truyền thống Event-Driven Programming Danh sách các lệnh thực thi Các đối tượng có thể kích hoạt sự tuần tự kiện và các đối tượng khác phản ứng với những sự kiện đó Việc kế tiếp xảy ra chính là lệnh tiếp theo trong danh sách Việc kế tiếp xảy ra phụ thuộc vào sự kiện kế tiếp Chương trình được thực thi bởi Luồng chương trình được điều máy tính kiển bở sự tương tác User- Computer Nguyễn Văn Phong 7
8. Event-Driven Programming ◼ Chương trình GUI thường dùng Event-Drive Programming ◼ Chương trình chờ cho event xuất hiện và xử lý ◼ Ví dụ sự kiện: ◼ Firing an event: khi đối tượng khởi tạo sự kiện ◼ Listener: đối tượng chờ cho sự kiện xuất hiện ◼ Event handler: phương thức phản ứng lại sự kiện Nguyễn Văn Phong 8
9. Event-Driven Programming ◼ Trong C#, Event-Driven Programming được thực thi bởi event (xem slide Delegate & Event) ◼ Event E subscribe publish B A C Handler B cho E A phát sinh event E Delegate cho E Handler C cho E Nguyễn Văn Phong 9
10. Event-Driven Programming ◼ Minh họa xử lý trong form Click User nhập text vào texbox -> click invoke Button để add chuỗi nhập vào listbox Lấy dữ liệu từ textbox Add vào listbox Button đưa ra sự kiện click Form có event handler cho click của button Nguyễn Văn Phong 10
11. Event-Driven Programming Event ◼ GUI-based events ❑ Mouse move ❑ Mouse click ❑ Mouse double-click ❑ Key press Danh sách ❑ Button click event cho Form ❑ Menu selection ❑ Change in focus ❑ Window activation ❑ Nguyễn Văn Phong 11
12. Windows Forms Application Nguyễn Văn Phong 12
13. Windows Form App ◼ Sử dụng GUI làm nền tảng ◼ Event-driven programming cho các đối tượng trên form ◼ Ứng dụng dựa trên một “form” chứa các thành phần ❑ Menu ❑ Toolbar ❑ StatusBar ❑ TextBox, Label, Button ◼ Lớp cơ sở cho các form của ứng dụng là Form System.Windows.Forms. Form Namespace Class Nguyễn Văn Phong 13
14. Minh họa WinForm App Nguyễn Văn Phong 14
15. GUI Components/Controls ◼ Components/controls được tổ chức vào các lớp thừa kế, cho phép dễ dàng chia sẻ các thuộc tính ◼ Mỗi component/control định nghĩa các ❑ Thuộc tính ❑ Phương thức ❑ Sự kiện ◼ Cách dễ nhất là sử dụng VS .NET Toolbox để thêm control và component vào form Nguyễn Văn Phong 15
16. Components and Controls cho Windows Form Toolbox của Visual Studio .NET 2005 Nguyễn Văn Phong 16
17. UD WinForm đơn giản Form1.cs Lớp Form cơ sở Control kiểu Label Thiết kế form & control Add control vào form Chạy ứng dụng với Form1 làm form chính Nguyễn Văn Phong 17
18. Các bước tạo UD WinForm cơ bản ◼ Tạo lớp kế thừa từ lớp Form cơ sở ◼ Bổ sung các control vào form ❑ Thêm các label, menu, button, textbox ◼ Thiết kế layout cho form (bố trí control) ❑ Hiệu chỉnh kích thước, trình bày, giao diện cho ◼ form ◼ Control chứa trong form ◼ Viết các xử lý cho các control trên form và các xử lý khác ◼ Hiển thị Form ❑ Thông qua lớp Application gọi phương thức Run Nên sử dụng IDE hỗ trợ thiết kế GUI! Nguyễn Văn Phong 18
19. Form và control ◼ Tất cả các thành phần trên form đều là đối tượng ◼ Các control là những lớp của FCL ❑ System.Windows.Forms.Label ❑ System.Windows.Forms.TextBox ❑ System.Windows.Forms.Button ❑ object ◼ Các control là instance của các object lớp trên. object object object object Nguyễn Văn Phong 19
20. Các thuộc tính của Form Property Description Default Name Tên của form sử dụng trong project Form1,Form2 AcceptButton Thiết lập button là click khi user nhấn Enter CancelButton Thiết lập button là click khi user nhấn Esc ControlBox Hiển thị control box trong caption bar True FormBorderStyle Biên của form: none, single, 3D, sizable Sizable StartPosition Xác định vị trí xuất hiện của form trên màn hình WindowsDefaultLocation Text Nội dung hiển thị trên title bar Form1, Form2, Form3 Font Font cho form và mặc định cho các control Method Description Close Đóng form và free resource Hide ẩn form Show Hiển thị form đang ẩn Event Description Load Xuất hiện trước khi form show Nguyễn Văn Phong 20
21. Minh họa tạo ứng dụng Windows Form từ Visual Studio .NET Nguyễn Văn Phong 21
22. Tạo WinForm App từ VS. 2005 Cơ chế xử lý sự kiện code behind Hỗ trợ WYSISYG cho GUI design Nhanh chóng & dễ dàng tạo UD Windows Form Nguyễn Văn Phong 22
23. Tạo WinForm App từ VS. 2005 (2) Tạo project: Windows App Nguyễn Văn Phong 23
24. Tạo WinForm App từ VS. 2005 (3) Windows App do 2 VS.2005 khởi tạo 1 3 1: form ứng dụng 2: control toolbox 3: Solution Explorer 4 4: Form properties Nguyễn Văn Phong 24
25. Tạo WinForm App từ VS. 2005 (4) ◼ Màn hình thiết kế Form, cho phép người lập trình kéo thả những control vào trong form ❑ Tất cả những code được tạo tự động dựa trên sự thao tác thiết kế form của user ❑ Rút ngắn nhiều thời gian cho việc thao tác giao diện form ❑ Tính năng trực quan WYSIWYG Có được ứng dụng form mặc dù chưa viết code! Nguyễn Văn Phong 25
26. Toolbox Toolbox -Kéo thả control lên form -Code được phát sinh tự động Nguyễn Văn Phong 26
27. Giao diện thiết kế form Chưa có control Form chính của ứng dụng Nguyễn Văn Phong 27
28. Cửa sổ properties Cửa sổ properties của form Nguyễn Văn Phong 28
29. Cửa sổ properties Dễ dàng hiệu chỉnh form thông qua cửa sổ Properties Tên của form chính là tên lớp Thay đổi title Nguyễn Văn Phong 29
30. Thêm control vào form ◼ Kéo thả control vào form Nguyễn Văn Phong 30
31. Code của phần design ◼ Phần code thiết kế Form1 được tạo tự động Form1.Designer.cs Chứa code khởi tạo control Khai báo các đối tượng control trên Form1 Nguyễn Văn Phong 31
32. Code của phần design InitializeComponent Tạo đối tượng Lần lượt khai báo các thuộc tính cho các control Nguyễn Văn Phong 32
33. Code của phần design InitializeComponent Đưa các control vào danh sách control của Form1 Nguyễn Văn Phong 33
34. Sửa thuộc tính của control Đổi tên thành txtNum1 Thay đổi các giá trị qua cửa sổ properties -> VS tự cập nhật code Nguyễn Văn Phong 34
35. Phần xử lý ◼ Khi click vào Add -> cộng 2 giá trị và xuất kết quả ◼ Thực hiện ❑ Button Add cung cấp sự kiện click ❑ Form sẽ được cảnh báo khi Add được click ❑ Form sẽ lấy dữ liệu từ 2 textbox và cộng -> kết quả ◼ Cơ chế event ❑ Button đưa ra sự kiện click: đối tượng publish ❑ Form quan tâm đến sự kiện click của button, Form có sẽ phần xử lý ngay khi button click. ❑ Phần xử lý của form gọi là Event Handler ❑ Form đóng vai trò là lớp subscribe Nguyễn Văn Phong 35
36. Khai báo event handler ◼ Kích đúp vào button Add trên màn hình thiết kế cho phép tạo event handler cho sự kiện này. event DClick Cửa sổ quản lý event của BtnAdd Nguyễn Văn Phong 36
37. Khai báo event handler Event handler cho button Add Cùng signature method với System.EventHandler Nguyễn Văn Phong 37
38. Khai báo event handler InitializeComponent Sự kiện click Trình xử lý được gọi khi event xảy ra Delegate chuẩn cho event handler Nguyễn Văn Phong 38
39. Viết phần xử lý ◼ Phần xử lý của Form1 khi button click ❑ Lấy giá trị của 2 textbox, cộng kết quả và xuất ra MeesageBox Nguyễn Văn Phong 39
40. Phương thức của lớp Form ◼ Các hành động có thể thực hiện trên form ❑ Activate: cho form nhận focus ❑ Close: đóng và giải phóng resource ❑ Hide: ẩn form ❑ Refresh: tô vẽ lại ❑ Show: cho form show ra màn hình (modeless) và activate ❑ ShowDialog: hiển thị dạng modal ❑ Find Dialog chính là dạng modeless ❑ Font dialog dạng modal Nguyễn Văn Phong 40
41. Event của Form ◼ Tạo xử lý cho event ❑ Trong cửa sổ properties ❑ Chọn biểu tượng event ❑ Kích đúp vào tên event ◼ Event thường dùng ❑ Load: xuất hiện trước khi form xuất hiện lần đầu tiên ❑ Closing: xuất hiện khi form đang chuẩn bị đóng ❑ Closed: xuất hiện khi form đã đóng ❑ Resize: xuất hiện sau khi user resize form Tên event ❑ Click: xuất hiện khi user click lên nền form ❑ KeyPress: xuất hiện khi form có focus và user nhấn phím Trình xử lý nếu có Nguyễn Văn Phong 41
42. Event của Form ◼ Ví dụ chương trình sẽ hỏi user xác nhận trước khi đóng ứng dụng. ❑ Kích đúp vào item FormClosing trong cửa sổ event ❑ Hàm Form1_FormClosing được tạo và gắn với sự kiện FormClosing ❑ Viết code cho event handler Form1_FormClosing this.FormClosing += new FormClosingEventHandler( this.Form1_FormClosing ); Nguyễn Văn Phong 42
43. Kiểm tra dữ liệu nhập ◼ Nếu user nhập vào chuỗi thì chương trình trên sẽ lỗi! ◼ Khắc phục: ❑ Cảnh báo user nhập không đúng dạng ❑ Xóa những ký tự không hợp lệ đó ◼ Sử dụng control ErrorProvider để cảnh báo lỗi khi user nhập không đúng ❑ Trong Design View: kéo ErrorProvider từ ToolBox/Component vào form ❑ Chặn xử lý sự kiện TextChanged khi user nhập liệu vào textbox ❑ Nếu nhập sai thiết lập lỗi cho control ErrorProvider cảnh báo! Nguyễn Văn Phong 43
44. Bổ sung ErrorProvider Kéo thả ErrorProvider vào design view Nguyễn Văn Phong 44
45. Xử lý sự kiện TextChanged của textBox Phần kiểm tra Nguyễn Văn Phong 45
46. ErrorProvider cảnh báo Icon hiển thị lỗi Di chuyển chuột vào icon, tooltip xuất hiện Nguyễn Văn Phong 46
47. Tóm tắt ◼ Tổng quan lập trình GUI ◼ Cơ chế Event Driven Programming ◼ Ứng dụng Windows Form cơ bản ◼ Sử dụng Visual Studio .NET 2005 tạo ứng dụng WF ❑ Windows Form Application ❑ Sử dụng control: text, label, button ❑ Xử lý sự kiện cho button, form ❑ Sử dụng ErrorProvider Nguyễn Văn Phong 47
48. Nguyễn Văn Phong 48