Bài giảng Lập trình Windows - Chương 3: Lập trình giao diện (GUI)

1LẬP TRÌNH GIAO DIỆN Graphical User Interface (GUI)Chương 32Nội DungGraphical 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ẩnCách tạo ứng dụng Windows FormTạo ứng dụng FormChỉnh sửa formThêm component vào formViết phần xử lý cơ bản3GUICommand line interface: CLIText user interface: TUITương tác qua keyboardThực thi tuần tự GUI dựa trên textMức độ tương tác cao hơn4GUITương tác qua giao diện đồ họa độ phân giải caoGraphical User Interface: GUIĐa số các hệ OS hiện đại đều dùng GUICho phép user dễ dàng thao tác5GUIsChương trình hiện đại đều dùng GUIGraphical: text, window, menu, buttonUser: người sử dụng chương trìnhInterface: cách tương tác chương trìnhThành phần đồ họa điển hìnhWindow: một vùng bên trong màn hình chínhMenu: liệt kê những chức năngButton: nút lệnh cho phép click vàoTextBox: cho phép user nhập dữ liệu text6GUI ApplicationWindows 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 .NETSystem.Windows.Forms: Chứa GUI components/controls và formSystem.Drawing: Chức năng liên quan đến tô vẽ cho thành phần GUICung cấp chức năng truy cập đến GDI+ cơ bản7Event- 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áchChương trình được thực thi bởi máy tínhCá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ếpLuồng chương trình được điều kiển bởi sự tương tác User-ComputerCách truyền thốngEvent-Driven Programming8Event-Driven ProgrammingChương trình GUI thường dùng Event-Drive ProgrammingChươ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ệnListener: đối tượng chờ cho sự kiện xuất hiệnEvent handler: phương thức phản ứng lại sự kiện9Event-Driven ProgrammingMinh họa xử lý trong formClickUser nhập text vào texbox -> click Button để add chuỗi nhập vào listboxLấy dữ liệu từ textboxAdd vào listboxinvokeButton đưa ra sự kiện clickForm có event handler cho click của button10Event-Driven ProgrammingGUI-based eventsMouse moveMouse clickMouse double-clickKey pressButton clickMenu selectionChange in focusWindow activationEventDanh sách event cho Form11Windows Forms Application12Windows Form AppSử dụng GUI làm nền tảngEvent-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ầnMenuToolbarStatusBarTextBox, Label, ButtonLớp cơ sở cho các form của ứng dụng là FormSystem.Windows.Forms. FormNamespaceClass13Minh họa WinForm App14Tạo WinForm AppTạo project: Windows App15Tạo WinForm App từ VS. 2005 (3)Windows App doVS.2005 khởi tạo12341: form ứng dụng2: control toolbox3: Solution Explorer4: Form properties16Ứng Dụng WinForm đơn giảnLớp Form cơ sởControl kiểu LabelChạy ứng dụng với Form1 làm form chínhThiết kế form & controlAdd control vào formForm1.cs17Các bước tạo ứng dụng WinForm cơ bảnTạ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, textboxThiết kế layout cho form (bố trí control)Hiệu chỉnh kích thước, trình bày, giao diện choformControl chứa trong formViết các xử lý cho các control trên form và các xử lý khácHiển thị FormThông qua lớp Application gọi phương thức RunNên sử dụng IDE hỗ trợ thiết kế GUI!18Form và controlTất cả các thành phần trên form đều là đối tượngCác class controlSystem.Windows.Forms.LabelSystem.Windows.Forms.TextBoxSystem.Windows.Forms.ButtonCác control là instance của các lớp trên.objectobjectobjectobjectobjectobject19Các thuộc tính của FormPropertyDescriptionDefaultNameTên của form sử dụng trong projectForm1,Form2AcceptButtonThiết lập button là click khi user nhấn EnterCancelButtonThiết lập button là click khi user nhấn EscControlBoxHiển thị control box trong caption barTrueFormBorderStyleBiên của form: none, single, 3D, sizableSizableStartPositionXác định vị trí xuất hiện của form trên màn hìnhWindowsDefaultLocationTextNội dung hiển thị trên title barForm1, Form2, Form3FontFont cho form và mặc định cho các controlMethodDescriptionCloseĐóng form và free resourceHideẩn formShowHiển thị form đang ẩnEventDescriptionLoadXuất hiện trước khi form show20Phương thức của lớp FormCác hành động có thể thực hiện trên formActivate: cho form nhận focusClose: đóng và giải phóng resourceHide: ẩn formRefresh: tô vẽ lạiShow: cho form show ra màn hình (modeless) và activateShowDialog: hiển thị dạng modalFind Dialog chính là dạng modelessFont dialog dạng modal21Event của FormTạo xử lý cho eventTrong cửa sổ propertiesChọn biểu tượng eventKích đúp vào tên eventEvent thường dùngLoad: xuất hiện trước khi form xuất hiện lần đầu tiênClosing: xuất hiện khi form đang chuẩn bị đóngClosed: xuất hiện khi form đã đóngResize: xuất hiện sau khi user resize formClick: xuất hiện khi user click lên nền formKeyPress: xuất hiện khi form có focus và user nhấn phímTên eventTrình xử lý nếu có22Event của FormVí 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ổ eventHàm Form1_FormClosing được tạo và gắn với sự kiện FormClosingViết code cho event handler Form1_FormClosing this.FormClosing += new FormClosingEventHandler( this.Form1_FormClosing );23Property & layout của controlAnchorDockingCác control Label, textbox, buttonCheckBox, RadioButton, CheckedListBox,ListBox, Combobox, CheckListBoxGroupBox, Panel & TabControlPictureBox, ImageListTrackBarNumericUpDownDomainUpDownProgressBarMaskEditBoxDateTimePickerMonthCalendarTimerToolTipMouse Event handlingKeyboard event handlingTổng quan controls24Tổng quan controlsControl là một thành phần cơ bản trên formCó các thành phầnThuộc tínhPhương thứcSự kiệnTất cả các control chứa trong namespace: System.Windows.FormsWindows FormFig. 12.3 Components and controls for Windows Forms. 26Tổng quan controlsTruy xuất đến thuộc tính của đối tượng • Cú pháp .27Tổng quan controlsGán giá trị cho thuộc tính của đối tượng • Cú pháp . = Giá trị;28Tổng quan controlsMột số thuộc tính của controlText: mô tả text xuất hiện trên controlFocus: phương thức chuyển focus vào controlTabIndex: thứ tự của control nhận focusMặc định được VS.NET thiết lập – Tuy nhiên người lập trình có thể điểu chỉnhEnable: thiết lập trạng thái truy cập của controlVisible: ẩn control trên form, có thể dùng phương thức HideAnchor: Neo giữ control ở vị trí xác địnhCho 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 đổiSize: xác nhận kích thước của control29Thuộc tính controlsCommon PropertiesDescriptionBackColorMàu nền của controlBackgroundImageẢnh nền của controlForeColorMàu hiển thị text trên formEnabledXác định khi control trạng thái enableFocusedXác định khi control nhận focusFontFont hiển thị text trên controlTabIndexThứ tự tab của controlTabStopNếu true, user có thể sử dụng tab để select controlTextText hiển thị trên formTextAlignCanh lề text trên controlVisibleXác định hiển thị control30Tổng quan controlsLệnh gọi thực hiện 1 phương thức (method) của đối tượngPhươ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();31Tổng quan controlsSử dụng thư viện các lớp đối tượngThời gian:Sử dụng lớp đối tượng DateTimeCú phápDateTime. ( [ Các tham số ] )Ví dụ:Lấy ngày giờ hiện hành của máy tính DateTime.NowLấy giờ hiện hành của máy tính DateTime.Now. TimeOfDay32Tổng quan controlsSử dụng thư viện các lớp đối tượngMàu sắc:Sử dụng lớp đối tượng ColorCú 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 33Tổng quan controlsSử dụng thư viện các lớp đối tượngMà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;34Tổng quan controlsCác hàm toán họcSử dụng lớp đối tượng MathCú 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) 35Tổng quan controlsCác hàm thường dùngHàm xuất thông báoMessageBox.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ênint.Parse()Ví dụ: int.Parse (“123”) 12336Control Layout - AnchorNoneFixedSingleFixed3DFixedDialogSizableFormBorderStyle37Control Layout - AnchorKhi FormBorderStyle = Sizable, form cho phép thay đổi kích thước khi RuntimeSự bố trí của control có thể thay đổi theoSử dụng thuộc tính AnchorCho phép control phản ứng lại với thao tác resize của formControl có thể thay đổi vị trí tương ứng với việc resize của formControl cố định không thay đổi theo việc resize của formCác trạng thái neoLeft: cố định theo biên tráiRight: cố định theo biên phảiTop: cố định theo biên trênBottom: cố định theo biên dưới38Control Layout - AnchorButton được neo biên tráiButton tự doVị trí tương đối với biên trái không đổiDi chuyển tương ứng theo kích thước mới39Control Layout - AnchorThiết lập Anchor cho controlChọn các biên để neoBiên được chọn neo,màu đậm40Control Layout - AnchorNeo theo bốn phía41Control Layout - DockingCá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 ExplorerTreeView gắn bên tráiListView gắn bên phải42Control Layout - DockingLeftRightBottomNoneFillTop43Control Layout - DockingTextBoxDock = NoneDock = TopDock = FillTextBox.Multiline = TrueDock = Bottom44Control Layout - AlignmentẢnhÝ nghĩaCanh lề trái, phải, trên, dướiCanh khoảng cách đều theo chiều dọc, ngang giữa các controlCanh đều kích thước các control.  Lưu ý: Kích thước của control được chọn đầu tiên trong danh sách các control chọn sẽ quyết định kích thước cho toàn bộ controlControl Layout - AlignmentẢnhÝ nghĩaCác control được sắp canh liền tiếp nhau theo chiều ngang. Lưu ý: Khoảng cách giữa control đầu và cuối sẽ được tính sao cho các control còn lại cách đềuXóa khoảng cách canh đều sắp liền tiếp nhau theo chiều ngangTăng hoặc giảm khoảng cách canh liền tiếp nhau theo chiều ngang45Control Layout - AlignmentẢnhÝ nghĩaCác control được sắp canh liền tiếp nhau theo chiều dọcXóa khoảng cách canh đều sắp liền tiếp nhau theo chiều dọcTăng hoặc giảm khoảng cách canh liền tiếp nhau theo chiều dọc46Control Layout - AlignmentẢnhÝ nghĩaCanh control ở giữa form theo chiều ngang (dọc)Xét control nằm chồng lên hoặc nằm dưới 2 control nằm lên nhauThiết lập thứ tự Tab Index cho các control. Các control sẽ được đánh thứ tự từ 0->N.Khi người dùng nhấn Tab trong chương trình thì các control sẽ được focus theo thứ tự qui định.4748Các ControlLabel, TextBox, Button49Label, TextBox, ButtonLabelCung cấp chuỗi thông tin chỉ dẫnChỉ đọcĐược định nghĩa bởi lớp LabelDẫn xuất từ ControlTextBoxThuộc lớp TextBoxVùng cho phép user nhập dữ liệuCho phép nhập dạng PasswordButtonCho phép cài đặt 1 hành động.Dẫn xuất từ ButtonBaseLabels, TextBoxes and ButtonsLabels (lbl) Provide text instructionRead only text, cannot by modified by user.Defined with class Label1Derived from class Control lblMessagebtnPushbtnExit51Label, TextBox, ButtonLabelThuộc tính thường dùngFontFont hiển thị của LabelTextNội dung text hiển thịTextAlignCanh lề chuỗi trình bày trên điều khiểnForeColorMàu textVisibleTrạng thái hiển thịBorderStyleKiểu đường viền của điều khiểnFlatStyleKiểu hiển thị điều khiển theo hệ thống hay chuẩn như đã thiết kếLabels, TextBoxes and ButtonsLabels (lbl) Khai báo và khởi tạo đối tượng LableCá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); } lbbtnPushbtnExit53Label, TextBox, ButtonTextBoxThuộc tính thường dùngFontFont hiển thị của textTextNội dung text hiển thịTextAlignCanh lề textForeColorMàu textVisibleTrạng thái hiển thịEnabledVô hiệu hóa hay cho phép sử dụngMaxLengthSố lượng ký tự lớn nhất cho phép nhậpPasswordGiá trị được nhập thay thế bởi ký tự bạn khai báo trong thuộc tính nàyReadonlyGiá trị true chỉ cho phép đọc giá trịWordWrapTự động xuống dòng nếu chuỗi giá trị dài hơn kích thước của điều khiển54Label, TextBox, ButtonTextBoxThuộc tính thường dùngAcceptsReturnNếu true: nhấn enter tạo thành dòng mới trong chế độ multilineMultilineNếu true: textbox ở chế độ nhiều dòng, mặc định là falseScrollBarsThanh cuộn cho chế độ multilineEvent thường dùngTextChangedKích hoạt khi text bị thay đổi, trình xử lý được khởi tạo mặc định khi kích đúp vào textbox trong màn hình design viewMouseClickXảy ra khi người sử dụng Click trên điều khiển TextBox55Label, TextBox, ButtonDemo TextBoxChuyển thành chữ hoaDouble click vào textbox để tạo event handler cho event TextChangedLabels, TextBoxes and ButtonsKhai báo và khởi tạo đối tượng TextCá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); } txtHoLottxtTenlblHoLotlblTenbtnHoLotlblHoVaTenLabels, TextBoxes and ButtonsButtonDerived from ButtonBaseUsed to run/activate an Event ProcedureClick eventVí dụ:private void btnThoat_Click(object sender, EventArgs e) { this.Close(); }58Label, TextBox, ButtonButtonThuộc tính thường dùngTextChuỗi hiển thị trên bề mặt buttonFlatStyleKiểu đường viền của điều khiển ButtonImageChọn Image trong phần Resource để trình bày hình trên điều khiển ButtonTextAlignCanh lề diễn giải trên điều khiển59Label, TextBox, ButtonButtonEvent thường dùngClickKích hoạt khi user kích vào button, khai báo mặc định khi người lập trình kích đúp vào button trong màn hình Design View của Form.MouseClickXảy ra khi người sử dụng Click trên điều khiển button bằng chuộtCheckChangedXảy ra khi người sử dụng vào điều khiển buttonTextChangedXảy ra khi giá trị diễn giải trên điều khiển bị thay đổiEnabledChangedXảy ra khi thuộc tính Enabled thay đổi giá trịVisibleChangedXảy ra khi thuộc tính Visible thay đổi giá trịLabels, TextBoxes and ButtonsKhai 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); }61Thêm control vào formKéo thả control vào form62Code của phần designPhần code thiết kế Form1 được tạo tự độngKhai báo các đối tượng control trên Form1Chứa code khởi tạo controlForm1.Designer.cs63Code của phần designTạo đối tượngLần lượt khai báo các thuộc tính cho các controlInitializeComponent64Code của phần designInitializeComponentĐưa các control vào danh sách control của Form165Sửa thuộc tính của controlĐổi tên thành txtNum1Thay đổi các giá trị qua cửa sổ properties -> VS tự cập nhật code66Phần xử lýKhi click vào Add -> cộng 2 giá trị và xuất kết quảThực hiệnButton Add cung cấp sự kiện clickForm sẽ được cảnh báo khi Add được clickForm sẽ lấy dữ liệu từ 2 textbox và cộng -> kết quảCơ chế eventButton đưa ra sự kiện click: đối tượng publishForm 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 HandlerForm đóng vai trò là lớp subscribe67Khai báo event handlerKí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.DClickCửa sổ quản lý event của BtnAddevent68Khai báo event handlerEvent handler cho button AddCùng signature method với System.EventHandler69Khai báo event handlerInitializeComponentSự kiện clickTrình xử lý được gọi khi event xảy raDelegate chuẩn cho event handler70Viết phần xử lýPhần xử lý của Form1 khi button clickLấy giá trị của 2 textbox, cộng kết quả và xuất ra MessageBox71Kiểm tra dữ liệu nhậpNế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ạngXó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 đúngTrong Design View: kéo ErrorProvider từ ToolBox/Component vào formChặn xử lý sự kiện TextChanged khi user nhập liệu vào textboxNếu nhập sai thiết lập lỗi cho control ErrorProvider cảnh báo!72Bổ sung ErrorProviderKéo thả ErrorProvider vào design view73Xử lý sự kiện TextChanged của textBoxPhần kiểm tra74ErrorProvider cảnh báoIcon hiển thị lỗiDi chuyển chuột vào icon, tooltip xuất hiệnBài tập 1- Trang 1txtHoLottxtTenlblHoLotlblTenbtnHoLotlblHoVaTen76CheckBox RadioButtonCác Control77CheckBoxControl đưa ra một giá trị cho trước và user có thểChọn giá trị khi Checked = trueKhông chọn giá trị: Checked = falseLớp đại diện CheckBoxAppearance Checked CheckedChanged ThreeStateText Properties78CheckBoxCheckBoxThuộc tính thường dùngFlatStyleKiểu đường viềnAppearanceHình dạng của CheckBoxCheckedTrạng thái chọn(True) hay không (False)CheckStateTrạng thái của điều khiển CheckBox đang chọn.TextChuỗi trình bày với diễn giải của tùy chọnTextAlignCanh lề chuỗi diễn giải trên điều khiểnThreeStateCho phép hay không ba trạng thái Checked, unChecked, Indeterminate của điều khiển CheckBox79CheckBoxCheckBoxEvent thường dùngCheckChangedKích hoạt khi người sử dụng Click vào điều khiển CheckBoxMouseClickXảy ra khi người sử dụng Click trên điều khiển CheckBoxClickXảy ra khi người sử dụng Click vào điều khiển CheckBoxCheckStateChangedXảy ra khi thuộc tính CheckState bị thay đổiTextChangedXảy ra khi giá trị diễn giải của điều khiển bị thay đổiEnabledXảy ra khi thuộc tính Enabled thay đổi giá trịVisibleXảy ra khi thuộc tính Visible thay đổi giá trị80CheckBoxThreeState = true : cho phép thiết lập 3 trạng thái:Checkstate = Indeterminate: không xác địnhCheckState= Checked: chọnCheckState= Unchecked: không chọnChưa chọn81CheckBoxKhai 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); }82RadioButtonCho phép user chọn một option trong số nhóm optionKhi user chọn 1 option thì tự động option được chọn trước sẽ uncheckCá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 TextAppearance 83RadioButtonNhóm RadioButton thứ 2 chứa trong GroupBox2Nhóm RadioButton thứ 1 chứa trong GroupBox184RadioButtonThuộc tính thường dùngFlatStyleKiểu đường viềnAppearanceHình dạng của RadioButtonCheckedTrạng thái chọn(True) hay không (False)TextChuỗi trình bày với diễn giải của tùy chọnTextAlignCanh lề chuỗi diễn giải trên điều khiểnRadioButton85RadioButtonEvent thường dùngCheckChangedKích hoạt khi người sử dụng Click vào điều khiển RadioButtonMouseClickXảy ra khi người sử dụng Click trên điều khiển RadioButtonClickXảy ra khi người sử dụng Click vào điều khiển RadioButtonCheckChangedXảy ra khi người sử dụng Click vào điều khiển RadioButtonTextChangedXảy ra khi giá trị diễn giải của điều khiển bị thay đổiEnabledXảy ra khi thuộc tính Enabled thay đổi giá trịVisibleXảy ra khi thuộc tính Visible thay đổi giá trịRadioButton86Khai 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); }RadioButton87Bài Tập 2-3 trang 688ListBox & ComboBoxCác Control89ListBox & ComboBoxListBoxCung cấp một danh sách các item cho phép user chọnListBox cho phép hiển thị scroll nếu các item vượt quá vùng thể hiện của ListBoxItems MultiColumn SelectedIndex SelectedItem ListBoxSelectedItems Sorted Text Properties90ListBox & ComboBoxMethod & EventListBoxClearSelected FindString GetSelected SetSelected SelectedIndexChanged SelectedValueChanged MethodEvent91ListBox & ComboBoxThuộc tính thường dùngBorderStyleKiểu đường viềnDataSourceTập dữ liệu vào điều khiểnDisplayMemberTên của trường tương ứng với chuỗi trình bày trên điều khiểnMultiColumnCho phép trình bày danh sách phần tử trên điều khiển có nhiều cộtItemsTập các phần tử trong điều khiển,bạn có thể sử dụng phương thức Add và AddRange để thêm chuỗi hay phần tử với khóa và giá trị vào điều khiển ListBoxCol