Windows Form - ThS. Nguyễn Hà Giang docx

N i Dungn Graphical User Interface GUI n Event Driven Programming n Ứng dụng Windows Form dùng C# n Khuôn mẫu của ứng dụng Windows Form chuẩn n Cách tạo ứng dụng Windows Form trong VS 20

W in dow s For m

ThS Nguyễn Hà Giang Khoa CNTT - Hutech

N i Dung

n Graphical User Interface (GUI)

n Event Driven Programming

n Ứng dụng Windows Form dùng C#

n Khuôn mẫu của ứng dụng Windows Form chuẩn

n Cách tạo ứng dụng Windows Form trong VS 2005

q Tạo ứng dụng Form

q Chỉnh sửa form

q Thêm component vào form

q Viết phần xử lý cơ bản

Nguyen Ha Giang - 2009 3

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

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

Nguyen Ha Giang - 2009 5

GUIs

n Chương trình hiện đại đều dùng GUI

n User : người sử dụng chương trình

n Thành phần đồ họa điển hình

q Window: một vùng bên trong màn hình chính

q Menu: liệt kê những chức năng

q Button: nút lệnh cho phép click vào

q TextBox: cho phép user nhập dữ liệu text

GUI Application

n Windows Form là nền tảng GUI cho ứng dụng desktop

q (Ngược với Web Form ứng dụng cho Web)

q Single Document Interface (SDI)

q Multiple Document Interface (MDI)

n Các namespace chứa các lớp hỗ trợ GUI trong NET

q System.Windows.Forms :

n Chứa GUI components/controls và form

q System.Drawing:

n Chức năng liên quan đến tô vẽ cho thành phần GUI

n Cung cấp chức năng truy cập đến GDI+ cơ bản

Nguyen Ha Giang - 2009 7

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ở sự tương tác User-

Computer Sequential programming Event-Driven Programming

Nguyen Ha Giang - 2009 9

Event-Driven Programming

n Chương trình GUI thường dùng Event-Drive Programming

n Chương trình chờ cho event xuất hiện và xử lý

n Ví dụ sự kiện:

n Firing an event: khi đối tượng khởi tạo sự kiện

n Listener: đối tượng chờ cho sự kiện xuất hiện

n Event handler: phương thức phản ứng lại sự kiện

Event E publish

subscribe

A phát sinh event E Delegate cho E Handler B cho E

Handler C cho E

Button đưa ra sự kiện click Form có event handler cho click của button

Danh sách event cho Form

Nguyen Ha Giang - 2009 13

Windows Forms Application

Windows Form App

n Sử dụng GUI làm nền tảng

n Event-driven programming cho các đối tượng trên form

n Ứng dụng dựa trên một “ form ” chứa các thành phần

q Menu

q Toolbar

q StatusBar

q TextBox, Label, Button…

n Lớp cơ sở cho các form của ứng dụng là Form

System.Windows.Forms Form

Namespace Class

Nguyen Ha Giang - 2009 15

Minh h a WinForm App

GUI Components/Controls

n 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

n Mỗi component/control định nghĩa các

q Property (có thể thay đổi trong màn hình thiết kế)

q Method

q Event

n Cách dễ nhất là sử dụng VS NET Toolbox để thêm

control và component vào form (in design view)

n Sử dụng code để thêm các control/component vào form (in code view)

Nguyen Ha Giang - 2009 17

Components and Controls cho Windows Form

Toolbox của Visual Studio NET 2005

UD 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

Nguyen Ha Giang - 2009 19

n Tạo lớp kế thừa từ lớp Form cơ sở

n Bổ sung các control vào form

q Thêm các label, menu, button, textbox…

n Thiết kế layout cho form (bố trí control)

q Hiệu chỉnh kích thước, trình bày, giao diện cho

n form

n Control chứa trong form

n Viết các xử lý cho các control trên form và các xử lý khác

n Hiển thị Form

q 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!

object

object

Nguyen Ha Giang - 2009 21

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

Minh họa tạo ứng dụng Windows Form từ Visual

Studio NET

Nguyen Ha Giang - 2009 23

