LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)

1. Chương 3 LẬP TRÌNH GIAO DIỆNGraphical User Interface (GUI)

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 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 2

3. GUI Text user interface: TUI Command line interface: CLI Tương tác qua keyboard Thực thi tuần tự GUI dựa trên text Mức độ tương tác cao hơn 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 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 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 6

7. Event- Driven Programming Event-Driven Programming Cách truyền thống Các đối tượng có thể kích hoạt sự 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 phụ thuộc vào sự kiện kế tiếp Luồng chương trình được điều kiển bởi sự tương tác User-Computer Danh sách các lệnh thực thi tuần tự Việc kế tiếp xảy ra chính là lệnh tiếp theo trong danh sách Chương trình được thực thi bởi máy tính 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 8

9. Event-Driven Programming Minh họa xử lý trong form Click User nhập text vào texbox -> click Button để add chuỗi nhập vào listbox invoke 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 9

10. Event-Driven Programming GUI-based events Mouse move Mouse click Mouse double-click Key press Button click Menu selection Change in focus Window activation … Event Danh sách event cho Form 10

11. Windows Forms Application 11

12. 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 12

13. Minh họa WinForm App 13

14. Tạo WinForm App Tạo project: Windows App 14

15. Tạo WinForm App từ VS. 2005 (3) Windows App do VS.2005 khởi tạo 2 1 3 1: form ứng dụng 2: control toolbox 3: Solution Explorer 4: Form properties 4 15

16. Ứng Dụng 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 16

17. Các bước tạo ứng dụng 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! 17

18. Form và control Tất cả các thành phần trên form đều là đối tượng Các class control System.Windows.Forms.Label System.Windows.Forms.TextBox System.Windows.Forms.Button … Các control là instance của các lớp trên. object object object object object object 18

19. Các thuộc tính của Form 19

20. 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 20

21. 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 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 Tên event Trình xử lý nếu có 21

22. 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); 22

23. Property & layout của control Anchor Docking Các control Label, textbox, button CheckBox, RadioButton, CheckedListBox, ListBox, Combobox, CheckListBox GroupBox, Panel & TabControl PictureBox, ImageList TrackBar NumericUpDown DomainUpDown ProgressBar MaskEditBox DateTimePicker MonthCalendar Timer ToolTip Mouse Event handling Keyboard event handling Tổng quan controls 23

24. Tổng quan controls • Control là một thành phần cơ bản trên form • Có các thành phần • Thuộc tính • Phương thức • Sự kiện • Tất cả các control chứa trong namespace: System.Windows.Forms

25. Windows Form Fig. 12.3 Components and controls for Windows Forms.

26. Tổng quan controls • Truy xuất đến thuộc tính của đối tượng • Cú pháp <Tên đối tượng>.<Thuộc tính>

27. Tổng quan controls Gán giá trị cho thuộc tính của đối tượng • Cú pháp <Tên đối tượng>.<Thuộc tính>= Giá trị; 27

28. Tổng quan controls Một số thuộc tính của control Text: mô tả text xuất hiện trên control Focus: phương thức chuyển focus vào control TabIndex: thứ tự của control nhận focus Mặc định được VS.NET thiết lập – Tuy nhiên người lập trình có thể điểu chỉnh Enable: thiết lập trạng thái truy cập của control Visible: ẩn control trên form, có thể dùng phương thức Hide Anchor: Neo giữ control ở vị trí xác định Cho phép control di chuyển theo một vị trí khi kích thước của đối tượng chứa nó thay đổi Size: xác nhận kích thước của control 28

29. Thuộc tính controls

30. Tổng quan controls Lệnh gọi thực hiện 1 phương thức (method) của đối tượng Phương thức của đối tượng dùng để thực hiện một hành động liên quan đến đối tượng đó Cú pháp <Tên đối tượng>.<Phương thức> ( [ Các tham sô ] ) Ví dụ Phương thức di chuyển con trỏvào 1 đối tượng <Tên đối tượng>.Focus(); 30

