Membuat kalkulator metro style atau windows 8 dengan java-Netbeans

Pada tutorial ini saya hanya akan membahas design interface dari kalkulator itu sendiri, karena untuk source code di google sudah banyak sekali tutorial yang membahas hal seperti itu. Ok..langsung saja ke TKP…

1. Pertama buat form kalkulator dan masukan panel utama dan beri warna background hitam. Sebagai contoh disini saya memasukan tiga buah panel, dan beri warna gray. Fungsi panel ini nantinya berfungsi sebagai efek warna pada saat mouse melintas. Supaya tata letak panel dapat di atur, klik kanan pada panel utama -> layout -> Absolute layout. Untuk lebih jelasnya lihat gambar berikut.

2. Selanjutnya masukan jbutton kedalam panel seperti gambar berikut.

3. Untuk menjadikan jbutton nya transparan, pada bagian properties hilangkan centang pada contentArea filled. Seperti gambar berikut.

4. Silahkan edit text pada masing-masing jbutton. Untuk jenis font nya pilih segoe UI Light atau Segoe UI. Berikut tampilan yang saya buat.

5. Nah..untuk senjutnya kita akan membuat efek warna dengan events mouse entered dan exited. Tujuannya ya..tentu saja supaya aplikasi yang kita buat tidak kaku. disini saya contohkan pada jbutton Nol, klik kanan pada jbuttonnol -> Events -> Mouse -> MouseEntered. Lakukan juga hal sama pada event mouse exited supaya warna panel kembali ke awal.

6. Dan ketikan source code berikut…simple kan..sebelumnya jangan lupa ketikan import java.awt.Color; dibawah package aplikasi. Panelnol adalah nama variabel dari panel yang menjadi background jbuttonNol.

7. Kamu juga bisa memilih warna lain pada properties background dengan cara mengarahkan kursor pada kotak warna, popup kode warna akan muncul seperti gambar berikut.

8. selanjutnya silahkan dikembangkan sendiri. Untuk jbutton tertentu seperti akar dan backspace mungkin tidak bisa menggunakan symbol ataupun text, solusinya kalian dapat menggunakan gambar .png. Yang bisa di buat dengan corelDraw atau Photoshop. Berikut tamplan yang sudah saya buat..