Chương Xây dựng giao diện ứng dụng Visual Studio 6.0 Dẫn nhập 6.1 Tổng quát xây dựng ứng dụng VS Net 6.2 Một số ₫ối tượng giao diện thường dùng 6.3 Hiệu chỉnh thuộc tính ₫ối tượng giao diện 6.4 Sự kiện - Hàm xử lý kiện 6.5 Qui trình ₫iển hình viết ứng dụng VC# 6.6 Thí dụ viết ứng dụng giải phương trình bậc 6.7 Kết chương Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.0 Dẫn nhập Chương giới thiệu ₫ối tượng giao diện phổ dụng, qui trình tạo/xóa/hiệu chỉnh thuộc tính ₫ối tượng tạo hàm xử lý kiện cho số kiện quan tâm ₫ối tượng giao diện Chương giới thiệu qui trình ₫iển hình ₫ể xây dựng chương trình có giao diện ₫ồ họa ₫ược thiết kế trực quan (thay phải viết code khó khăn) Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.1 Tổng quát xây dựng ứng dụng VS Net Một yêu cầu quan trọng ứng dụng phải có tính thân thiện cao, gần gũi với người dùng Để thỏa mãn yêu cầu này, ứng dụng thường hoạt ₫ộng chế ₫ộ ₫ồ họa trực quan Các class cấu thành chương trình dùng giao diện ₫ồ họa ₫ược chia làm nhóm : Các class miêu tả ₫ối tượng giao diện với người dùng Form, Button, TextBox, Checkbox, Nhiệm vụ ₫ối tượng giúp người dùng tương tác dễ dàng, trực quan với chương trình ₫ể nhập/xuất liệu, ₫ể ₫iều khiển/giám sát hoạt ₫ộng chương trình Các ₫ối tượng che dấu chi tiết thuật giải liệu bên chương trình, người dùng không cần quan tâm ₫ến chúng Các class miêu tả chức cần thực chương trình Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.1 Tổng quát xây dựng ứng dụng VS Net Viết code tường minh ₫ể ₫ặc tả ₫ối tượng giao diện công việc khó khăn tốn nhiều công sức, thời gian Để giảm nhẹ công sức ₫ặc tả ₫ối tượng giao diện, môi trường lập trình trực quan (như Visual Studio Net) ₫ã viết sẵn số ₫ối tượng giao diện thường dùng cung cấp công cụ ₫ể người lập trình thiết kế trực quan giao diện ứng dụng cách tích hợp ₫ối tượng giao diện có sẵn : người lập trình ₫óng vai trò họa sĩ ₫ể vẽ/hiệu chỉnh kích thước, di chuyển vị trí phần tử giao diện cần cho ứng dụng Ngoài môi trường trực quan cho phép người lập trình tự tạo ₫ối tượng giao diện (User Control) ₫ể dùng ứng dụng ₫ược viết sau ₫ó (chương 9) Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.1 Tổng quát xây dựng ứng dụng VS Net Qui trình viết ứng dụng theo chế ₫ược gọi viết ứng dụng cách lắp ghép linh kiện phần mềm, giống việc lắp máy tính từ linh kiện phần cứng CPU, RAM, disk, keyboard, monitor, ⇒ dễ dàng nhanh chóng Mọi phần tử giao diện, dù nhỏ hay lớn, dù ₫ơn giản hay phức tạp, ₫ều cửa sổ (window) HĐH Windows quản lý cửa sổ làm việc theo thời gian Một ứng dụng dùng nhiều cửa sổ trình hoạt ₫ộng, thời ₫iểm có số cửa sổ ₫ược chương trình hiển thị ₫ể làm việc với người dùng Chúng ta làm quen số ₫ối tượng giao diện, nắm ₫ược tính chất khả ₫ối tượng ₫ể lập trình ứng dụng ₫ó, ta chủ ₫ộng chọn lựa dùng chúng cho phú hợp với ngữ cảnh sử dụng Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.2 Một số ₫ối tượng giao diện thường dùng Control buttons Window ≡ Form, Dialogbox Title bar Textbox Button Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.2 Một số ₫ối tượng giao diện thường dùng Label DriveListBox Combobox ≡ Textbox + ListBox DirListBox FileListBox ≅ ListBox PictureBox Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.2 Một số ₫ối tượng giao diện thường dùng GroupBox RadioButton Checkbox Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 6.2 Một số ₫ối tượng giao diện thường dùng MenuTrip ToolTrip Button Pop-up Menu window chứa document ứng dụng StatusTrip Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide Các tính chất chung ₫ối tượng giao diện Đối tượng giao diện có tính chất giống ₫ối tượng bình thường, ₫ược cấu thành từ loại thành phần : thuộc tính, tác vụ, event, delegate Mỗi ₫ối tượng giao diện chứa nhiều thuộc tính liên quan ₫ến nhiều loại trạng thái khác : (Name) : ₫ây thuộc tính ₫ặc biệt, xác ₫ịnh tên nhận dạng ₫ối tượng, giá trị thuộc tính trở thành biến tham khảo ₫ến ₫ối tượng, code ứng dụng dùng biến ₫ể truy xuất ₫ối tượng thuộc tính xác ₫ịnh vị trí kích thước (Layout) : Location, Size, Margin thuộc tính xác ₫ịnh tính chất hiển thị : Text, Font, ForeColor, BackColor, thuộc tính xác ₫ịnh hành vi (Behavoir) : Enable, Visible thuộc tính liên kết liệu database : DataBindings, Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 10 6.3 Hiệu chỉnh thuộc tính ₫ối tượng giao diện Khi tạo trực quan ₫ối tượng giao diện, môi trường ₫ã gán giá trị ₫ầu mặc ₫ịnh cho thuộc tính, thường ta cần thay ₫ổi vài thuộc tính ₫áp ứng ₫ược yêu cầu riêng Có cách ₫ể hiệu chỉnh giá trị thuộc tính : trực quan thông qua cửa sổ thuộc tính ₫ối tượng giao diện lập trình truy xuất thuộc tính ₫ối tượng giao diện Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 11 6.4 Sự kiện - Hàm xử lý kiện Mỗi ₫ối tượng giao diện có nhiều kiện ₫ể người dùng kích hoạt Người lập trình ₫ịnh nghĩa hàm xử lý kết hợp với kiện cần xử lý Khi ứng dụng chạy, lúc người dùng kích hoạt kiện, hàm xử lý kiện tương ứng (nếu có) chạy Thí dụ user ấn chuột vào button tên "button1", hệ thống tạo kiện "Click" ₫ể kích khởi hàm button1_Click() chạy Muốn tạo hàm xử lý kiện ₫ối tượng giao diện, ta chọn ₫ối tượng, cửa sổ thuộc tính hiển thị, click icon ₫ể hiển thị danh sách kiện ₫ối tượng, duyệt tìm kiện cần xử lý, nhập tên hàm xử lý vào combobox bên phải kiện (hay ấn kép chuột vào comboBox ₫ể máy tạo tự ₫ộng hàm xử lý) Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 12 6.5 Qui trình ₫iển hình viết ứng dụng VC# Trước hết phải nắm bắt yêu cầu phần mềm ₫ể xác ₫ịnh chức mà ứng dụng phải cung cấp cho người dùng Phân tích sơ lược chức tìm class phân tích cấu thành chức tương ứng Thiết kế chi tiết class phân tích : xác ₫ịnh thuộc tính tác vụ phác họa giải thuật tác vụ Phân loại class phần mềm thành nhóm : nhóm ₫ối tượng giao diện (các form giao diện) nhóm class miêu tả thuật giải chức bên ứng dụng Trong ứng dụng nhỏ dùng thuật giải ₫ơn giản, ta thường ₫ặt thuật giải chức trực tiếp hàm xử lý kiện ₫ối tượng giao diện Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 13 6.5 Qui trình ₫iển hình viết ứng dụng VC# Hiện thực phần mềm VC# gồm công việc : thiết kế trực quan form giao diện người dùng : form chứa nhiều phần tử giao diện, phần tử giao diện thường ₫ã có sẵn, không ta phải tạo thêm số ₫ối tượng giao diện (User Control) Ứng với phần tử giao diện vừa tạo ra, nên thiết lập giá trị ₫ầu cho thuộc tính "Name" vài thuộc tính cần thiết tạo hàm xử lý kiện cho kiện cần thiết phần tử giao diện viết code cho hàm xử lý kiện vừa tạo Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 14 6.6 Thí dụ viết ứng dụng giải phương trình bậc Chạy VS Net, chọn menu File.New.Project ₫ể hiển thị cửa sổ New Project Mở rộng mục Visual C# TreeView "Project Types", chọn mục Window, chọn icon "Windows Application" listbox "Templates" bên phải, thiết lập thư mục chức Project listbox "Location", nhập tên Project vào textbox "Name:", click button OK ₫ể tạo Project theo thông số ₫ã khai báo Form ₫ầu tiên ứng dụng ₫ã hiển thị cửa sổ thiết kế, việc thiết kế form trình lặp thao tác tạo mới/xóa/hiệu chỉnh thuộc tính/tạo hàm xử lý kiện cho ₫ối tượng cần dùng form Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 15 6.6 Thí dụ viết ứng dụng giải phương trình bậc Nếu cửa sổ ToolBox chưa hiển thị chi tiết, chọn menu View.Toolbox ₫ể hiển thị (thường nằm bên trái hình) Click chuột vào button (Auto Hide) nằm góc phải cửa sổ ToolBox ₫ể chuyển chế ₫ộ hiển thị thường trực Duyệt tìm phần tử Label (trong nhóm Common Controls), chọn nó, dời chuột vị trí thích hợp form vẽ với kích thước mong muốn Hiệu chỉnh thuộc tính Text = "Nhap a :" Nếu cần, thay ₫ổi vị trí kích thước Labelvà Form Duyệt tìm phần tử TextBox (trong nhóm Common Controls), chọn nó, dời chuột vị trí bên phải Label vừa vẽ vẽ với kích thước mong muốn Hiệu chỉnh thuộc tính (Name) = txtA Nếu cần, thay ₫ổi vị trí kích thước TextBox Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 16 6.6 Thí dụ viết ứng dụng giải phương trình bậc Lặp lại bước 4, ₫ể vẽ Label "Nhập b :", "Nhập c :", TextBox có (Name) = txtB, txtC, button "Bắt ₫ầu giải" có (Name) = btnStart, Label có (Name) lblKetqua, lblX1, lblX2 Đối với ₫ối tượng giống nhau, ta dùng kỹ thuật Copy-Paste ₫ể nhân vô tính chúng cho dễ dàng Sau thiết kế xong, Form có dạng sau : Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 17 6.6 Thí dụ viết ứng dụng giải phương trình bậc Dời chuột button "Bắt ₫ầu giải", ấn kép chuột vào ₫ể tạo hàm xử lý kiện Click chuột cho button, cửa sổ mã nguồn hiển thị ₫ể ta bắt ₫ầu viết code cho hàm Lưu ý ₫ể tạo hàm xử lý kiện cho ₫ối tượng cách quy, ta phải hiển thị cửa sổ thuộc tính ₫ối tượng, hiển thị danh sách kiện ₫ịnh nghĩa hàm xử lý kiện mong muốn Viết code cho hàm btnStart_Click() sau : private void btnStart_Click(object sender, EventArgs e) { //₫ịnh nghĩa biến cần dùng double a, b, c; double delta; double x1, x2; Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 18 6.6 Thí dụ viết ứng dụng giải phương trình bậc //mã hóa chuỗi nhập thành giá trị thực a,b,c a = Double.Parse(txtA.Text); b = Double.Parse(txtB.Text); c = Double.Parse(txtC.Text); //tính biệt số delta phương trình delta = b * b - * a * c; if (delta >= 0) { //nếu có nghiệm thực x1 = (-b + Math.Sqrt(delta)) / / a; x2 = (-b - Math.Sqrt(delta)) / / a; lblKetqua.Text = "Phương trình có nghiệm thực :"; lblX1.Text = "X1 = " + x1; lblX2.Text = "X2 = " + x2; } Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 19 6.6 Thí dụ viết ứng dụng giải phương trình bậc else { //nếu vô nghiệm lblKetqua.Text = "Phương trình vô nghiệm"; lblX1.Text = lblX2.Text = ""; } } 10 Hiệu chỉnh hàm khởi tạo form sau : public Form1() { InitializeComponent(); //xóa nội dung ban ₫ầu Label kết lblKetqua.Text = lblX1.Text = lblX2.Text = ""; } 11 Chọn menu Debug.Start Debugging ₫ể dịch chạy ứng dụng Hãy thử nhập ba (a,b,c) phương trình bậc ấn button "Bắt ₫ầu giải" ₫ể giải xem kết Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 20 6.0 Kết chương Chương ₫ã giới thiệu ₫ối tượng giao diện phổ dụng, qui trình tạo/xóa/hiệu chỉnh thuộc tính ₫ối tượng tạo hàm xử lý kiện cho số kiện quan tâm ₫ối tượng giao diện Chương ₫ã giới thiệu qui trình ₫iển hình ₫ể xây dựng chương trình có giao diện ₫ồ họa ₫ược thiết kế trực quan (thay phải viết code khó khăn) Khoa Khoa học & Kỹ thuật Máy tính Trường ĐH Bách Khoa Tp.HCM © 2010 Môn : Lập trình hướng ₫ối tượng Chương : Xây dựng giao diện ứng dụng Visual Studio Slide 21 ... VC# Trư c hết phải nắm bắt yêu c u phần mềm ₫ể x c ₫ịnh ch c mà ứng dụng phải cung c p cho người dùng Phân tích sơ lư c ch c tìm class phân tích c u thành ch c tương ứng Thiết kế chi tiết class... hoạt ₫ộng chương trình C c ₫ối tượng che dấu chi tiết thuật giải liệu bên chương trình, người dùng không c n quan tâm ₫ến chúng C c class miêu tả ch c cần th c chương trình Khoa Khoa h c & Kỹ... phương trình b c Chạy VS Net, chọn menu File.New.Project ₫ể hiển thị c a sổ New Project Mở rộng m c Visual C# TreeView "Project Types", chọn m c Window, chọn icon "Windows Application" listbox