31. Tổng quan controls Sửdụng thư viện các lớp đối tượng Thời gian: Sửdụng lớp đối tượng DateTime Cú pháp DateTime.<Hàm liên quan đến thời gian> ( [ Các tham số ] ) Ví dụ: Lấy ngày giờ hiện hành của máy tính DateTime.Now Lấy giờ hiện hành của máy tính DateTime.Now. TimeOfDay 31

32. Tổng quan controls Sửdụng thư viện các lớp đối tượng Màu sắc: Sửdụng lớp đối tượng Color Cú pháp Color.<Thuộc tính màu sắc> Ví dụ Màu xanh: Color.Blue Màu đỏ: Color.Red Màu trắng: Color.White Màu đen: Color.Black … 32

33. Tổng quan controls Sửdụng thư viện các lớp đối tượng Màu sắc: Cách tô màu nền của Textbox <Tên Textbox>.BackColor = Color.Màu; Cách tô màu chữcủa Textbox <Tên Textbox>.ForeColor = Color.Màu; 33

34. Tổng quan controls Các hàm toán học Sửdụng lớp đối tượng Math Cú pháp Math.<Các hàm tóan học> ( [ Các tham số] ) Ví dụ Lấy căn bậc 2: Math.Sqrt(giá trị) Lũy thừa x^y: Math.Pow(x,y) Làm tròn số: Math.Round(giá trị) Tìm Max 2 số: Math.Max(giá trị 1, giá trị 2) Tìm Min 2 số: Math.Min(giá trị 1, giá trị 2) … 34

35. Tổng quan controls Các hàm thường dùng Hàm xuất thông báo MessageBox.Show (“<Noi dung>”); Ví dụ: MessageBox.Show (“Xin chào!”); MessageBox.Show (“<Noi dung>”, “<Tiêu dê>”); Ví dụ: MessageBox.Show (“Xin chào!”, “Welcome”); Hàm đổi chuỗi thành số nguyên int.Parse(<chuoi sô>) Ví dụ: int.Parse (“123”) 123 35

36. Control Layout - Anchor None Sizable FormBorderStyle FixedDialog Fixed3D FixedSingle

37. Control Layout - Anchor • Khi FormBorderStyle = Sizable, form cho phép thay đổi kích thước khi Runtime • Sự bố trí của control có thể thay đổi theo • Sử dụng thuộc tính Anchor • Cho phép control phản ứng lại với thao tác resize của form • Control có thể thay đổi vị trí tương ứng với việc resize của form • Control cố định không thay đổi theo việc resize của form • Các trạng thái neo • Left: cố định theo biên trái • Right: cố định theo biên phải • Top: cố định theo biên trên • Bottom: cố định theo biên dưới

38. Control Layout - Anchor Button được neo biên trái Vị trí tương đối với biên trái không đổi Di chuyển tương ứng theo kích thước mới Button tự do

39. Control Layout - Anchor • Thiết lập Anchor cho control Chọn các biên để neo Biên được chọn neo, màu đậm

40. Control Layout - Anchor Neo theo bốn phía

41. Control Layout - Docking • Các control có thể gắn (dock) với một cạnh nào đó của form, hoặc container của control. Windows Explorer ListView gắn bên phải TreeView gắn bên trái

42. Control Layout - Docking Top Fill Left Right Bottom None

43. Control Layout - Docking Dock = None Dock = Top TextBox Dock = Fill TextBox.Multiline = True Dock = Bottom

44. Control Layout - Alignment

45. Control Layout - Alignment

46. Control Layout - Alignment

47. Control Layout - Alignment

48. Các Control Label, TextBox, Button

49. Label, TextBox, Button • Label • Cung cấp chuỗi thông tin chỉ dẫn • Chỉ đọc • Được định nghĩa bởi lớp Label • Dẫn xuất từ Control • TextBox • Thuộc lớp TextBox • Vùng cho phép user nhập dữ liệu • Cho phép nhập dạng Password • Button • Cho phép cài đặt 1 hành động. • Dẫn xuất từ ButtonBase

50. Labels, TextBoxes and Buttons Labels (lbl) Provide text instruction Read only text, cannot by modified by user. Defined with class Label1 Derived from class Control lblMessage btnPush btnExit