Bài 5: Dùng Microsoft Visual Studio.NET

Trong bài 4, ta đã thiết kế và chạy thử chương trình đầu tiên trong phạm vi Visual Studio.NET IDE. Hôm nay, ta đào sâu thêm về phương pháp làm việc với Visual Studio.NET, các ứng dụng (application) cùng các công cụ yểm trợ đã thiết kế sẳn cho việc lập trình Visual Basic.NET (VB.NET) qua một ứng dụng (application) tập làm toán cộng (tạm đặt tên là Adder).

Bài tập:

Dự án mới nhằm tạo ứng dụng (application) Adder trong đó ta sẽ làm một bài toán cộng 2 con số ngẫu nhiên và kiểm tra kết quả xem đúng hay sai. Ứng dụng cũng cho phép lập đi lập lại bài toán nhiều lần, do đó rất tiện dụng cho việc chuẩn bị và kiểm tra các bài tập về toán cho các trẻ em học toán. Bài tập này cũng tạo cơ hội cho ta làm quen với việc sử dụng môi trường IDE của MS Visual Studio.NET

Bước 1: Tạo dự án mới

5.1 Trang khởi đầu (Start Page)

Nhắc lại, khi khởi động Microsoft Visual Studio.NET, ta có một giao diện tương tư như trang web (Visual Studio Home Page/Start Page) để thiết kế việc bố trí mặc định cho môi trường lập trình MS Visual Studio.NET IDE (hay còn gọi là profile) và sau đó, chọn Get Started trang liệt kê các dự án, cho phép ta mở các dự án đã thiết kế hay khởi đầu một dự án mới (New Project).

Tạo dự án mới như sau:

• Project Type: chọn Visual Basic Projects
• Templates: chọn Windows Application
• Name = Adder
• Location = D:\Dev

Ta để ý, dự án Adder được tạo và lưu trữ dưới ngăn chứa D:\Dev\Adder

Nhấp OK. MS Visual Studio.NET tạo một window mặc định Form1.vb ) với Solution Adder và Project Adder.

Bước 2: Phân biệt Solution và Project

5.2 Solution và Project

Sử dụng Solution Explorer giống như Windows Explorer trong đó MS Visual Studio.NET quản lý và tổ chức các tập tin thành từng nhóm nhỏ theo hệ thống: Phương Án (Solutions), Dự Án (Projects) rồi tới các tập tin liên hệ (Files).

Như vậy, ta phân biệt một phương án có thể có nhiều dự án khác nhau, một dự án có thể có nhiều ứng dụng (application) và các thành phần (components) phụ thuộc và mỗi ứng dụng (application) như vậy đều có nhiều tập tin dùng thiết kế ứng dụng (application) đó, tỷ như: classes, forms, các references liên hệ, ... như trong hình dưới đây:

Bước 3: Đậu bãi (Docking) và Trôi Nổi (Undocking)

Mọi windows đều có thể di chuyển trôi nổi (undocking) trong môi trường IDE nhằm mục đích tạo mặt trống hay giao diện trống (space) cho việc thiết kế các forms được rộng rãi thoải mái.

Ta tập docking hay undocking bằng cách dùng mouse kéo lê phần tiêu đề (Title Section) của windows Solution Explorer từ phiá bên phải IDE vào chính giữa phần thiết kế (Design Section):

Ta nhận thấy Properties Window mở rộng và lấp đầy khoảng trống phiá bên phải IDE.

Ta cũng có thể mở nhiều windows khác nhau qua thực đơn View là thực đơn thứ 3 trong phần thực đơn chính của IDE và tập docking hay undocking.

Khi cho các windows này đậu bãi trở lại (thí dụ với Solution Window), ta cần khéo léo sao cho khung window vào đúng vị trí phiá trên của Properties Windows và trong khuôn khổ của Properties Windows, nếu không ta sẽ có 2 windows nằm chồng lên nhau chứ không phải một trên một dưới như hình bên trên.

Bước 4: Dấu 1 window (Hide) hay dấu mọi windows (Hide All)

Ta có thể dấu hay mở các windows phụ bằng cách chọn Hide (nút kế bên nút Đóng - Close) như hình của Toolbox window sau đây. Nút Hide có 2 hình chỉ 2 trạng thái khác nhau:

• Hình giống như 1 cây ghim giấy chỉ xuống tượng trưng cho việc ghim window đó để tham khảo
• Hình cây ghim giấy nằm ngang để dấu window này 1 cách tự động khi ta không tham khảo nữa.

Ta cũng có thể dấu toàn bộ các windows với sự chọn Window, Auto Hide All:

