Demonstrasi event klik tombol

Pada bagian ini kita akan menambahkan event ke tombol, ketika tombol diklik, kode dapat menjalankan berbagai operasi. Kita akan mendemonstrasikan dua fungsi: klik satu tombol untuk mengubah teks tombol, klik tombol lain untuk menutup form jendela.

Buat Proyek Antarmuka Grafis Baru

Klik menu utama di bagian atas: Project (Proyek) → New Project (Proyek Baru) → Application (Aplikasi) (bisa juga dibuat melalui File (Berkas) → New → Project → Application) untuk menghasilkan program GUI grafis baru sepenuhnya.

Atau

Setelah dibuat, beberapa jendela akan muncul: bilah menu utama di atas, Object Inspector (Pemeriksa Objek) di sebelah kiri, dan Source Editor (Penyunting Kode) yang menempati sebagian besar layar.

Tambah Dua Tombol di Form

Di bawah bilah menu atas terdapat bilah tab kategori kontrol

Kotak merah di atas adalah bilah kategori kontrol yang dibagi menjadi tab-tab. Tab pertama adalah Standard (Kontrol Standar), tab kedua Additional…

Jika tab «Standard» belum terpilih, klik untuk memilihnya;

Cari ikon tombol (persegi dengan tulisan OK) lalu klik, kemudian klik bagian kiri form Form1. Tombol bernama Button1 akan muncul di form;

Klik kembali ikon tombol di bilah Standard, lalu klik bagian kanan form untuk membuat tombol kedua Button2.

Jika kurang paham langkah-langkahnya, silakan lihat video pelajaran sebelumnya.

Ikuti langkah di atas untuk menambahkan dua tombol.

Atur Teks Button1 dan Tulis Event Klik

Klik satu kali untuk memilih Button1. Object Inspector di sebelah kiri akan menampilkan semua propertinya:

Jika panel pengaturan ini tersembunyi, klik tombol panah di bilah kontrol untuk menampilkannya (atau tekan F12 untuk beralih tampilan form dan kode).

Setelah memilih tombol pertama, bagian atas panel kiri menunjukkan kontrol aktif adalah Button1, dan bagian bawah panel memiliki dua tab: Properties (Properti) dan Events (Event).

Tab Properties digunakan untuk mengatur tampilan, gaya, ukuran dan pengaturan visual tombol lainnya.

Tab Events digunakan untuk mengaitkan aksi interaktif tombol seperti klik, kursor masuk, kursor keluar, dll.

• Cari properti paling atas Caption (Judul), ganti nilai default Button1 menjadi Press, tekan Enter atau klik area kosong, teks tombol akan berubah secara otomatis;
• Beralih ke tab «Events» di Object Inspector, di sini tersimpan semua event yang bisa dipicu tombol (OnClick, OnMouseEnter, OnMouseLeave, dll.);
• Cari OnClick (event klik), klik tombol tiga titik ... di sebelah kanannya. Editor akan langsung berpindah ke halaman kode dan membuat fungsi klik kosong:

Klik area kosong untuk konfirmasi perubahan, teks tombol di form akan ikut berubah.

Biarkan tombol terpilih dan beralih ke tab Events.

Tab ini menampilkan semua event bawaan tombol, kita bisa mengaitkan aksi apapun. Ambil contoh OnClick: ketika pengguna klik kiri tombol, metode event yang dikaitkan akan dijalankan.

Pilih baris OnClick lalu klik tombol ... di sebelah kanan untuk membuat fungsi event kosong.

Tambahkan satu baris kode di antara begin dan end agar teks tombol berubah setelah diklik.

procedure TForm1.Button1Click(Sender: TObject);
begin
  Button1.Caption := 'Press again'; // salin kode ini
end;
Code language: JavaScript (javascript)

Saat program dijalankan, klik tombol akan menjalankan kode di dalam blok tersebut, kita masuk ke bagian logika Pascal untuk membuat berbagai operasi bisnis. Sebagian besar program GUI menggunakan pola pengembangan berbasis event seperti ini.

Pintasan F12 untuk cepat kembali ke tampilan desain form.

Atur Teks Button2 dan Event Tutup Program

Pilih Button2, di Object Inspector ubah properti Caption menjadi Exit;

Lakukan hal yang sama untuk event OnClick, klik ... untuk lompat ke kode dan tulis perintah tutup jendela:

procedure TForm1.Button2Click(Sender: TObject);
begin
  Close; // tutup jendela dan keluar dari program
end;Code language: JavaScript (javascript)

Simpan Proyek (Sering-seringlah Simpan)

Pilih menu atas Project → Save Project As (Simpan Proyek Sebagai), simpan dulu berkas unit form (akhiran .pas);

Kemudian jendela pop-up akan meminta menyimpan berkas konfigurasi proyek (akhiran .lpi).

Peringatan: Nama berkas unit dan nama proyek tidak boleh sama persis, jika tidak saat kompilasi akan muncul error «pengidentifikasi duplikat»

Kompilasi dan Jalankan Program

Dua cara menjalankan:

• Menu: Run (Jalankan) → Run;
• Pintasan: langsung tekan F9. Perangkat lunak akan kompilasi dan hubung kode terlebih dahulu, jika tidak ada kesalahan program jadi akan langsung terbuka.

Saat dijalankan akan muncul jendela murni (tanpa titik grid desain), ini adalah jendela utama perangkat lunak:

• Klik tombol Press, teks tombol berubah menjadi Press again;
• Klik tombol Exit, jendela tertutup dan program keluar, otomatis kembali ke tampilan desain bergrid untuk mengubah kode lagi.