T o WinForm App t VS 2005

Hỗ trợ WYSIWYG cho GUI design

Cơ chế xử lý sự kiện code behind

Nhanh chóng & dễ dàng tạo UD Windows Form

T o WinForm App t VS 2005 (2)

Tạo project: Windows App

Nguyen Ha Giang - 2009 25

T o WinForm App t VS 2005 (3)

Windows App do VS.2005 khởi tạo

q Rút ngắn nhiều thời gian cho việc thao tác giao diện form

q Tính năng trực quan WYSIWYG

Có được ứng dụng form mặc dù chưa viết code!

Nguyen Ha Giang - 2009 27

Toolbox

Toolbox -Kéo thả control lên form -Code được phát sinh tự động

Giao di n thi t k form

Form chính của ứng dụng

Chưa có control

Nguyen Ha Giang - 2009 29

C a s properties

Cửa sổ properties của form

sổ Properties

Nguyen Ha Giang - 2009 31

Thêm control v à o form

n Kéo thả control vào form

Code c a ph n design

n 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

Nguyen Ha Giang - 2009 33

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

Nguyen Ha Giang - 2009 35

Đổ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ý

n Khi click vào Add → cộng 2 giá trị và xuất kết quả

n Thực hiện

q Button Add cung cấp sự kiện click

q Form sẽ được cảnh báo khi Add được click

q Form sẽ lấy dữ liệu từ 2 textbox và cộng → kết quả

n Cơ chế event

q Button đưa ra sự kiện click: đối tượng publish

q Form quan tâm đến sự kiện click của button, Form có sẽ

phần xử lý ngay khi button click.

q Phần xử lý của form gọi là Event Handler

q Form đóng vai trò là lớp subscribe

Nguyen Ha Giang - 2009 37

n 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

Nguyen Ha Giang - 2009 39

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ý

n Phần xử lý của Form1 khi button click

q Lấy giá trị của 2 textbox, cộng kết quả và xuất ra MessageBox

Nguyen Ha Giang - 2009 41

n Các hành động có thể thực hiện trên form

q Activate: cho form nhận focus

q Close: đóng và giải phóng resource

q Hide: ẩn form

q Refresh: tô vẽ lại

q Show: cho form show ra màn hình (modeless) và activate

q ShowDialog: hiển thị dạng modal

Modeless

Event c a Form

n Tạo xử lý cho event

q Trong cửa sổ properties

q Chọn biểu tượng event

q Kích đúp vào tên event

q Closed : xuất hiện khi form đã đóng

q Resize : xuất hiện sau khi user resize form

q Click : xuất hiện khi user click lên nền form

q 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ó

Nguyen Ha Giang - 2009 43

Event c a Form

n Ví dụ chương trình sẽ hỏi user xác nhận trước khi đóng ứng dụng.

q Kích đúp vào item FormClosing trong cửa sổ event

q Hàm Form1_FormClosing được tạo và gắn với sự kiện

FormClosing

q Viết code cho event handler Form1_FormClosing

this.FormClosing += new FormClosingEventHandler( this.Form1_FormClosing );

Ki m tra d li u nh p

n Nếu user nhập vào chuỗi ký tự chữ thì chương trình trên

sẽ lỗi run time!

q Trong Design View:

n kéo ErrorProvider từ ToolBox/Component vào form

q Chặn xử lý sự kiện TextChanged khi user nhập liệu vào

textbox

q Nếu nhập sai thiết lập lỗi cho control ErrorProvider cảnh

báo!

Nguyen Ha Giang - 2009 45

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

Nguyen Ha Giang - 2009 47

Icon hiển thị lỗi

Di chuyển chuột vào icon, tooltip xuất hiện

T ó m t t

n Tổng quan lập trình GUI

n Cơ chế Event Driven Programming

n Ứng dụng Windows Form cơ bản

n Sử dụng Visual Studio NET 2005 tạo ứng dụng WF

q Windows Form Application

q Sử dụng control: text, label, button

q Xử lý sự kiện cho button, form

q Sử dụng ErrorProvider

Nguyen Ha Giang - 2009 49