Senin, 01 Desember 2014

[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 FileNew Project. Pada bagian Categories, pilih JavaFX dan pada bagian Projects pilih JavaFX ApplicationsNext. 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

2 komentar:

  1. gan kebetulan ane baru belajar java,nah ane pengen nanya apakah javafx bisa kayak jpanel gitu bisa drag drop jadi layout yg kita buat kelihatan ,atau mngkin ada cara lain biar layout UI yg kita buat di javafx bisa keliatan bentuknya seperti di jpanel.terima kasih

    BalasHapus
  2. anda bisa menggunakan JavaFXSceneBuilder

    BalasHapus