Ta sẽ thấy mọi windows đều thu gọn qua 2 bên, dành chỗ trống rộng rãi cho phần thiết kế:

Bước 5: Hộp công cụ (Toolbox) và Server Explorer

Bên trái phần thiết kế (Design Window) ta có hộp công cụ (Toolbox) và Server Explorer. Các windows này cũng đóng mở tự động hay dấu đi (thu gọn lại) về phiá tay trái.

Hộp công cụ gồm có nhiều bảng khác nhau từ:

• Windows Forms: chứa các công cụ liên hệ đến việc tạo Forms
• Components: các thành phần yểm trợ
• Data: các ứng dụng liên quan đến việc nối vào Cơ Sở Dữ Liệu (Database) gồm đủ loại, tỷ như: MS Access, SQL Server, Oracle Server hay các ODBC (Open Database Connection) tương đương kể cả các mệnh lệnh dùng với ngôn ngữ lập trình database tiêu chuẩn SQL.

Hình đặc trưng cho Components:

Hình đặc trưng cho Data:

Hình đặc trưng cho Server Explorer: cho phép ta quản lý, bảo trì, kiểm tra các nối vào Cơ Sở Dữ Liệu (Database) trong máy vi tính cục bộ hay liên mạng, chẳng hạn như trong hình, ta nhận thấy Cơ Sở Dữ Liệu (Database) sử dụng là SQL Server nằm trong máy cung cấp dịch vụ Sydney.

Server Explorer cũng là nơi ta tạo hay xóa bỏ Cơ Sở Dữ Liệu (Database), các tables, các mối liên hệ (relationships), các Store Procedures hay các đồ hình về Database (Database Diagrams) cho bản báo cáo (Reports) hay tham khảo (References).

Ta sẽ tham khảo chi tiết hơn ở các bài học về Cơ Sở Dữ Liệu (Database).

Bước 7: Other windows

Ngoài ra còn nhiều windows yểm trợ khác, tỷ như:

• Macro Explorer
• Command Window
• Output Window
• Class View
• Object Window
• (vân vân)

5.3 Class View

Nhắc lại khi bàn về Solution Explorer, một dự án có thể gồm nhiều tập tin liên hệ. Các tập tin này dính dáng đến việc tạo ra classes nhưng ta không thấy chỗ nào nói về các khái niệm đó trong class, tỷ như: class Adder trong dự án Adder. Class View window được thiết kế cho phép ta thấy cấu trúc cơ bản của dự án mặc dù có thể ta không hoặc chưa dùng đến. Trong Class View, ta có thể mở rộng (expand) hay thu gọn (collapse) phần hiển thị các objects qua các dấu + hay - , như vậy tạo cơ hội tham khảo chi tiết các thành phần xác định ra class.

5.4 Object Window

Nhớ là mọi thứ trong lập trình với Visual Basic.NET (VB.NET) đều là Objects và đó là thành phần cơ bản của .NET Framework. Mọi objects đều có các đặc tính (property) và methods chuyên biệt tạo dựng và yểm trợ chính nó, nhưng làm sao ta biết là gì? ở đâu mà ra? đi đâu mà tìm? May mà có em ..., à quên, có Object Browser nên 'đời còn ... dễ thương'. Object Browser thiết kế để yểm trợ ta lập trình với ... objects. Ta có thể truy cập objects qua các catalogs khác nhau dẫn đến việc tham khảo từng các object một trong thư viện .NET Framework kể cả các object do dự án của ta tạo ra.

5.5 Toolbar

MS Visual Studio.NET cung cấp đủ loại toolbar yểm trợ trong việc tạo giao diện hay cả việc lập trình.

Chọn View, Toolbars rồi chọn thanh công cụ yểm trợ tùy ý khi pháp triển dự án, tỷ như:

• Table
• HTML Editor
• Image Editor
• (vân vân)

5.6 Trợ giúp (Help)

Một ứng dụng (application) quan trọng khác trong IDE là Dynamic Help.

Từ thực đơn Help, chọn Dynamic Help mở ứng dụng trợ giúp này mỗi khi ta cần truy cập cú pháp (syntax) của các mệnh lệnh liên hệ, các công dụng (functions), các đối tượng (objects) cần trong dự án, vân vân ... Dynamic Help cũng trình bày các thí dụ điển hình mà ta có thể áp dụng linh động vào dự án:

Bước 8:

Sau khi đi dạo một vòng làm quen với IDE của MS Visual Studio.NET, ta tiếp tục dự án Adder với giao diện sau:

Dùng (bằng cách kéo lê - Click and Drag hay Click and Draw) các thiết bị trong hộp công cụ (Toolbox) vào Form1 và bố trí như sau:

