BAB IV

INTERAKSI DELPHI MELALUI VCL

A. Visual Component Library

Sebagai hahasa pemrograman berbasis objek (object), Delphi menydiakan objek-objek
yang sangat kuat dan berguna. Dengan objek yang sudah tersedia ini, pemrogram akan
mendapat kemudahan untuk merancang program aplikasi karena untuk membuat operasi
tertentu maka pemrogram cukup menggunakan objek ke dalam program aplikasi dan
mengontrolnya.
Dalam delphi, kumpulan object yang sudah disediakan ditampung dalam Visual
Component Library atau disingkat sebagai VCL. Delphi juga menyediakan Component Library
Cross-Platform (CLX). CLX hampir sama dengan VCL, perbedaannya adalah VCL dipakai
untuk bekerja dalam sistem Windows, sedangkan CLX dipakai jika Anda hendak m e m b u a t
program lintas platform.
Delphi menyediakan VCL yang dapat diakses dari Tool Palette. Anda dapat menampilkan
atau menyembunyikan Tool Palette dari layar dengan memilih menu View > Tool Palette. Tool
Palette terdiri dari beberapa kategori, antara lain Standard, Win32, dan lain lain. Satu kategori,
misalnya Standard, terdiri dari beberapa komponen atau object. Tidak semua objek atau
komponen dibahas disini karena terlalu banyak, yang dibahas disini cukup dalam kategori
Standard saja dulu..

1. Komponen Standar
Objek pada komponen standart ini yang sering dipakai atau dipergunakan oleh para
pemrogram, objek ini antara lain label, edit, button, radio button, check box, list box, combo box,
popmenu, radio group, dll
 Gambar 5.1 Komponen Standart
a) Label
Object Label (TLabel) biasanya dipakai untuk membuat tulisan/label yang
bersifat tetap. object ini sangat sering dipakai pada program aplikasi karena
bersifat umum dan diperlukan pada hampir semua program aplikasi (project).
b) Edit
Object Edit (TEdit) biasanya dipakai untuk masukan dan keluaran data pada layar
monitor, sama halnya denagan label objek ini juga bersifat umum.
c) Button
Obje Button (TButton) biasanya dipakai untuk menjalankan procedur tertentu,
sama halnya dengan objek sebelumnya objek ini juga bersifat umum
d) GroupBox
GroupBox biasanya dipakai untuk membuat membingkai mengelompokkan
beberapa object tertentu.
e) RadioButton
RadioButton dipak untuk menampilkan beberapa pilihan di mana hanya satu piliha
yang dimungkinkan untuk dipilih.
f) CheckBox
Oject TCheckBox hampir sama dengan object TRadioButton. Bedanya, pada
TCheckBox dapat dipilih beberapa pilihan sekaligus dalam satu grup pilihan,
 sedangkan pada TRadioButton hanya dapat dipilih satu pilihan dalam satu grup
pilihan.
g) ComboBox
Objek TComboBox merupakan gabungan dari object TEdit dan TListBox. Dengan
object ComboBox, Anda dapat menampilkan atau mengetik suatu teks seperti
halnya pada object TEdit dan dapat memilih pilihan dari daftar pilihan seperti
kemampuan yang dimiliki pada object TListBox.
h) ScrollBar
Object TScrollBar dapat dipakai untuk membuat object bata gulung. Arah
batangnya dapat datar (horisontal) maupun tegak (vertikal), bergantung setting
property Kind yang dapat dipilih untuk bernilai sbHorizontal atau sbVertical.
i) Pesan ( MessageDlg , ShowMessage , InputBox)
Perintah ini yaitu untuk menampilkan pesan. Fungsi ini mempunyai empat
parameter. Untuk rincinya anda dapat melihat Bantuan (F1).
Rumus : MessageDlg(‘Pesan tampilan’, Tipe Message, Tombol, Help)
ShowMessage(‘Pesan’);
InputBox(‘Pesan’);
- Parameter pertama : kalimat yang akan dimunculkan (pesannya)
- Parameter kedua : tipe message box seperti mtWarning, mtError,
mtInformation, atau mtConfirmation, mtCustom, dll.
- Parameter ketiga : kumpulan tombol yang akan digunakan seperti mbYes,
mbNo, mbOK, mbCancel, mbAbort, mbRetry, mbIgnore, mbAll, mbHelp.
Sedangkan untu tipe Return Value : mrNone, mrYes, mrNo, mrOK, mrcancel,
mrAbort, mrIgnore, mrAll.
- Parameter keempat : untuk help context atau nomor halaman pada Help, beri
angka nol jika anda tidak mempunyai file help.

