[Belajar JavaFX] Membuat Program Form Login Sederhana dengan JavaFX dan CSS di Netbeans

Sebelum membuat program form login sederhana ini yang dibuat dengan bahasa pemrograman Java, terlebih dahulu kita memasang peralatan yang dibutuhkan. Saya menggunakan IDE Netbeans 8.0.2 versi All yang didalamnya sudah memasukan banyak dukungan termasuk JavaFX dan JDK 1.8.0 update 25 ( sudah termasuk JRE dan untuk saat ini sudah termasuk JavaFX ).

Membuat Project di Netbeans 

• Klik File → New Project. Pada bagian Categories, pilih JavaFX dan pada bagian Projects pilih JavaFX Applications → Next. Kemudian masukan nama proyeknya dan pastikan JDK sudah dipasang.

• Project Name : FormFXExample

• Klik Finish.

• Buatlah kode  didalam file FormFXExample.java seperti berikut.

• Setelah membuat FormFXExample.java, kemudian kita buat file baru dengan nama CSSExample.java didalam folder formfxexample. Cara untuk membuat file baru tersebut dengan cara klik kanan pada formfxexample yang berada dibawah Source Packages → New → Other → pilih Categories ( JavaFX ) dan Filetypes ( JavaFX Main Class ) → Next.

• Class Name : CSSExample

• Buatlah kode  didalam file CSSExample.java seperti berikut.

• Untuk mempercantik tampilan program, pada JavaFX memberikan kemudahan dengan menggunakan CSS (Cascading Style Script). Untuk mempercantik panel / pane bisa menggunakan skrip .root{ -fx-background-color: whitesmoke; } pada file css atau dalam bentuk skrip inline, misal nama pane adalah gridpanel, maka skrip inline yang digunakan adalah gridpanel.setStyle("-fx-background-color: whitesmoke;"); ataupun juga bisa menggunakan ID untuk setiap komponen, misal nama Button adalah btnClose, maka skrip yang digunakan adalah btnClose.setId("tombolKeluar"); .

 

• Buatlah kode  didalam file Login.css seperti berikut dan simpan pada folder asset yang berada dibawah Source Package, tapi sebelumnya dibuat terlebih dahulu dengan cara klik kanan pada formfxexample → New → Folder → Folder Name: asset → Klik Finish. Folder asset juga digunakan untuk menyimpan file gambar. 

 
Hasil setelah kompilasi

Gambar 1.First	Gambar 2. Sign In in Fields are Empty
Gambar 3. Sign In in Password is Empty	Gambar 4. Sign In in Username is Empty
Gambar 5. Print Button is Pressed	Gambar 6. After Back Button is Pressed