Tạo mới giao diện ứng dụng

Một phần của tài liệu Giáo trình kỹ thuật lập trình nâng cao (ngành tin học ứng dụng) (Trang 79 - 86)

Môi trường phát triển tích hợp Visual Studio (IDE), bạn sẽ tạo một ứng dụng C # đơn giản có giao diện người dùng (UI) dựa trên Windows.

Đầu tiên, bạn sẽ tạo một dự án ứng dụng C #:

Bước 1: Mở Visual Studio 2019 Bước 2: Chọn Create a new project

Hình 4-1 Giao diện tạo mới project

Bước 3: Trên Project tạo mới, chọn Windows Forms App (.NET Framework) cho C #

KHOA CÔNG NGHỆ THÔNG TIN 77

Hình 4-2 Giao diện kiểu ứng dụng lập trình

Bước 4: Nhập tên project là HelloWorld và chọn Create

Hình 4-3 Giao diện nhập tên phiên bản làm việc của project Kết quả sau khi tạo xong:

KHOA CÔNG NGHỆ THÔNG TIN 78

Hình 4-4 Giao diện sau khi tạo project thành công Trong đó:

1) Ở phía bên trái của Visual Studio, bạn cũng sẽ thấy một ToolBox. Hộp công cụ chứa tất cả các điều khiển có thể được thêm vào Windows Forms. Các điều khiển như hộp văn bản hoặc nhãn chỉ là một số điều khiển có thể được thêm vào Windows Forms.

2) Trong đó Solution Explorer, bạn cũng sẽ có thể thấy quản lý project HelloWorld, trong đây sẽ chứa 2 tệp lệnh bên dưới:

 Một ứng dụng Form có tên là Forms1.cs. Tệp này sẽ chứa tất cả mã cho ứng dụng Windows Form.

 Chương trình chính có tên Program.cs là tệp mã mặc định được tạo khi ứng dụng mới được tạo trong Visual Studio. Mã này sẽ chứa mã khởi động cho toàn bộ ứng dụng.

3) Bảng thuộc tính cũng hiển thị trong Visual Studio. Vì vậy, đối với mỗi điều khiển (control) sẽ có những thuộc tính dành riêng cho điều khiển đó. Mỗi Điều khiển có một tập hợp các thuộc tính mô tả điều khiển đó.

KHOA CÔNG NGHỆ THÔNG TIN 79 4) Biểu mẫu được hiển thị trong Visual Studio sẽ bắt đầu xây dựng ứng dụng

Windows Forms của mình.

Lưu ý:

- .Net solution được lưu trữ trong file với phần mở rộng là .sln

- Một dự án (project) C# được lưu trữ trong file với phần mở rộng là .csproj - Mã nguồn của C# được lưu trữ trong file với phần mở rộng .cs.

Ví dụ áp dụng viết ứng dụng đầu tiên như sau:

Hình 4-5 Giao diện thiết kế Hướng dẫn thực hiện:

Bước 1: Thiết kế form cho nút bấm Button “Click this”

KHOA CÔNG NGHỆ THÔNG TIN 80

Hình 4-6 Giao diện công cụ hỗ trợ thiết kế (Toolbox)

(Nếu bạn không thấy tùy chọn Hộp công cụ hiện ra, bạn có thể mở nó từ thanh menu. Để làm như vậy, hãy xem > Hộp công cụ hoặc nhấn Ctrl + Alt + X)

 Chọn biểu tượng Ghim để gắn cửa sổ Hộp công cụ

KHOA CÔNG NGHỆ THÔNG TIN 81

Hình 4-7 Giao diện thiết kế

 Trong cửa sổ Thuộc tính, xác định vị trí Text, thay đổi tên Button1 thành

Click this, rồi nhấn Enter

Hình 4-8 Đặt thuộc tính text

(Nếu bạn không nhìn thấy cửa sổ Thuộc tính (Properties) , bạn có thể mở nó từ thanh menu. Để làm như vậy, hãy chọn Xem > Cửa sổ Thuộc tính. Hoặc nhấn F4)

 Trong phần Thiết kế của cửa sổ Thuộc tính (Properties), thay đổi tên từ

KHOA CÔNG NGHỆ THÔNG TIN 82

Hình 4-9 Đặt thuộc tính Button Bước 2: Thiết kế form cho nhãn Label “Hello World!”

 Chọn điều khiển Nhãn (Label) từ cửa sổ Hộp công cụ, sau đó kéo nó vào biểu mẫu form và thả nó bên dưới nút Bấm.

 Trong phần Thiết kế hoặc phần (DataBindings) của cửa sổ Thuộc tính name hãy đổi tên của Label1 thành lblHelloWorld, rồi nhấn Enter.

Bước 3: Thêm code vào form như sau

 Trong cửa sổ Form1.cs [Design], bấm đúp vào nút Bấm (Click this) để mở cửa sổ Form1.cs

(Ngoài ra, bạn có thể mở rộng Form1.cs trong Solution Explorer, sau đó chọn Form1)

 Trong cửa sổ Form1.cs , sau dòng private void nhập hoặc nhập lblHelloWorld.Text = "Hello World!";

KHOA CÔNG NGHỆ THÔNG TIN 83

Bước 4: Chạy chương trình

 Chọn nút Bắt đầu để chạy ứng dụng

 Trong Visual Studio IDE, cửa sổ Công cụ sẽ mở và cửa sổ Đầu ra cũng sẽ mở. Nhưng bên ngoài IDE một hộp thoại Form1 xuất hiện. Chọn nút Nhấp

vào nút này trong hộp thoại Form1 . Lưu ý rằng văn bản Label1 thay đổi thành Hello World!

Một phần của tài liệu Giáo trình kỹ thuật lập trình nâng cao (ngành tin học ứng dụng) (Trang 79 - 86)

Tải bản đầy đủ (PDF)

(119 trang)