Contoh :
MessageDlg (‘Hello, Girl’, mtInformation, [mbOK], 0);
MessageDlg (‘Hello, Boys’, mtInformation, [mbYes,mbNo], 0);
ShowMessage(‘Tekan Tombol Yes Untuk Keluar’);
InputString := InputBox(‘Masukkan Nama’,’Please Enter Your Name’,’’);
2. Properti Label
Dalam pengunaan suatu objek, Delphi menyediakan properti dan event. Pada beberapa object,
akan terdapat property yang sama atau mirip dengan properti pada object lain. Jumlah properti pada
semua object sangat banyak sehingga tidak mungkin dibahas semuanya. Yang paling penting
adalah Anda mengetahui cara mengubah atau mengambil nilai property pada suatu object.
Property dapat atur saat desain (menggambar) object atau saat program dijalankan lewat kode
program. Property pada object Label yang sering dipakai adalah sebagai berikut:
a) Align
Property ini adalah untuk menentukan perataan object label terhadap object Parent,
yaitu object tempat label tersebut berada. Pilihannya antara lain adalah alBottom,
alClient, alLeft, alnone alRight, dan alTop. Pilihan antara lain :
 alBottom adalah untuk perataan ra bawah,
 alClient untuk rata ke seluruh object Parent,
 alLeft unt rata kiri, alNone untuk tanpa perataan,
 alRight untuk rata kana dan a1Top untuk rata atas.
Property ini dapat diatur saat desain atau saat program dijalankan. Contoh
pengaturan saat program dijalankan adalah seperti berikut ini:
Labell.Align := alBottom;
b) Alignment
Property ini menghasilkan atau menentukan perataan label pada kotak object label.
Anda dapat mengaturnya menjadi taLeftJustify untuk rata kiri, taRightJustify untuk
rata kanan, dan taCenter untuk rata tengah. Property Alignment hanya berlaku jika
label terdiri dari beberapa baris dan property WordWrap berisi True Pengaturan
pada program dapat Anda lakukan deng mengetikkan kode program berikut:
Labell.Alignment := taLeftjustify; 'untuk rata kiri
Labell.Alignment := taRightJustify; 'untuk rata kanan
Labell.Alignment := taCenter; ‘untuk rata tengah
c) Anchors
Anchors dipakai untuk menentukan perataan object label terhadap object parent
jika object parent diubah ukurannya. Jika Anda mengklik tanda plus di sebelah kiri
tulisan Anchors maka akan muncul detail pilihannya, yaitu akLeft, akTop, akRight,
dan akBottom.
d) Autosize
Property AutoSize dipakai untuk menentukan apakah ukuran label akan otomatis
menyesuaikan terhadap isi property Caption-nya. Dapat ber nilai True atau False.
e) Caption
Caption akan menentukan isi label yang berupa sembarang string.
f) Color
Color berfungsi untuk menentukan warna label.
g) Enable
Enable menentukan apakah label dapat ditampilkan secara normal atau tidak. Jika
bernilai True maka label akan ditampilkan normal mengikuti setting yang
ditentukan, sedangkan jika bernilai False maka label ditampilkan tanpa warna dan
tulisannya menjadi berupa lekukan saja.
h) Font
menentukan font yang dipakai label.
i) Name
Name menentukan nama object label. Nama object nantinya akan dipakai juga
dalam nama procedure atau fungsi yang dihubungkan dengan object yang
bersangkutan.
j) Transparent
Jika bernilai True maka object label akan transparan, artinya jika dibawahnya ada
object lain maka object lain tersebut akan tetap terlihat.
k) Visible
Jika Visible bernilai True maka object label akan ditampilkan, sedangkan jika
bernilai False maka object label tidak akan ditampilkan.
l) WordWrap
 Untuk WordWrap bernilai True dan isi label melebihi ukuran object label maka isi
