Refreshing Praktikum: GUI (Graphical User Interface)

Transkripsi

1 Refreshing Praktikum: GUI (Graphical User Interface) 1. Buat package/paket gui pada project Anda (kalau belum ada). 2. Buat JFrame Form pada paket gui. Klik kanan paket gui >New > JFrame Form, dan beri nama KalkulaotrView. Maka akan tampil seperti ini Perhatikan: Dari gambar di atas terlihat bahwa ada 2 mode tampilan yaitu Design dan Source. Jika di klik button design maka yang tampil adalah tampilan GUI nya. Jika ditekan tombol source, yang tampil adalah source code nya. 3. Menambahkan Text Field. Ikuti langkah2 berikut ini: a) Kecilkan desain JFrame Form KalkulatorView sehingga terlihat rapi dan proporsional

2 b) Tambahkan komponen Text Field ke dalam form KalkulatorView. Caranya klik kompoen Text Field yang ada di dalam Palete, dan masukkan ke dalam form. Atur letak dan besar dari text field yang baru dimasukkan hingga tampil seperti ini. Secara otomatis nama text field yang baru dimasukkan adalah jtextfield1. c) Buat agar tampilan text yang ada di jtextfield1 menjadi rata kanan, caranya: Klik jtextfield1 > di panel Properties (di bawah Palete) > pilih Horizontal Alignment dan ubah dari LEADING menjadi RIGHT. d) Agat jtextfield1 tidak bisa diedit: Klik jtextfield1 > di panel Properties (di bawah Palete) > pilih Editable dan hilangkan tanda centang e) Untuk membuat tampilan awal (default) menjadi 0(nol) : Klik jtextfield1 > di panel Properties (di bawah Palete) > pilih text dan ubah dari jtextfield1 menjadi 0. f) Sampai tahap ini, tampilan akan seperti ini 4. Menambahkan Tombol- Tombol untuk Angka dan Operator a. Di panel Palet, pilih kompoen Button, kemudian masukkan ke dalam KalkulatorView. b. Atur posisi dan text dari setiap tombol yang dimasukkan hingga menjadi seperti tampilan di bawah ini:

3 5. Buat Kelas Kalkulator a. Buat klas Kalkulator di dalam paket gui. b. Tampilan source code klas Kalkulator 6. Melengkapi Code di KalkulatorView. a. Buka kembali KalkulatorView b. Masuk ke dalam tampilan mode Source. c. Lihat deklarasi klas KalkulatorView ini menunjukkan bahwa ketika membuat JFrame Form, sebenarnya kita seperti membuat klas biasa tapi extend ke klas JFrame yang ada di dalam paket javax.swing. Klas JFrame merupakan klas bawaan Java untuk membuat tampilan Frame atau Window. d. Perhatikan pada bagian atribut dari klas KalkulatorView

4 Terlihat bahwa setiap komponen yang dimasukkan ke dalam Frame KalkulatorView akan menjadi atribut dari klas KalkulatorView tersebut. e. Tambahkan 4 buah atribut: operan1, operan2 dan operator, semuanya tipedatanya String dg modifier akses private dan atribut resetdisplay berupa Boolean. Atribut resetdisplay digunakan untuk penanda kapan tampilan text field harus dihapus dan diganti tampilan baru. Contoh: jika setelah ditekan tombol 1 kemudian tombol 2, maka setelah menekan tombol 1 textfield tidak perlu dihapus dan ketika tombol 2 ditekan maka nilai 2 ditampilkan dibelakang 1 (kondisi ini direpresentasikan oeh nilai resetdisplay=false). Beda halnya jika setelah menekan tombol 1, ditekan tombol x dan kemudian ditekan tombol 2. Setelah ditekan tombol x, dan ditekan tombol 2, tampilan 1 pada textfield dihapus dulu baru diganti tampilan 2 (kondisi ini direpresentasikan oeh nilai resetdisplay=true). f. Untuk inisialisasi, beri nilai operan1=, operan2=,operator=. Letakkan di dalam konstruktor. g. Buat method tulisangka() seperti dibawah ini di dalam klas KalkulatorView.

5 Dibuat private karena method ini hanya akan dipanggil dari klas KalkulatorView saja. h. Buat method hitunghasil() seperti di bawah ini: Dibuat private karena method ini hanya akan dipanggil dari klas KalkulatorView saja. i. Lengkapi source code untuk tombol2 angka. i. Masuk ke mode tampilan Design ii. Dimulai dari tombol Double klik pada tombol Maka kita akan diarahkan ke tampilan Source, ke dalam method yang telah di generate oleh NetBeans. Masukkan ke dalam method tsb sintaks2 atau instruksi2 yang ingin dijalankan ketika tombol 0 ditekan. Pada kasus saya method tersebut adalah 3. Isi method tersebut seperti di bawah ini: iii. Lanjutkan ke tombol Masuk ke mode tampilan Design 2. Double klik pada tombol Maka kita akan diarahkan ke tampilan Source, ke dalam method yang telah di generate oleh NetBeans. Masukkan ke dalam method tsb sintaks2 atau instruksi2 yang ingin dijalankan ketika tombol 0 ditekan. 4. Isi method tsb seperti di bawah ini:

6 iv. Lanjutkan langkah seperti di atas untuk tombol angka 2,3,4,5,6,7,8 dan 9. j. Lengkapi source code tombol C i. Masuk ke mode design ii. Double klik tombol C iii. Di dalam method yang baru degenerate oleh Netbeans, masukkan sintaks spt ini: k. Lengkapi source code tombol = i. Masuk ke mode design ii. Double klik tombol = iii. Di dalam method yang baru degenerate oleh Netbeans, masukkan sintaks spt ini: l. Lengkapi source code tombol x, +, -, : i. Dimulai tombol x 2. Double klik tombol x 3. Masukkan sintaks seperti di bawah ini ke dalam ii. Selanjutnya tombol + 2. Double klik tombol + 3. Masukkan sintaks seperti di bawah ini ke dalam iii. Selanjutnya tombol 2. Double klik tombol -

7 3. Masukkan sintaks seperti di bawah ini ke dalam iv. Selanjutnya tombol : 2. Double klik tombol : 3. Masukkan sintaks seperti di bawah ini ke dalam 7. Jalankan klas KalkulatorView. 8. Amati jalannya program 9. Pahami algoritma yang ada di method hitunghasil(), tulis Angka() dan method yang untuk menangani tombol x,-,+ dan : ketika diklik. 10. Selamat mencoba