Lưu ý, ở đây chỉ hướng dẫn và trình bày chi tiết phương pháp dùng và bố trí đặc tính (property) của 1 thiết bị trong hộp công cụ mà thôi. Sau đó, các bạn áp dụng tương tự như vậy với các thiết bị khác.

Thí dụ dùng và trình bày tiêu đề (lable) Toán Cộng như sau:

• Nhấp hộp công cụ (phía bên trái IDE) và nhấp đơn thiết bị Label (Click ...)
• Vẽ (... and Draw) 1 hình chữ nhật trong mặt trống của Form
• Chọn Properties Window của Label (để ý label có được chọn hay không, nếu không, ta có thể mở nhằm properties window của một thiết bị nào khác chứ không phải thiết bị ta muốn bố trí)
• Chọn đặc tính (property) Text va gõ hàng chữ Toán Cộng (có thể dùng ứng dụng VPSKeys với bố trí Unicode hoặc các ứng dụng gõ tiếng Việt tương đương)
• Chọn và mở rộng đặc tính (property) Fonts và thay đổi cở chữ và màu tùy ý.
• Chọn Name và đặt tên theo tiêu chuẩn định trước, tỷ như: lblTitle với lbl là chữ viết tắc của label cộng với tên của tiêu đề.
• Kéo lê (Click and Drag) thiết bị này đến vị trí tùy ý trong Form, tỷ như: vị trí phía trên bên trái như hình trình bày.

Áp dụng linh động hướng dẫn trên cho các thiết bị textbox, button, ... như sau:

Bước 9:

Tuy ta có thể giữ tên mặc định Form1 trong dự án Adder nhưng có vẻ không chuyên nghiệp bằng đổi tên mặc định Form1 đó thành tên Adder thích hợp với dự án.

Lưu ý: khi đổi tên Form mặc định như vậy, ta phải bố trí Startup Object với tên Adder là object ta muốn khởi động đầu tiên khi chạy dự án Adder. Nếu không, dự án vẫn dùng Form1 và sẽ tạo lỗi vì Form1 đã đổi tên không còn hiện diện nữa.

• Đổi tên Form1 bằng cách chọn dự án Adder trong Solution Explorer và chọn Properties.
• Chọn Adder trong hộp chữ combo Startup Object.
• Nhấp nút Apply, OK

Bước 10:

5.7 Lập trình theo kiểu mẫu Event-Driven

Khi dùng MS Visual Studio.NET làm môi trường lập trình với Visual Basic.NET (VB.NET), thường thường ta tạo một giao diện (dưới hình thức Form) trước và sau đó gài nguồn mã vào, tỷ như: nhấp đôi nút Check It để mở tập tin chứa nguồn mã với tên mặc định là tên của dự án. Trước tiên, MS Visual Studio.NET sẽ tạo nguồn mã mặc định với các công dụng cơ bản yểm trợ giao diện ta vừa thiết kế (Form Adder) và ta sẽ cộng thêm mã để bố trí và kế hoạch sẵn mọi tình huống có thể xảy ra hầu hành động kịp thời tùy theo biến cố mà Form nhận được (thí dụ: người dùng nhấn vào nút Check It để kiểm tra bài toán cộng trong ứng dụng Adder). Kiểu chuẩn bị với nguồn mạ định trước như vậy được gọi là lập trình theo kiểu mẫu Event-Driven.

Bây giờ, ta bắt đầu thêm nguồn mã xử lý biến cố Click của nút Check It như sau:

• Nhấp đôi vào Form, IDE sẽ dùng Designer Code Generator tạo phần nguồn mã với tập tin Adder.vb
• Nguồn mã bắt đầu với Public Class Adder.
• Nhấp vào tab mang tên Adder.vb [Design] để trở về giao diện Form Adder. (Lưu ý hình con trỏ chỉ các tab trong IDE từ Satrt Page, Adder.vb [Design] và Adder.vb )
• Nhấp đôi vào nút Check It để mở phần nguồn mã của nút này với biến cố Click
• Gỏ nguồn mã sau đây phía dưới hàng Private Sub cmdCheckIt_Click (nhắc lại, cmdCheckIt là tên ta đặt cho nút Check It trong phần giao diện Form Adder): mã này kiểm tra xem ta đưa 1 giải đáp với con số hay chữ vào hộp chữ tbxResult? Nếu là con số, mã sẽ so sánh con số đó với kết quả bài toán cộng và báo cáo lại trong phần nhản hiệu lblResult.

        Dim resultNumber As Integer
        If IsNumeric(tbxResult.Text) Then
            resultNumber = CInt(tbxNumber1.Text) + CInt(tbxNumber2.Text)
            If CInt(tbxResult.Text) = resultNumber Then
                lblResult.Text = "Correct"
            Else
                lblResult.Text = "Wrong"
            End If
        Else
            tbxResult.Text = ""
            lblResult.Text = "Answer Status"
            MsgBox("Please enter your answer in number. Thanks", MsgBoxStyle.Information, "Warning")
        End If