label akan melipat ke bawah. Jika WordWrap bernilai False maka isi label tidak
akan melipat dan dapat terpotong.

3. Property Edit
Sebagian property object Edit bernilai sama dengan property, object Label, tetapi ada
beberapa yang berbeda dan/atau mempunyai arti yang tidak persis sama. Pada bagian ini akan
membahas bagian yang berbeda tersebut.
a) AutoSelect
Jika bernilai True, akan menyebabkan seluruh teks dalam obje Edit akan terpilih
(terblok) pada saat object Edit dalam fokus.
b) BorderStyle
Properti ini menentukan tipe pembatas object Edit.

c) CharCase
CharCase menentukan pengubahan huruf besar dan kecil. Jika bernilai
ecUpperCase maka seluruh teks akan diubah menja huruf besar, jika bernilai
ecNormal maka teks tidak akan diubah dan jika bernilai ecLowerCase maka seluruh
teks akan diubah menjadi huruf kecil.
d) Hint
Hint dapat diisi teks yang akan ditampilkan jika penunjuk mouse menunjuk pada
object Edit dengan syarat property ShowHint bernilai True.
e) MaxLength
MaxLength dapat diisi angka untuk menentukan lebar maksimu teks yang dapat
dimasukkan.
f) PasswordChar
PasswordChar dipakai untuk menentukan karakter yang akan di tampilkan di layar
sebagai pengganti tiap karakter yang ada object Edit. Jadi, jika property
PasswordChar diisi dengan "*" maka setiap kali ada pengetikan, akan dimunculkan
tanda “*”, bukan karakter sesungguhnya, tetapi dalam memori Text sesungguhnya
akan berisi karakter yang diketik.
 g) PopupMenu
Propery ini menentukan menu pop-up jika object Edit ditunjuk lalu diklik kanan.
h) ReadOnly
Jika bernilai True, maka teks tidak dapat diedit.
i) ShowHint
Jika properti ini bernilai True maka isi property Hint akan ditampilkan saat
penunjuk mouse menunjuk object Edit.
j) TabOrder
Properti ini dapat diisi angka yang menunjukkan urutan fokus object jika ada
penekanan tombol Tab atau Shift+Tab.
k) Text
Text menunjukkan isi teks object Edit.

4. Propety Button
Properti object Button sebagian besar sama dengan property object label dan object Edit.
Kita hanya membahas beberapa saja, yaitu sebagai berikut ini.
a) Cancel
Pilihan true menyebabkan program akan menjalankan event OnClick jika tombol
Esc ditekan.
b) Default
Ini menentukan apakah suatu button merupakan default dari Button lainnya dalam
satu form. Jika bernilai True maka penekanan tombol ENTER akan berakibat
seperti memilih (klik) button yang bersangkutan. Dalam satu form hanya ada satu
default button. Jika dipilih lebih dari satu button sebagai default maka property
Default yang sah adalah pada Button pertama.
B. Memahami Kode Program
Kode program yang di diketikkan umumnya berguna untuk memberikan reaksi atas event
tertentu dari suatu komponen. Contoh : Kode program di Event OnClick pada komponen Button1
akan dilaksanakan hanya saat tombol Button1 di-click. Untuk memilih event apa yang akan diberi
kode program pada sebuah komponen dapat dipilih dari Object Inspector
Untuk itu perlu dipahami bagaimana cara menentukan kode program tersebut.
1. Perintah yang sering digunakan :
 Application terminate;
