. .

BAGIAN KE SEPULUH: Merubah Properti Fungsi Tombol/Button Di Java Form (GUI) Pada NetBeans IDE

Posted by CHRISTIANTO D,WIBOWO | D3MI-2016 STMIK BUMI GORA On Rabu, Januari 25, 2017 No comments

BAGIAN KE SEPULUH: How to Change the Properties of a Button on a Java Form (GUI) In NetBeans IDE, Sebelum kita meneruskan mempelajari pembelajaran ini, ada baiknya kita baca artikel-artikel sebelumnya yang terhubung dengan langkah-langkah pembelajaran ini (Link) BAHASA PEMROGRAMAN JAVA PADA NETBEANS IDE.
Big A Lot Of Gratitude To This Learning Resources:
Sebagai refrensi, kita bisa melihat JAVA NETBEANS IDE - MEMBUAT PROGRAM DAN ALGORITMA SERTA FLOWCHART KALKULATOR SEDERHANA, disana kita akan mendapat teori penjelasan singkat, semua langsung pada prakteknya dan kita dipersilahkan mengkopi java code-nya, dan disini kita akan mendapatkan penjelasan detailnya.

Masih dalam Project MyCalculator, dengan Package jCalculator, serta class yang disebut class JavaCalculator.java yang sudah kita buat sebelumnya.
JFrame Form yang sudah dibentuk, dan Form membutuhkan kotak teks/Text box dan beberapa tombol. Dan kita sudah menambahkan kotak teks pertama. Menemukan kontrol Text Field di Palette, dan kita sudah juga menambahkan tombol-tombol fungsi pada calculator kita dan dalam pembelajaran kali ini, kita akan melihat bagaimana untuk mengubah sifat-sifatnya/properti defaultnya sesuai kebutuhan ᴶᵃ˅ᵃ ᵖᴿᴼᵍᴿᵃᴹ kita.

Kembali ke tampilan Design dan pastikan tombol yang kita pilih. Kita dapat mengubah teks pada tombol, sesuai dengan yang kita inginkan adalah nomor/angka untuk kalkulator, satu nomor untuk setiap tombol pada kalkulator. Properti teks digunakan untuk tombol teks. Jadi cari di jendela properti, hapus default dan ketik nomor 1 sebagai gantinya.

Tekan tombol enter pada keyboard dan kita akan melihat perubahan teks pada tombol. Hal ini juga akan merubah ukurannya, seseuai dengan karakter didalamnya.
Anda dapat mengubah ukuran tombol pada jendela properti. Cari Horizontal Size dan Vertical Size, di bawah Layout heading, rubah nilai-nilai ini dari default ke 50, 30:
Kita juga dapat mengubah ukuran font dari jendela properti. Pastikan tombol yang dipilih adalah yang akan kita rubah. Sekarang cari properti font. Klik tombol kecil di sebelah kanan dari baris huruf:

Ketika kita mengklik tombol font, kita akan melihat kotak dialog muncul. Rubah ukuran font 14 poin, dan tebal/Bold:

Kita sekarang perlu menambahkan sembilan tombol lebih dengan cara yang sama, untuk nomor 2-9, dan 0. kita dapat melakukannya dengan mudah dengan mengklik kanan tombol dan memilih Duplikat dari menu yang muncul. Dan Rubah setiap nama variabel untuk btnTwo, btnThree, btnFour, dst hapus teks default, dan masukkan nomor sebagai gantinya.


Rapikan posisi tombol agar berada di tempat yang cocok dan sesuai dengan rancangan form calculator kita, klik tombol untuk memilihnya. Tahan tombol kiri mouse, tetap tekan dan tarik/drag ke lokasi baru/drop di panel. Untuk memindahkan semua tombol sekaligus, pilih panel dan tarik/drag ke lokasi baru/drop. Setelah selesai, daerah Navigator dan tab Design kita akan terlihat seperti ini :


Hanya tiga tombol lagi untuk menambahkan: tombol untuk operator +/tambah, tombol =/sama dengan, dan tombol yang Clear/bersihkan. Kita akan menambahkan panel ke-3 tombol ini sendiri, dan memindahkan ke-3 tombol tersebut ke kanan kalkulator.
Jika bentuk kalkulator kita tidak memiliki ruang di sebelah kanan, kita dapat dengan mudah mengubah ukurannya.
Klik pada Form, dan bukan panel atau bidang teks. Jika kita melakukannya dengan benar, kita akan melihat kotak oranye sekitarnya form. Kita dapat memilih item JFrame dalam Navigator untuk memilih bentuk. Sekarang pindahkan mouse ke tepi form. Pointer mouse harus berubah bentuk, seperti pada gambar di bawah (kanan bawah):


Tahan tombol kiri mouse saat pointer berubah bentuk. Sekarang tarik ke ukuran yang baru. Sekarang kita tambahkan panel di ruang yang baru kita buat, prosesnya sama dengan kita membuat panel untuk tombol angka-angka; BAGIAN KE SEPULUH: Menambahkan Fungsi Tombol/Button Di Java Form (GUI) Pada NetBeans IDE :


Tambahkan tiga tombol pada panel baru. Mengubah nama variabel untuk: btnPlusbtnEquals dan btnClear. Untuk teks pada tombol, ketik + symbol untuk tombol Plus, = symbol  untuk tombol sama dengan, dan kata "clear" untuk tombol bersihkan. Rubah font untuk sama dengan tombol angka, 14 poin tebal. Ukuran untuk tombol btnPlus dan btnEquals harus sama : 50, 30. Untuk tombol btnClear, rubahnya menjadi 70, 30. Form kita akan terlihat seperti ini, kita boleh saja men-RUN ᴶᵃ˅ᵃ ᵖᴿᴼᵍᴿᵃᴹ kita, walaupun masih belum berfungsi calculator, tetapi tampilan sudah bisa di perlihatkan oleh Netbeans IDE :


Untuk mempercantik tampilan calculator-nya, mari kita tambahkan logo sebagai identitas @ authornya. Persiapkan Image pada folder kerja (Folder MyCalculator) dengan ukuran pixel square 70x70, dalam hal ini saya membuat file bumigora.png dengan size pixel 70x70. Pada pallete drag dan drop Label ke Form kita :


Selanjutnya pada jendela NAVIGAROR, klik kanan jLabel1[JLabel], rubah Variabel Name-nya menjadi labelImage, - sehingga pada jendela NAVIGAROR  menjadi  labelImage[JLabel].
Kemudian klik kanan lagi labelImage[JLabel]  dan kemudian pilih Properties  pada drop menu, dan akan muncul jendela property, selanjutnya cari ellipsis button pada Icon ,  yang akan memunculkan jendela Icon, pada jendela Icon pilih option ⊙ External image dan pada option File or URL dibawahnya klik ellipsis yang akan membuka direktory folder MyCalculator dimana kita sudah menaruh file image bumigora.png klik file image-nya yang akan membuat kita kembali ke jendela Icon, lalu klik Finish , kita akan kembali ke jendela Properties dan klik Close , maka file image sebagai logo akan berada disisi kanan atas pada form kita.

Dan Jalankan Programnya :


Sudah terlihat baik tampilannya bukan, Kita akan menambahkan beberapa kode segera. Tetapi kita akan mempelajari kata tentang Events - Java Events .

0 komentar:

Posting Komentar