Tương tự, trở về phần thiết kế Form:

• Nhấp đôi vào chổ trống của Form cho nguồn mã Adder_Load

• Nhấp đôi vào nút More cho nguồn mã cmdMore_Click

• Gỏ nguồn mã cho Subroutine (sẽ học cách tạo Subroutine và Function ở các bài kế) SetRandomNumber. Mã ở đây tạo 2 con số ngẫu nhiên từ 1 đến 10000 cho bài toán cộng khi chạy ứng dụng Adder trong phần Adder_Load và trong nút More.

    Private Sub Adder_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        SetRandomNumber()
    End Sub

    Private Sub cmdMore_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles cmdMore.Click
        SetRandomNumber()
    End Sub

    Private Sub SetRandomNumber()
        Dim firstNumber, secondNumber As Integer
        Randomize()
        firstNumber = CInt(Int((10000 - 0 + 1) * Rnd() + 0))
        secondNumber = CInt(Int((10000 - 0 + 1) * Rnd() + 0))
        tbxNumber1.Text = firstNumber
        tbxNumber2.Text = secondNumber
    End Sub

Hình đặc trưng nguồn mã của dự án Adder:

Bước 11:

Nhấp nút Run (như hình dưới đây) để chạy ứng dụng (application) Adder trong môi trường IDE:

Ta thấy bài toán cộng được hình thành với 2 số ngẫu nhiên và chờ ta gỏ vào giải đáp trong hộp chữ kế bên bút Check It. Sau đó, ta nhấp nút này để kiểm tra kết quả. Khi nào muốn làm lại bài toán cộng này, nhấp nút More:

Lưu ý: MS Visual Studio.NET tạo một executable file mặc định là Adder.exe dưới một ngăn chứa cấp dưới (subfolder) BIN. Tập tin này là ứng dụng Adder tạo ra bởi dự án Adder.

Bước 12:

Lưu trữ mọi tập tin với thực đơn File, Save All

Bài làm ở nhà (Homework)

Bài tập 1:

Tạo một dự án Math Test có giao diện gồm các bài toán cộng, trừ, nhân, chia với hình thức tương tự như hình thức trình bày trong dự án Adder. Khi người dùng nhấp nút Check It, ứng dụng (application) sẽ kiểm tra mọi bài toán và hiển thị kết quả đúng hay sai cho từng bài riêng biệt.

Gợi ý: Nhớ linh động sử dụng sáng kiến của mình khi tạo giao diện và viết mã đáp ứng với mọi biến cố có thể xảy ra. Khi nào ... bí, đưa trở ngại lên Diễn Đàn để bàn bạc, trao đổi hay tham khảo kinh nghiệm chung. Xin đừng gởi thư trực tiếp đến các thầy cô trong Vovisoft ... khổ lắm.

Bài tập 2:

Tạo một dự án hiển thị bài thơ dưới đây từng hàng một, mổi hàng hiển thị cách nhau 1 khoãng thời gian ngắn (chừng 5 giây) hoặc cho chạy hàng chữ theo kiểu 'marquee' để tạo chú ý đến người sử dụng:

Rượu

Ai dám bảo rượu là ... thuốc độc
Ấy! những người không tỏ, không tường
Rượu là cao lương, tiên tửu của thánh nhân
Để di dưỡng tinh thần và mài trí
Rượu là ngũ cốc chi tinh túy
Vị thảo thơm, thanh khí vô ngần
Sách có chữ: 'Vô Tữu Bất Thành Lễ'
Nghĩa: không rượu, thời mất cả lễ nghi
Nước Văn Hiến, khác chi tuồng mọi rợ
Văn như Lý Bạch, Lư Linh thửa nọ
Nhờ rượu mà thiên cổ lưu danh
Võ như Quan Vũ thời Tam Quốc gia tính
Cũng đều là bậc trứ danh chi ẩm giả
Vậy thì chén chú, chén anh, chén tôi, chén bác
Cuộc tỉnh say, say tỉnh cùng nhau

  Về trang trước    Bản in    Gửi email    Về đầu trang

Đánh giá - Trao đổi - Nhận xét

Tổng số:  36

Trang:  1/6

Trang sau

  Ý kiến của bạn về bài viết

  Về đầu trang