komponen pada toolbox & properties visual basic

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


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.

Go

Highlight


Gambar 2.2.2 Property Value pada Button1 dan Button2


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.


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.


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


Gambar 2.3.3 TextBox

Pada TextBox, terdapat beberapa Properties yang umum dipakai. Berikut ini adalah

tabel Properties dari TextBox.


(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


Pada CheckBox. Terdapat beberapa Properties yang umum dipakai. Berikut ini

adalah tabel Properties dari CheckBox.


(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


(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


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


Gambar 2.3.8 ComboBox

Pada ComboBox, terdapat beberapa Properties umum dipakai. Berikut ini adalah

tabel Properties dari ComboBox.


(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


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.



(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


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


setiap barisnya.


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.


(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



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


setiap barisnya.

Gambar 2.3.16

9. DateTimePicker DateTimePicker merupakan komponen visual yang digunakan untuk melakukan

input dalam format tanggal, bulan dan tahun.


Gambar2.3.17 DateTimePicker

Pada DateTimePicker, terdapat beberapa Properties yang umum dipakai. Berikut

ini adalah tabel Properties dari DateTimePicker.


(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


Pada PictureBox, terdapat beberapa Properties yang umum dipakai. Berikut ini

adalah tabel Properties dari PictureBox.


(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


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


kelompok yang sama. Bagaimanakah cara membagi setiap RadioButton tersebut kedalam

beberapa kelompok yang berbeda?

PRAKTEK

1. Buatlah sebuah Form dengan tampilan berikut ini!

komponen pada toolbox & properties visual basic

Documents