komponen pada toolbox & properties visual basic
DESCRIPTION
bahan untuk pembelajaran dasar visual basicTRANSCRIPT
SMA Kristen IPEKA 1 Komponen pada ToolBox dan Properties
BAB 2
KOMPONEN PADA TOOLBOX & PROPERTIES
ToolBox
ToolBox merupakan sebuah fitur yang menyediakan berbagai macam komponen visual
yang dapat anda gunakan pada sebuah form ketika anda sedang merancang User Interface dari
sebuah aplikasi yang anda buat. Terdapat berbagai macam elemen visual yang mungkin sudah anda
kenal secara umum. Berikut ini adalah daftar komponen – komponen visual yang sering digunakan
untuk mendesain sebuah User Interface dari program tersebut.
Properties & Property Value
Properties dalam Visual Basic merupakan sifat fisik yang tampak pada suatu objek. Dalam
hal ini objek yang dimaksud adalah setiap bagian yang terdapat dalam aplikasi yang Anda
kembangkan seperti Form, Button, CheckBox, dan sebagainya. Pengaturan Properties adalah langkah
yang dilakukan untuk mengubah sifat fisik dari sebuah objek yang dipilih seperti Warna, Ukuran
Huruf, Ukuran Objek, dan sebagainya. Perlu diingat juga untuk Jenis Objek yang berbeda, misalnya
seperti Button dan ComboBox, belum tentu memiliki Properties yang sama, seperti contoh pada
gambar berikut ini.
Gambar Nama Komponen
Button
CheckBox
CheckedListBox
ComboBox
DateTimePicker
Label
ListBox
RadioButton
TextBox
PictureBox
SMA Kristen IPEKA 2 Komponen pada ToolBox dan Properties
Gambar 2.2.1 Objek yang berbeda Jenisnya, belum tentu memiliki properties yang sama
Property Value adalah nilai dari setiap Property yang ada, yang memberikan identitas
tersendiri bagi setiap objek yang anda letakkan pada sebuah Form. Jadi walaupun ada 2 Objek yang
sejenis, misalnya ada dua buah Button, mereka tidak mungkin memiliki Property Value yang sama
seratus persen. Hal ini disebabkan karena mereka memiliki sebuah Property yang bernama
“(Name)” yang berfungsi sebagai identitas utama dari setiap objek yang ada, dan anda tidak bisa
memberi nilai/value yang sama kepada lebih dari satu objek. Penjelasan terdapat pada gambar
dibawah ini.
SMA Kristen IPEKA 3 Komponen pada ToolBox dan Properties
Gambar 2.2.2 Property Value pada Button1 dan Button2
SMA Kristen IPEKA 4 Komponen pada ToolBox dan Properties
Gambar 2.2.3 Inilah yang akan terjadi jika anda ingin memberi Nilai yang sama pada Property
(Name) didalam dua objek yang berbeda
Pengenalan Komponen
1. Button Button merupakan komponen visual yang berbentuk seperti tombol. Digunakan
sebagai media untuk eksekusi suatu perintah tertentu dengan cara klik pada Button
tersebut.
Gambar 2.3.1 Button
Pada Button, terdapat beberapa Properties yang umum dipakai, Berikut ini adalah
tabel Properties Button.
SMA Kristen IPEKA 5 Komponen pada ToolBox dan Properties
Nama Property Fungsi
(Name) Identitas utama dari Button, nama object yang akan digunakan didalam
code.
Text Merupakan isi tulisan yang berada didalam Button
Font Mengatur jenis tulisan, ukuran, style, serta effects Text pada Button
Size Mengatur ukuran, baik lebar maupun panjang dari sebuah Button
2. Label Label merupakan komponen visual yang berfungsi untuk mencetak tulisan tertentu
kedalam sebuah Form.
Gambar 2.3.2 Label
Pada Label,terdapat beberapa Properties yang umum dipakai. Berikut ini adalah
tabel Properties dari Label.
Nama Property Fungsi
(Name) Identitas utama dari Label, nama object yang akan digunakan dalam
code
Text Merupakan isi tulisan yang berada didalam Label
ForeColor Mengatur Warna dari tulisan Label tersebut.
Font Mengatur jenis tulisan, ukuran, style, serta effects Text pada Label
3. TextBox TextBox merupakan komponen visual yang berfungsi sebagai tempat yang
menampung tulisan yang anda ketik melalui keyboard.
SMA Kristen IPEKA 6 Komponen pada ToolBox dan Properties
Gambar 2.3.3 TextBox
Pada TextBox, terdapat beberapa Properties yang umum dipakai. Berikut ini adalah
tabel Properties dari TextBox.
Nama Property Fungsi
(Name) Identitas utama dari TextBox, nama object yang akan digunakan dalam
code
Text Merupakan isi tulisan yang berada didalam TextBox
PasswordChar Menentukan Karakter yang akan dipakai untuk menyembunyikan tulisan
didalam TextBox tersebut
Multiline Menentukan apakah TextField tersebut bisa lebih dari 1 baris atau tidak
MaxLength Menentukan jumlah maksimal karakter yang bisa berada didalam
TextField tersebut
4. CheckBox CheckBox merupakan komponen visual yang berfungsi sebagai media dalam
melakukan pemilihan terhadap beberapa opsi sekaligus.
Gambar 2.3.4 CheckBox
SMA Kristen IPEKA 7 Komponen pada ToolBox dan Properties
Pada CheckBox. Terdapat beberapa Properties yang umum dipakai. Berikut ini
adalah tabel Properties dari CheckBox.
Nama Property Fungsi
(Name) Identitas utama dari CheckBox, nama object yang akan digunakan dalam
code
Text Merupakan isi tulisan yang berada pada CheckBox
Checked Menentukan apakah kotak pada CheckBox tersebut akan dicentang atau
tidak
CheckAlign Menentukan lokasi kotak terhadap tulisan, defaultnya berada di sebelah
kiri dari tulisan (MiddleLeft)
5. RadioButton RadioButton merupakan komponen visual yang berfungsi sebagai media dalam
melakukan pemilihan terhadap salah satu opsi dari beberapa pilihan yang ada.
Gambar 2.3.5 RadioButton
Pada RadioButton, terdapat beberapa Properties yang umum dipakai. Berikut ini
adalah tabel Properties dari RadioButton
Nama Property Fungsi
(Name) Identitas utama dari RadioButton, nama object yang akan digunakan
dalam code
Text Merupakan isi tulisan yang berada pada RadioButton
Checked Menentukan apakah kotak pada RadioButton tersebut akan dicentang
atau tidak
CheckAlign Menentukan lokasi kotak terhadap tulisan, defaultnya berada di sebelah
SMA Kristen IPEKA 8 Komponen pada ToolBox dan Properties
kiri dari tulisan (MiddleLeft)
Secara default, setiap RadioButton yang langsung masuk ke Form akan tergabung
kedalam satu grup, sehingga tidak ada RadioButton yang bisa dipilih lebih dari satu, seperti
yang terdapat pada gambar dibawah ini
Gambar 2.3.6 Form Sederhana
Jika anda perhatikan, maka pada Form tersebut anda hanya bisa memilih salah satu
dari seluruh RadioButton yang ada, tetapi tentunya anda ingin memisahkan pemilihannya
menjadi kedalam dua grup “Jenis Kelamin” dan “Pendidikan”. anda bisa melakukannya
dengan menggunakan GroupBox yang terdapat pada ToolBox untuk memisahkan
RadioButton tersebut menjadi seperti yang ada pada gambar di bawah ini.
Gambar 2.3.7 Form sederhana setelah diberi GroupBox
6. ComboBox ComboBox merupakan komponen visual dimana anda bisa melakukan pilihan
terhadap opsi – opsi yang ada yang disajikan secara menurun ke bawah (drop down).
SMA Kristen IPEKA 9 Komponen pada ToolBox dan Properties
Gambar 2.3.8 ComboBox
Pada ComboBox, terdapat beberapa Properties umum dipakai. Berikut ini adalah
tabel Properties dari ComboBox.
Nama Property Fungsi
(Name) Identitas utama dari ComboBox, nama object yang akan digunakan
dalam code
Text Merupakan isi tulisan yang berada pertama kali pada text field di dalam
ComboBox
Jika anda ingin menambahkan pilihan pada ComboBox tersebut, anda bisa
melakukannya dengan cara yang akan dijelaskan dibawah ini.
1. Klik pada objek ComboBox yang ingin ditambahkan itemnya
2. Ketika ComboBox tersebut sudah terklik, maka akan muncul gambar panah
kecil di sebelah kanan atas, klik dan pilih “Edit Items”
Gambar 2.3.9
SMA Kristen IPEKA 10 Komponen pada ToolBox dan Properties
3. Akan muncul sebuah pop-up, anda bisa mengisi item – item yang ada pada
setiap barisnya.
Gambar 2.3.10
7. ListBox ListBox merupakan sebuah komponen visual yang menampilkan item - itemnya
secara menurun kebawah. Bedanya dengan ComboBox, dimana pada awalnya hanya terlihat
satu baris saja, ListBox menampilkan item - item tersebut secara langsung.
Gambar 2.3.11 ListBox
Pada ListBox, terdapat beberapa Properties umum dipakai. Berikut ini adalah tabel
Properties dari ListBox.
SMA Kristen IPEKA 11 Komponen pada ToolBox dan Properties
Nama Property Fungsi
(Name) Identitas utama dari ListBox, nama object yang akan digunakan dalam
code
IntegralHeight Menandakan apakah ListBox tersebut dapat menampung Item secara
lengkap atau tidak
ItemHeight Menentukan ukuran tinggi setiap Item dalam satuan pixel
SelectionMode Menentukan apakah setiap Item dalam ListBox dapat dipilih secara
tunggal, lebih dari satu, atau tidak bisa dipilih sama sekali
MultiColumn Menentukan apakah setiap item yang berada dalam ListBox dapat
ditampilkan secara horizontal apabila Item sudah penuh kebawah
Jika anda ingin menambahkan pilihan pada ListBox tersebut, anda bisa
melakukannya dengan cara yang akan dijelaskan dibawah ini.
1. Klik pada objek ListBox yang ingin ditambahkan itemnya
2. Ketika ListBox tersebut sudah terklik, maka akan muncul gambar panah kecil di
sebelah kanan atas, klik dan pilih “Edit Items”
Gambar 2.3.12
3. Akan muncul sebuah pop-up, anda bisa mengisi item – item yang ada pada
setiap barisnya.
SMA Kristen IPEKA 12 Komponen pada ToolBox dan Properties
Gambar 2.3.13
8. CheckedListBox CheckedListBox merupakan komponen visual yang memiliki karakteristik yang
hampir sama dengan ListBox, namun setiap Item yang ditampilkan memiliki CheckBox.
Gambar 2.3.14 CheckedListBox
Pada CheckedListBox, terdapat beberapa Properties umum dipakai. Berikut ini
adalah tabel Properties dari CheckedListBox.
Nama Property Fungsi
(Name) Identitas utama dari CheckedListBox, nama object yang akan digunakan
dalam code
Sorted Menentukan apakah setiap Item yang ditampilkan pada CheckedListBox
sudah diurutkan atau belum
ItemHeight Menentukan ukuran tinggi setiap Item dalam satuan pixel
SelectionMode Menentukan apakah setiap Item dalam CheckedListBox dapat dipilih
secara tunggal, lebih dari satu, atau tidak bisa dipilih sama sekali
MultiColumn Menentukan apakah setiap item yang berada dalam CheckedListBox
dapat ditampilkan secara horizontal apabila Item sudah penuh kebawah
Jika anda ingin menambahkan pilihan pada CheckedListBox tersebut, anda bisa
melakukannya dengan cara yang akan dijelaskan dibawah ini.
SMA Kristen IPEKA 13 Komponen pada ToolBox dan Properties
1. Klik pada objek CheckedListBox yang ingin ditambahkan itemnya
2. Ketika CheckedListBox tersebut sudah terklik, maka akan muncul gambar
panah kecil di sebelah kanan atas, klik dan pilih “Edit Items”
Gambar 2.3.15
3. Akan muncul sebuah pop-up, anda bisa mengisi item – item yang ada pada
setiap barisnya.
Gambar 2.3.16
9. DateTimePicker DateTimePicker merupakan komponen visual yang digunakan untuk melakukan
input dalam format tanggal, bulan dan tahun.
SMA Kristen IPEKA 14 Komponen pada ToolBox dan Properties
Gambar2.3.17 DateTimePicker
Pada DateTimePicker, terdapat beberapa Properties yang umum dipakai. Berikut
ini adalah tabel Properties dari DateTimePicker.
Nama Property Fungsi
(Name) Identitas utama dari DateTimePicker, nama object yang akan digunakan
dalam code
MaxDate Menentukan tanggal maksimum yang dapat dipilih
MinDate Menentukan tanggal minimum yang dapat dipillih
Value Menentukan tanggal yang akan muncul ketika pertama kali tampil
10. PictureBox PictureBox adalah komponen visual yang digunakan untuk memuat gambar
kedalam sebuah Form.
Gambar 2.3.18 PictureBox
SMA Kristen IPEKA 15 Komponen pada ToolBox dan Properties
Pada PictureBox, terdapat beberapa Properties yang umum dipakai. Berikut ini
adalah tabel Properties dari PictureBox.
Nama Property Fungsi
(Name) Identitas utama dari PictureBox, nama object yang akan digunakan
dalam code
Image Menentukan File Image yang akan diambil oleh PictureBox
ErrorImage Menentukan File Image yang akan digunakan ketika Image tidak bisa di-
load
SizeMode Mengontrol bagaimana PictureBox dapat mengatur penempatan
gambar dan ukurannya.
Jika anda ingin menentukan gambar yang ingin ditampilkan di dalam PictureBox,
anda bisa melakukannya dengan mengikuti langkah-langkah berikut.
1. Temukan Property Image pada PictureBox
Gambar 2.3.19 Property PictureBox
2. Klik tombol “…”, kemudian pilih Local Source, kemudian klik Import
SMA Kristen IPEKA 16 Komponen pada ToolBox dan Properties
Gambar 2.3.20
3. Carilah gambar yang ingin dimasukkan, kemudian jika sudah kilk OK
Gambar 2.3.21
LATIHAN
1. Apa yang dimaksud dengan Properties?
2. Menurut anda, apakah dalam dua objek sejenis, anda dapat memiliki Value yang sama?
Jelaskan alasanmu!
3. Sebutkan setiap komponen visual yang anda ketahui!
4. Dari penjelasan sebelumnya, anda mengetahui bahwa secara default, daari setiap
RadioButton yang ada, hanya bisa dipilih satu saja, seolah-olah mereka berada didalam
SMA Kristen IPEKA 17 Komponen pada ToolBox dan Properties
kelompok yang sama. Bagaimanakah cara membagi setiap RadioButton tersebut kedalam
beberapa kelompok yang berbeda?
PRAKTEK
1. Buatlah sebuah Form dengan tampilan berikut ini!