Lập trình giao diện Graphical User Interface (GUI)

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 Viết phần xử lý cơ bản GUI Command line interface: CLI Text user interface: TUI 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 GUI Tương tác qua giao diện đồ họa độ phân giải cao Graphical User Interface: GUI Đa số các hệ OS hiện đại đều dùng GUI Cho phép user dễ dàng thao tác 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 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 Event- Driven Programming 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 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 Cách truyền thống Event-Driven Programming 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 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 Lấy dữ liệu từ textbox Add vào listbox invoke Button đưa ra sự kiện click Form có event handler cho click của button 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 Windows Forms Application 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 Minh họa WinForm App Tạo WinForm App Tạo project: Windows App Tạo WinForm App từ VS Windows App do VS khởi tạo 1 2 3 4 1: form ứng dụng 2: control toolbox 3: Solution Explorer 4: Form properties Ứng Dụng WinForm đơn giản Lớp Form cơ sở Control kiểu Label Chạy ứng dụng với Form1 làm form chính Thiết kế form & control Add control vào form Form1.cs 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! 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. Các thuộc tính của Form 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 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ó 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 ); 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 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 Windows Form Fig. 12.3 Components and controls for Windows Forms. Tổng quan controls Truy xuất đến thuộc tính của đối tượng • Cú pháp . Tổng quan controls Gán giá trị cho thuộc tính của đối tượng • Cú pháp . = Giá trị; 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 Thuộc tính controls 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 . ( [ Các tham sô ] ) Ví dụ Phương thức di chuyển con trỏ vào 1 đối tượng .Focus(); 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. ( [ 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 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. Ví dụ Màu xanh: Color.Blue Màu đỏ: Color.Red Màu trắng: Color.White Màu đen: Color.Black … 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 .BackColor = Color.Màu; Cách tô màu chữ của Textbox .ForeColor = Color.Màu; 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 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) … Tổng quan controls Các hàm thường dùng Hàm xuất thông báo MessageBox.Show (“”); Ví dụ: MessageBox.Show (“Xin chào!”); MessageBox.Show (“”, “”); Ví dụ: MessageBox.Show (“Xin chào!”, “Welcome”); Hàm đổi chuỗi thành số nguyên int.Parse() Ví dụ: int.Parse (“123”) 123 Control Layout - Anchor None FixedSingle Fixed3D FixedDialog Sizable FormBorderStyle 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 Control Layout - Anchor Button được neo biên trái Button tự do 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 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 Control Layout - Anchor Neo theo bốn phía 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 TreeView gắn bên trái ListView gắn bên phải Control Layout - Docking Left Right Bottom None Fill Top Control Layout - Docking TextBox Dock = None Dock = Top Dock = Fill TextBox.Multiline = True Dock = Bottom Control Layout - Alignment Control Layout - Alignment Control Layout - Alignment Control Layout - Alignment Các Control Label, TextBox, Button 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 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 Label, TextBox, Button Labels, TextBoxes and Buttons Labels (lbl) Khai báo và khởi tạo đối tượng Lable Cách 1: Thiết kế Cách 2: Code void CreateControls() { Label lb = new Label(); lb.Text = "This is Lable Object"; this.Controls.Add(lb); } Label, TextBox, Button Label, TextBox, Button Label, TextBox, Button Demo TextBox Chuyển thành chữ hoa Double click vào textbox để tạo event handler cho event TextChanged Labels, TextBoxes and Buttons Khai báo và khởi tạo đối tượng Text Cách 1: Thiết kế Cách 2: Code void CreateControls() { TextBox txt = new TextBox(); txt.Name = "txtHoLot"; txt.Text = "This is TextBox Object"; this.Controls.Add(txt); } Labels, TextBoxes and Buttons Button Derived from ButtonBase Used to run/activate an Event Procedure Click event Ví dụ: private void btnThoat_Click(object sender, EventArgs e) { this.Close(); } Label, TextBox, Button Label, TextBox, Button Labels, TextBoxes and Buttons Khai báo và khởi tạo đối tượng Button void CreateControls() { Button btn = new Button(); btn.Name = "btnSave"; btn.Text = "&Save"; this.Controls.Add(btn); } Thêm control vào form Kéo thả control vào form Code của phần design Phần code thiết kế Form1 được tạo tự động Khai báo các đối tượng control trên Form1 Chứa code khởi tạo control Form1.Designer.cs Code của phần design Tạo đối tượng Lần lượt khai báo các thuộc tính cho các control InitializeComponent Code của phần design InitializeComponent Đưa các control vào danh sách control của Form1 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 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 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. DClick Cửa sổ quản lý event của BtnAdd event Khai báo event handler Event handler cho button Add Cùng signature method với System.EventHandler 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 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 MessageBox 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! Bổ sung ErrorProvider Kéo thả ErrorProvider vào design view Xử lý sự kiện TextChanged của textBox Phần kiểm tra ErrorProvider cảnh báo Icon hiển thị lỗi Di chuyển chuột vào icon, tooltip xuất hiện Bài tập 1- Trang 1 CheckBox RadioButton Các Control CheckBox Control đưa ra một giá trị cho trước và user có thể Chọn giá trị khi Checked = true Không chọn giá trị: Checked = false Lớp đại diện CheckBox Appearance Checked CheckedChanged ThreeState Text Properties CheckBox CheckBox CheckBox ThreeState = true : cho phép thiết lập 3 trạng thái: Checkstate = Indeterminate: không xác định CheckState= Checked: chọn CheckState= Unchecked: không chọn Chưa chọn * CheckBox Khai báo và khởi tạo đối tượng CheckBox void CreateControl() { CheckBox chk = new CheckBox(); chk.Name = "chkID"; chk.Text = "Full Detail"; chk.Checked = true; this.Controls.Add(chk); } RadioButton Cho phép user chọn một option trong số nhóm option Khi user chọn 1 option thì tự động option được chọn trước sẽ uncheck Các radio button chứa trong 1 container (form, GroupBox, Panel, TabControl) thuộc một nhóm. Lớp đại diện: RadioButton Khác với nhóm CheckBox cho phép chọn nhiều option, còn RadioButton chỉ cho chọn một trong số các option. Checked CheckedChanged Text Appearance RadioButton Nhóm RadioButton thứ 2 chứa trong GroupBox2 Nhóm RadioButton thứ 1 chứa trong GroupBox1 RadioButton RadioButton Khai báo và khởi tạo đối tượng RadioButton void CreateControl() { RadioButton rd = new RadioButton(); rd.Name = "rdMale"; rd.Text = "Male"; rd.Checked = true; this.Controls.Add(rd); } RadioButton Bài Tập ListBox & ComboBox Các Control ListBox & ComboBox ListBox Cung cấp một danh sách các item cho phép user chọn ListBox cho phép hiển thị scroll nếu các item vượt quá vùng thể hiện của ListBox Items MultiColumn SelectedIndex SelectedItem ListBox SelectedItems Sorted Text Properties ListBox & ComboBox Method & Event ListBox ClearSelected FindString GetSelected SetSelected SelectedIndexChanged SelectedValueChanged Method Event ListBox & ComboBox ListBox & ComboBox ListBox & ComboBox ListBox & ComboBox Khai báo và khởi tạo đối tượng ComboBox void CreateControls() { ListBox lst = new ListBox(); lst.Name = "lstMonHoc"; lst.Text = "Lập Trinh C#"; lst.Items.Add("Console"); lst.Items.Add("Window Form"); lst.Items.Add("Hướng đối tượng"); lst.Location = new System.Drawing.Point(200, 300); this.Controls.Add(lst); } ListBox & ComboBox ListBox & ComboBox Thuộc tính Items cho phép thêm item vào ListBox Danh sách item Cho phép thêm item trong màn hình thiết kế form ListBox & ComboBox ListBox hiển thị dạng Multi Column Hiển thị nhiều cột ListBox & ComboBox Demo ListBox Kiểm tra xem chuỗi nhập có trong list box? - Nếu có: select item đó - Ngược lại: thêm chuỗi mới vào list box ListBox & ComboBox Sự kiện SelectedIndexChanged SelectedIndexChanged Mỗi khi kích chọn vào item trong listbox  sẽ xóa item được chọn tương ứng ListBox & ComboBox ComboBox Kết hợp TextBox với một danh sách dạng drop down Cho phép user kích chọn item trong danh sách drop down ComboBox Items DropDownStyle Sorted Text AutoCompleteMode MaxDropDownItems DropDownHeight ListBox & ComboBox ListBox & ComboBox ListBox & ComboBox ListBox & ComboBox Khai báo và khởi tạo đối tượng ComboBox void CreateControls() { ComboBox cb = new ComboBox(); cb.Name = "cboCountry"; cb.Text = "Viet Nam"; this.Controls.Add(cb); } ListBox & ComboBox ListBox & ComboBox DropDownStyle ListBox & ComboBox Bổ sung item trong màn hình design view //Sử dụng phương thức ADD Combobox for(int i=1; i<=12;i++) cboThu.Items.Add("Mon "+i.ToString()); ListBox & ComboBox Mỗi khi kích chọn một item  hiển thị item được chọn trên MessageBox ListBox & ComboBox Tính năng AutoComplete Gõ “Ng” AutoCompleteMode AutoCompleteSource AutoComplete ListBox & ComboBox Sử dụng biến cố SelectionChangeCommitted private void cboThu_SelectionChangeCommitted(object sender, EventArgs e) { MessageBox.Show(cboThu.SelectedText, "LẬP TRÌNH C#"); MessageBox.Show(cboThu.SelectedItem.ToString(), "C# căn bản"); } ListBox & ComboBox Sử dụng phương thức AddRange string[] week = new string[7] { "Sun", "Mon", "TUE", "Wed", "Thu ", "Fri", "Sat" }; cboTM.Items.AddRange(week); cboTM.DisplayMember = "Name"; cboTM.ValueMember = "Value"; Sử dụng thuộc tính SelectedValue private void cboThu_SelectedValueChanged(object sender, EventArgs e) { MessageBox.Show("Value := " + Convert.ToString(cboThu.SelectedValue), "ComBo Box"); } CheckedListBox Tương tự như list box nhưng mỗi item sẽ có thêm check box. CheckedItems CheckedIndices SelectedIndices SelectedIndices MultiColumn SelectionMode Properties Method ClearSelected SetSelected SelectedIndexChanged SelectedValueChanged Items CheckedListBox CheckedListBox Thuộc tính Items lưu trữ danh sách item Có thể bổ sung vào thời điểm Design time Run time Item được check Item được select CheckedListBox Khởi tạo và khai báo đối tượng CheckedListBox void CreateControls() { CheckedListBox chkl = new CheckedListBox(); chkl.Name = "chkCertificate"; chkl.Sorted = true; chkl.Items.Add("B.A"); chkl.Items.Add("M.B.A"); chkl.Location = new System.Drawing.Point(300, 400); this.Controls.Add(chkl); } CheckedListBox MultiColumn = true Các item được tổ chức theo nhiều cột CheckedListBox Sự kiện SelectedIndexChanged Các Control GroupBox, Panel & TabControl GroupBox & Panel Bố trí controls trên GUI GroupBox Hiển thị một khung bao quanh một nhóm control Có thể hiển thị một tiêu đề Thuộc tính Text Khi xóa một GroupBox thì các control chứa trong nó bị xóa theo Lớp GroupBox kế thừa từ System.Windows.Forms.Control Panel Chứa nhóm các control Không có caption Có thanh cuộn (scrollbar) Xem nhiều control khi kích thước panel giới hạn GroupBox & Panel GroupBox & Panel Minh họa GroupBox groupBox1 chứa 2 control textBox1 và button1 textBox2 và button2 chứa trong Controls của Form GroupBox & Panel Minh họa Panel scroll TabControl Dạng container chứa các control khác Cho phép thể hiện nhiều page trên một form duy nhất Mỗi page chứa các control tương tự như group control khác. Mỗi page có tag chứa tên của page Kích vào các tag để chuyển qua lại giữa các page Ý nghĩa: Cho phép thể hiện nhiều control trên một form Các control có cùng nhóm chức năng sẽ được tổ chức trong một tab (page) TabControl TabControl có thuộc tính TabPages Chứa các đối tượng TabPage TabControl TabPage TabPage Buttons TabControl Thuộc tính Appearance Normal FlatButton TabControl Thuộc tính, phương thức & sự kiện thường dùng Multiline SelectedIndex SelectedTab TabCount TabPages SelectedIndexChanged Event Properties Method SelectTab DeselectTab TabControl Thêm/Xóa TabPage Kích chuột phải Thêm/Xóa TabPage TabControl Chỉnh sửa các TabPage Chọn thuộc tính TabPages của TabControl Sử dụng màn hình TabPage Collection Editor để chỉnh sửa PictureBox Sử dụng để hiển thị ảnh dạng bitmap, metafile, icon, JPEG, GIF. Sử dụng thuộc tính Image để thiết lập ảnh lúc design hoặc runtime. Các thuộc tính Image: ảnh cần hiển thị SizeMode: Normal StretchImage AutoSize CenterImage Zoom PictureBox 5 pictureBox với các SizeMode tương ứng ImageList Cung cấp tập hợp những đối tượng image cho các control khác sử dụng ListView TreeView Các thuộc tính thường dùng ColorDepth: độ sâu của màu Images: trả về ImageList.ImageCollection ImageSize: kích thước ảnh TransparentColor: xác định màu sẽ transparent ImageList Các bước sử dụng ImageList Kéo control ImageList từ ToolBox thả vào Form Thiết lập kích thước của các ảnh: ImageSize Bổ sung các ảnh vào ImageList qua thuộc tính Images Sử dụng ImageList cho các control Khai báo nguồn image là image list vừa tạo cho control Thường là thuộc tính ImageList Thiết lập các item/node với các ImageIndex tương ứng Việc thiết lập có thể ở màn hình design view hoặc code view