Form1.show;
Form1.showmodal;
Form1.close;
Inttostr()
Strtoint()
floattostr()
Strtofloaty()
Floattostr()
Showmessage(pesan);
Messagedlg(pesan,typepesan,typebutton,integer), dll
2. Kode program yang melibatkan komponen
Bentuk umum :
<Nama_komponen.nama_property>
Contoh :
Labe1l.caption
Bentuk lain :
<Nama_komponen.nama_method>
Contoh :
Form1.show

Memberikan nilai ke property komponen :

Contoh :
Label1.caption := ‘Penjumlahan’;
Label1.font.color := clblack;

C. Contoh Aplikasi Program

1. Menempatkan Object Label, Edit, Button, RadioButton dan GroupBox ke dalam Form
Buka Aplikasi Boraland Delphi dan Desainlah sebuah form seperti contoh berikut ini
 Radio
Button
Label

GroupBox

EditBox

Button
Gambar 5.2 contoh penggunaan objek Label, EditBox, Button dan RadioButton
2. Mengatur Properti
Setelah selesai menempatkan objek ke dalam form maka objek-objek tersebut perlu diatur
propertinya agar sesuai dengan yang diinginkan. Untuk pengaturan properti masing-masing objek
agar lebih jelas perhatikan tabel berikut ini :
Tabel 5.1 Properti pada Objek
Object Properti Nilai
Form Caption Form Object Label, Edit, Button
Name Form1
Label1 Caption Namabarang
Label2 Caption Harga Satuan
Label3 Caption Banyak
Label4 Caption Jumlah
Label5 Caption Discount
Label6 Caption Jumlah Bersih
Edit1 Name Ednmbrg
Text Kosongkan
Edit2 Name edHrg
Text Kosongkan
Edit3 Name Edbanyak
 Text Kosongkan
Edit4 Name Edjml
Text Kosongkan
Edit5 Name Eddisc
Text Kosongkan
Edit6 Name Edbersih
Text Kosongkan
Button1 Caption Hitung
Button2 Caption Selesai
GroupBox Caption Discount
RadioButton1 Caption Ya
RadioButton2 Caption Tidak

3. Menuliskan Kode Program

Sebuah form yang sudah dibangun serta diatur propertinya ketika form tersebut di run
(diajalankan ) tidak akan bekerja sesuai dengan yang kita inginkan, untuk itu perlu adanya penulisan
kode program agar setiap objek yang kita ingikan sesuai dengan kebutuhan kita.
a) Contoh penulisan kode program pada objek form create dengan maksud saat form di Run
/ Jalankan akan menon-aktifkan editbox jumlah, discount dan bersih agar tidak dapat
disisi oleh operator karena merupakan hasil sebuah proses, kode programnya sebagai
berikut ( klik 2X pada form )

b) Tuliskan kode program yang lain pada objek Tombol Hitung ( klik 2X pada tombol
hitung ) dan berikut kodenya
c) Untuk Tombol selesai Anda bisa menuliskan kode programnya sebagai berikut ( klik 2X
dulu pada tombol selesai :

d) Jalankan program tersebut dengan klik Run pada toolbar (F9), Jika benar hasilnya seperti
terlihat dibawah ini.

Gambar 5.3 Contoh Hasil Penggunaan Objek Label

 e) Pada input barang silahkan isi datanya ( Buku Tulis Kyky), Pada input Harga satuan isi
berapa hargnya ( 2500 ), Panda input banyak isi berapa banyak barang ( 5), Dapat
discount tidak ?, jika ya klik radio button ya , jika tidak klik radio button tidak
f) Untuk melihat hasilnya klik tombol hitung maka pada proses jumlah, discount dan bersih
akan terisi secara otomatis
g) Silhakan Anda klik tombol selesai dan Simpan proyek tersebut dengan cara : Klik Menu
File  Pilih Save All  ketikan nama unitnya dulu ( ulabel.pas)  Klik Save 
Ketikan Nama Projectnya Plabel.DPR  Klik Save ( Jangan lupa drive tujuannya).

