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.
Gambar

Nama Komponen
Button
CheckBox
CheckedListBox
ComboBox
DateTimePicker
Label
ListBox
RadioButton
TextBox
PictureBox

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.

SMA Kristen IPEKA

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

Komponen pada ToolBox dan Properties

Gambar 2.2.2 Property Value pada Button1 dan Button2

SMA Kristen IPEKA

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

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

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

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

SMA Kristen IPEKA

Menentukan lokasi kotak terhadap tulisan, defaultnya berada di sebelah

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

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

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

10

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

11

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

12

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

13

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

14

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 diload

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

15

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

16

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!

SMA Kristen IPEKA

17

Komponen pada ToolBox dan Properties