1 / 196

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

Chương 3. LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI). 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

dori
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related