D. Contoh Aplikasi dengan CheckBox, ComboBox dan ScrollBar

1. CheckBox
Kegunaan object TCheckBox hampir sama dengan object TRadioButton. Bedanya,
pada TCheckBox dapat dipilih beberapa pilihan sekaligus dalam satu grup pilihan, sedangkan
pada TRadioButton hanya dapat dipilih satu pilihan dalam satu grup pilihan, Jadi jika Anda
memilih satu pilihan maka pilihan pada TRadioButton yang lain dalam satu grup dibatalkan.
Pada object TCheckBox Anda dapat juga menggunakan property Checked seperti pada
TRadioButton yang dapat berisi True atau False. Selain itu, pada object TCheckBox Anda
dapat pula menggunakan property State yang dapat berisi cbUnchecked untuk tidak
terpilih, cbChecked untuk terpilih, dan cbGrayed untuk terpilih tetapi agak redup yang
biasanya menunjukkan terpilih sebagian.
Dalam satu form, Anda dapat membuat beberapa grup pilih TRadioButton. Dalam satu
grup hanya boleh dipilih satu pilihan sehingga untuk beberapa grup dapat dipilih beberapa
pilihan. Untuk mengelompokkan pilihan radioButton, dapat digunakan object TGroupBox atau
TRadioGroup. Pada TCheckBox, Anda tidak memerlukan pengelompokan (grup) karena satu
buah TCheckBox memang berdiri sendiri, tidak bergantung pada TCheckBox yang lain. Akan
tetapi supaya tampilan lebih baik kadang kala Anda perlu membuat beberapa TCheckBox
dalam satu TGroupBox.
Contoh Aplikasi program dengan checkbox ,
a) Buka kembali proyek Plabel yang pernah Anda buat sebelumnya.
b) Simpan dulu unitnya dengan Save As ( UcheckBox.pas ) dan project-nya dengan
Save As juga dengan nama PcheckBox.DPR
c) Hapus kedua object TRadioButton dengan mengklik salah satu TRadioButton lalu
tekan tombol Del atau Delete. Dengan cara yang sama lakukan pula pada object
TRadioButton lainnya.
d) Klik (pilih) icon TCheckBox pada Tool Palette. Selanjutn gambarlah object
TCheckBox pada TGroupBox dengan cara mengklik daerah TgroupBox, lalu drag
(seret) sesuai ukur yang diinginkan seperti pada Gambar 5.4 Object TGroupBox
yang dipakai boleh saja TGroupBox lama bekas tem TRadioButton atau yang baru
Anda buat lagi.
e) Ulangi langkah nomor c dan d untuk mendapatkan object TCheckBox yang kedua.
Setelah itu, ubahlah property Caption pada object TCheckBox yang pertama dengan
tulisan Kartu Anggota dan pada object TCheckBox yang kedua deng tulisan Cash.
f) Jika sudah hasil desain formnya seperti terlihat pada gambar berikut ini.

Gambar 5.4 Desain Form Dengan CheckBox

g) Atur Propertinya jika belum, seperti contoh berikut ini
Object Properti Nilai
Form Caption Form Object Label, Edit, Button
Name Form1
Label1 Caption Namabarang
Label2 Caption Harga Satuan
Label3 Caption Banyak
Label4 Caption Jumlah
Label5 Caption Discount
Label6 Caption Jumlah Bersih
Edit1 Name Ednmbrg
 Text
Kosongkan
Edit2 Name edHrg
Text Kosongkan
Edit3 Name Edbanyak
Text Kosongkan
Edit4 Name Edjml
Text Kosongkan
Edit5 Name Eddisc
Text Kosongkan
Edit6 Name Edbersih
Text Kosongkan
Button1 Caption Hitung
Button2 Caption Selesai
GroupBox Caption Discount
CheckBox1 Caption Kartu Anggota
Name ChkAnggota
CheckBox2 Caption Cash
Name ChkCash

