STRUKTUR KONTROL USER INTERFACE NETBEANS

MENERAPKAN PEMBUATAN ANTARMUKA (USER INTERFACE) PADA APLIKASI 

NETBEANS IDE 8.2

Pada pertemuan ini, kita akan belajar bagaimana caranya membuat tampilan user interface dengan menggunakan aplikasi Netbeans IDE 8.2. Pada kesempatan ini , kita akan mendalami penggunaan jForm. Di dalam jform tersebut, kita dapat menyusun sebuah form yang di dalam nya terdapat beberapa tools  seperti label, textbox, button, dsb yang memiliki fungsi seperti visual pada windows. 

Untuk percobaan pertama, kita akan membuat tampilan seperti di bawah ini pada aplikasi Netbeans kalian

Perhatikan gambar di atas!. Kita akan membuat :

• 2 buah textfield
• 3 buah label
• 1 buah button

Caranya adalah sebagai berikut :

1. Buka aplikasi netbeans ide 8.2 kalian,
2. Pilih File --> New Project --> Java --> Java Application -->Next

3. Buat project name dengan nama 'awal', lalu click Finish.

4. Click source packages 'awal' seperti pada gambar di bawah ini, lalu klik kanan pada source package 'awal' tersebut --> New --> jFrame Form.

5. Pada jendela New JFrame Form, ketikkan nama Class 'tampil' , lalu click finish.

6. Berikut adalah tampilan Jframe baru. Perhatikan area kerja form di bawah, di area tersebut, kalian dapat memasukkan tools yang berada dalam palette component view. Jadi, jlabel, jtextfield, jbutton , bisa kalian ambil dari jendela palette component view dengan cara click dan drag ke area kerja form.

7. Ini adalah komponen yang dapat kalian ambil sesuai dengan contoh soal di atas., silahkan click dan drag label sebanyak 3 x, textfield sebanyak 2 x, dan ok button sebanyak 1 x.

8. Silahkan drag sehingga susunan komponennya sama seperti gambar di bawah ini.

9. Silahkan click jlabel1, dan ubah font dan text pada jendela properties. Ingat ya, komponen harus diclick 1 x sehingga jendela properties pun aktif.

Ubah semua properties font dan text pada tiap komponen , sehingga hasilnya seperti berikut,

ingat ya, setiap komponen, diclick dulu, lalu kamu ganti textnya pada properties. Untuk textfield, pengaturan text propertiesnya dikosongkan saja.

10. Selanjutnya, kita akan memberi inisialisasi ke masing - masing textfield1, textfield2, dan button submit. Caranya adalah sebagai berikut. Silahkan kamu ikutin petunjuk gambarnya ya.

Lalukan hal yang sama untuk textfield2, dan tombol submit,

• textfield1 , nama variabelnya : namadepan
• textfield2,  nama variabelnya : namabelakang
• submit , nama variabelnya : submit.

11. Ini tampilan jika kamu berhasil menginisialisasikan variabelnya, lihat yang dilingkari merah.

12. Nah, setelah selesai mengatur komponen pada form, kita masuk ke bagian source untuk memasukkan coding. Caranya, kamu click source pada tampil.java ya!!

13. Silahkan kamu ketik code di kotak merah ini ya. Ingat, jangan sampai salah letak code. Perhatikan benar - benar susunan codenya.

14. Silahkan kamu kembali ke menu design jframe, kamu click kanan tombol submit, lalu pilih Event -->> Action -->> actionPerformed. Seperti gambar di bawah ini. Fungsinya, agar output muncul ketika kita tekan tombol SUBMIT. 

15. Lalu, silahkan membuka menu source tampil.java, dan ketikkan code yang berada di dalam kotak merah. Ingat, jangan sampai salah posisi, dan salah mengetik kode.

16. Pada menu source 'awal', kamu ketikkan code yang dikotak merah ya!

      Ingat, code ini diletakkan pada 'awal.java', bukan pada tampil.java.

      Jangan salah letak.

17. Setelah kamu pastikan code nya tidak ada yang error, kamu tekan F6 atau Tombol Run. Maka hasilnya seperti berikut ini..

OKE! 

SEKARANG GILIRAN KAMU MEMPRAKTEKKAN CONTOH PROGRAM APLIKASI DI ATAS. 

-->SILAHKAN DICOBA DENGAN MEMASUKKAN NAMA KALIAN MASING2<--

BERIKUT ADALAH SOAL :

EDIT LAH TAMPILAN OUTPUT DI ATAS MENJADI SEPERTI DI BAWAH INI :

Untuk syntax code tombol RESET adalah sbb :

variable_textfield.setText(" ");