Aplikasi Windows Pertama

Topik ini membangun aplikasi berjendela pertama dengan Windows Forms, kerangka antarmuka grafis .NET yang berjalan di Windows. Form, yaitu jendela utama aplikasi yang dirancang secara visual dan diberi perilaku, dibuat dari templat, lalu struktur berkasnya dibedah satu per satu. Form pertama kemudian diberi satu Label dan satu Button yang terhubung lewat kode. Setelah membaca topik ini, alur kerja Visual Studio dari membuat proyek sampai menjalankan aplikasi dapat diikuti dengan lengkap, dan setiap berkas di dalam folder proyek sudah diketahui perannya.

Membuat proyek di Visual Studio#

Windows Forms disertakan dalam beban kerja pengembangan desktop .NET pada Visual Studio 2022. Pastikan beban kerja tersebut sudah terpasang, lalu ikuti langkah berikut.

1. Buka Visual Studio dan pilih Create a new project pada jendela awal.
2. Ketik Windows Forms pada kotak pencarian templat, pilih templat Windows Forms App dengan bahasa Visual Basic, lalu pilih Next.
3. Beri nama proyek AplikasiPertama, tentukan folder penyimpanannya, lalu pilih Create.
4. Tunggu designer, yaitu perancang visual form, terbuka. Form bernama Form1 tampil kosong di tengah area kerja.

Jendela designer adalah area kerja tempat form dirancang secara visual. Kontrol diambil dari toolbox, yaitu jendela yang menampung semua kontrol siap pakai, mulai dari Button, Label, sampai kontrol untuk data. Apabila toolbox belum tampil, buka lewat menu View lalu Toolbox. Sifat setiap kontrol yang dipilih diatur melalui jendela Properties, misalnya teks Label diatur pada properti Text atau ukuran form pada properti ClientSize. Perubahan pada jendela Properties langsung tercermin di designer, sehingga penataan antarmuka dapat dikerjakan tanpa menyentuh kode sama sekali.

Templat yang sama juga tersedia di luar Visual Studio. Perintah dotnet new winforms -lang VB menghasilkan proyek dengan struktur berkas yang identik, sehingga seluruh pembahasan topik ini tetap berlaku untuk kerja berbasis .NET SDK.

Struktur berkas proyek#

Templat Windows Forms App menghasilkan folder proyek yang berisi empat berkas berikut.

AplikasiPertama/
├── AplikasiPertama.vbproj
├── Form1.vb
├── Form1.Designer.vb
└── Program.vb

Folder AplikasiPertama adalah folder proyek, sedangkan folder induknya disebut solution karena menampung satu atau lebih proyek. Berkas AplikasiPertama.vbproj mendefinisikan properti proyek, dan tiga propertinya paling menentukan. OutputType bernilai WinExe sehingga hasil build berupa program berjendela, TargetFramework bernilai net10.0-windows yang memilih runtime .NET untuk Windows, serta UseWindowsForms bernilai true yang mengaktifkan seluruh pustaka Windows Forms.

Berkas Form1.vb adalah tempat logika form ditulis, sedangkan Form1.Designer.vb memuat kode yang ditulis oleh designer secara otomatis. Kedua berkas mendeklarasikan kelas form yang sama sebagai partial class, yaitu satu kelas yang definisinya dipecah ke beberapa berkas. Compiler menggabungkan kedua bagian tersebut menjadi satu kelas ketika proyek dibangun.

Bagian designer memuat metode InitializeComponent yang mengatur properti awal setiap kontrol, termasuk ukuran area dalam dan judul jendela. Cuplikan berikut memperlihatkan bentuk aslinya pada templat baru.

' tidak-dijalankan
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()>
Partial Class Form1
    Inherits System.Windows.Forms.Form

    <System.Diagnostics.DebuggerStepThrough()>
    Private Sub InitializeComponent()
        components = New System.ComponentModel.Container()
        AutoScaleMode = AutoScaleMode.Font
        ClientSize = New Size(800, 450)
        Text = "Form1"
    End Sub

End Class

Berkas Program.vb memuat titik masuk (entry point) aplikasi, yaitu Sub Main yang menyiapkan pengaturan visual lalu memanggil Application.Run(New Form1). Pemanggilan Application.Run menampilkan form utama dan memelihara loop pesan (message loop), yaitu perulangan pengambilan pesan Windows, sampai form ditutup. Form yang ditampilkan berasal dari kelas Form1 yang didefinisikan pada dua berkas partial di atas.

Kode form pertama#

Contoh pada jalur ini menulis satu kelas form lengkap dalam satu berkas, tanpa berkas designer terpisah. Pendekatan ini dipilih agar setiap baris dapat dibaca, disalin, dan diperiksa compiler .NET SDK tanpa Visual Studio. Pada proyek nyata di Visual Studio, penataan kontrol dikerjakan designer di Form1.Designer.vb, sedangkan berkas form hanya memuat logika. Hasil akhirnya sama, yaitu kelas yang mewarisi Form dengan kontrol di dalamnya. Seluruh kode pada topik ini berjalan di Windows melalui Visual Studio atau dotnet run, dan hanya diperiksa kompilasinya di lingkungan kerja lain.

Berkas berikut adalah form pertama. Label dan Button dibuat sebagai field kelas, disiapkan di konstruktor, lalu didaftarkan ke form melalui Controls.Add.