h) Berikan kode program pada form create dengan cara klik 2x pada form tersebut
dengan maksud agar editbox jumlah, discout dan bersih tidak dapat disisi ( proses )

i) Lanjutkan memberi kode program pada tombol hitung dengan cara klik 2x pada
tombol tersebut.
j) Tuliskan juga kode program untuk tombol selesai dengan cara klik 2x pada tombol
tersebut

k) Jalankan program tersebut diatas dengan dengan Run (F9), jika benar hasilnya
seperti contoh berikut ini.
 Gambar 5.5 Hasil Form dengan CheckBox
l) Klik tombol selesai dan simpan kembali project tersebut dengan cara klik menu
File  klik Save All
2. ComboBox
Object ComboBox merupakan gabungan dari object TEdit dan TListBox. Dengan object
ComboBox, Anda dapat menampilkan atau mengetik suatu teks seperti halnya pada object
Tedit dan dapat memilih pilihan dari daftar pilihan sepert kemampuan yang dimiliki pada
object TListBox..
Untuk memahami cara penggunaan TComboBox secara umum desainlah sebuah form
seperti contoh berikut ini :
a) Bukalah project baru lalu simpan dengan nama UcomboBox ( unitnya ) dan
PcomboBox ( projecnya )
b) Tempatkan beberapa objek seperti contoh gambar dibawah ini

Gambar 5.6 Objek ComboBox

c) Aturlah Propertinya seperti tabel dibwah ini
Object Properti Nilai
 Label1 Caption Valuta Asing
Label2 Caption Jumlah
Label3 Caption Nilai Tukar Rupiah
Label4 Caption Kurs
ComboBox Name Cmbvaluta
Edit1 Name Edjumlah
Edit2 Name Edrupiah
Edit3 Name Edkurs
Button Caption Selesai
Name Btnselesai

d) Ketikan kode programnya pada objek tertentu

 Objek Form Create

Keterangan :
Maksud pemberian kode tersebut adalah , jika program dijalankan maka program
akan menambahkan daftar pilihan ke dalam objek cmbvaluta. Sedangkan
edjumlah.onchange := edkurs.onchange maskudnya adalh jika terjadi perubahan
pada edjumlah maka aksi yang dilakukan adalah sama dengan jika ada perubahan
pada objek edkurs.

 Objek Edkurs.OnChange
 Objek CmbValuta.OnChange

 Objek BtnSelesai
 e) Jalankan Program tersebut dengan cara Klik toolbar Run ( F9), Jika Benar hasilnya
seperti contoh berikut ini

Gambar 5.7 Hasil objek combox setelah dijalankan

3. ScroIIBar
Object TScrollBar dapat dipakai untuk membuat object bata gulung. Arah batangnya
dapat datar (horisontal) maupun tegak (vertikal), bergantung setting property Kind yang dapat
dipil untuk bernilai sbHorizontal atau sbVertical. Untuk memahami secara umum penggunaan
ScrollBar, berikut ini. ikutilah langkah-langkahnya
a) Bukalah project baru lalu simpan dengan nama UScroll ( unitnya ) dan PScroll
( projecnya )
b) Tempatkan beberapa objek seperti contoh gambar dibawah ini

Gambar 5.7 Form dengan Objek ScrollBox

c) Aturlah Propertinya seperti tabel dibwah ini
Object Properti Nilai
Label1 Caption Panjang
Label2 Caption Lebar
Label3 Caption Luas
Edit1 Name EdPanjang
Edit2 Name EdLebar
Edit3 Name EdLuas
Scrollbar1 Name sbPanjang
Scrollbar2 Name sbLebar
Button Caption Selesai
Name Btnselesai

d) Ketikan kode programnya pada objek tertentu

 Objek Form Create

Keterangan :
Nilai scrool
 Objek Scrollbar sbPanjang.OnChange
  Objek Tombol Selesai BtnSelesai.OnClick

e) Jalankan Program tersebut dengan cara Klik toolbar Run ( F9), Jika Benar hasilnya
seperti contoh berikut ini