' tidak-dijalankan
Imports System.Drawing
Imports System.Windows.Forms

Public Class FormUtama
    Inherits Form

    Private WithEvents labelSalam As New Label()
    Private WithEvents tombolSalam As New Button()

    Sub New()
        Text = "Aplikasi Pertama"
        ClientSize = New Size(280, 120)

        labelSalam.Text = "Tekan tombolnya."
        labelSalam.Location = New Point(20, 25)
        labelSalam.Size = New Size(240, 23)

        tombolSalam.Text = "Sapa"
        tombolSalam.Location = New Point(20, 60)
        tombolSalam.Size = New Size(240, 30)

        Controls.Add(labelSalam)
        Controls.Add(tombolSalam)
    End Sub

    Private Sub TombolSalamDiklik(sender As Object, e As EventArgs) Handles tombolSalam.Click
        labelSalam.Text = "Halo, Windows Forms!"
    End Sub

End Class

Beberapa hal pada berkas itu perlu diperhatikan. Kelas FormUtama mewarisi Form, sehingga properti form seperti Text, ClientSize, dan Controls langsung tersedia. Konstruktor Sub New menata ukuran jendela lewat ClientSize, yaitu ukuran area dalam form tanpa bilah judul dan tepinya, kemudian menempatkan kedua kontrol dengan Location dan Size dalam satuan piksel. Klausa Handles pada akhir prosedur TombolSalamDiklik mengaitkan prosedur itu dengan kejadian (event) Click milik tombolSalam, sehingga teks Label berganti setiap kali tombol ditekan. Mekanisme event dibedah penuh pada topik Pola Pikir Berbasis Event.

Tampilan jendela yang dihasilkan berkas tersebut diperlihatkan demo berikut. Demo ini hanyalah ilustrasi HTML yang meniru tampilannya, bukan tangkapan layar aplikasi. Tekan tombolnya untuk melihat pergantian teks Label.

Menjalankan aplikasi di Windows#

Aplikasi Windows Forms hanya dapat dijalankan di Windows, dan Visual Studio menjadi cara utamanya. Tekan F5 atau pilih menu Debug lalu Start Debugging, dan jendela Aplikasi Pertama tampil di layar dengan kedua kontrol pada posisinya. Menekan tombol Sapa mengganti teks Label, sementara menutup jendela mengakhiri program.

Tanpa Visual Studio, aplikasi yang sama dijalankan dari terminal Windows di dalam folder proyek.

# tidak-dijalankan
# masuk ke folder proyek
cd AplikasiPertama
# mengompilasi dan menjalankan aplikasi
dotnet run

Perintah dotnet run mengompilasi proyek terlebih dahulu, lalu meluncurkan hasilnya. Apabila compiler menemukan kesalahan sintaks, daftar error muncul di terminal dan jendela aplikasi tidak diluncurkan sampai kesalahan itu dibereskan. Jendela yang sudah tampil ditutup dengan tombol silang sebagaimana jendela Windows lainnya, dan penutupan itu mengakhiri loop pesan sekaligus programnya.

Kesalahan umum#

Tiga kesalahan berikut paling sering muncul saat proyek Windows Forms pertama dibuat.

1. Menambahkan kelas form ke proyek console. Compiler menolaknya dengan pesan bahwa tipe Form tidak didefinisikan karena pustaka Windows Forms belum diaktifkan. Perbaikannya adalah memulai dari templat Windows Forms App atau menata UseWindowsForms bernilai true pada berkas .vbproj.
2. Menyunting Form1.Designer.vb secara manual. Designer menulis ulang berkas itu setiap kali form disunting secara visual, sehingga perubahan manual dapat hilang atau membuat designer gagal membuka form. Logika aplikasi ditaruh di Form1.vb, sedangkan berkas designer dibiarkan dikelola designer.
3. Lupa memanggil Controls.Add. Kontrol yang hanya dibuat dengan New tidak pernah tampil karena belum menjadi anggota form. Setiap kontrol yang dibuat dari kode wajib didaftarkan melalui Controls.Add agar ikut digambar.

Ringkasan#

• Proyek Windows Forms App memuat Form1.vb untuk logika, Form1.Designer.vb yang ditulis designer, Program.vb sebagai titik masuk, dan berkas .vbproj yang mengaktifkan UseWindowsForms.
• Form1.vb dan Form1.Designer.vb membagi satu kelas sebagai partial class, sehingga kode designer dan logika aplikasi tetap terpisah di dalam kelas yang sama.
• Kontrol didaftarkan ke form melalui Controls.Add, diposisikan dengan Location dan Size, dan perilakunya dihubungkan lewat klausa Handles.
• Aplikasi dijalankan di Windows dengan F5 pada Visual Studio atau dotnet run di dalam folder proyek.

Referensi#

• Windows Forms for .NET — Microsoft Learn — Dokumentasi utama Windows Forms dari gambaran umum sampai kontrol lanjutan.
• Create an app with Visual Studio — Microsoft Learn — Panduan resmi membuat proyek Windows Forms dari Visual Studio.
• Form Class — Microsoft Learn — Referensi kelas Form beserta properti ClientSize dan Controls.
• Application.Run Method — Microsoft Learn — Penjelasan loop pesan yang menampilkan form utama.
• dotnet new — Microsoft Learn — Perintah .NET SDK untuk membuat proyek dari templat, termasuk winforms.