Hello World dengan FXML

Hello guys setelah berhasil membuat aplikasi JavaFX Hello World pada posting sebelumnya, sekarang kita mencoba membuat aplikasi hello world dengan FXML. Mungkin kalian masih asing dan bertanya-tanya, apa sih itu FXML. FXML adalah bahasa XML untuk mengekspresikan JavaFX User Interface. FXML menyediakan cara untuk memisahkan antara layer presentation dari layer application logic.

Disamping kita mengeditnya dari text editor atau favorit IDE kalian, File FXML dapat juga dimanipulasi dengan software (graphic tool) yang dapat bekerja dengan file FXML yang disebut SceneBuilder. JavaFX SceneBuilder adalah software yang komplit yang membolehkan kalian untuk mendesain screen kalian lewat berbagai macam palette dari container, controls dan node visual yang lainnya yang disediakan, dan meletakkannya secara langsung pada layar dan memodifikasi propertynya melalui property editor. Kalian dapat mendownloadnya di sini.

Langsung saja kita mulai pembuatannya, ikuti langkah di bawah ini

1.       Buka Netbeans dan pilih new Project
2.       Pada bagian Categories pilih JavaFx, dan pada bagian projects pilih JavaFX FXML Application, kemudian klik Next
3.       Kemudian pada bagian project name isikan “HelloWorldFXML”, dan pastikan JavaFX Platform yang terpilih adalah JDK 1.8, kemudian klik Finish
4.       Install SceneBuilder yang telah kalian download tadi.

Kalian akan mendapatkan tampilan seperti di bawah ini, coba lihat pada tab project di sebelah kiri, terdapat tiga buah file baru yaitu FXMLDocument.fxml, FXMLDocumentController, HelloWorldFXML.

Coba klik 2 kali pada file FXMLDocument.fxml, akan tampil seperti gambar di bawah ini.

 Kembali ke Netbeans dan coba klik kanan pada FXMLDocument.fxml kemudian pilih edit. Di situ akan tampil struktur FXML yang dibuat dimana yang digunakan sebagai root adalah Node Container bertipe AnchorPane beserta propertynya prefHeight, prefWidth, dan lainnya. Yang perlu disoroti di sini adalah pada property fx:controller. Ini digunakan untuk menghubungkan antara user interface(layer presentation) dengan backend (application logic) aplikasi.

Sekarang coba buka controller file kita yaitu FXMLDocumentController. Kelas FXMLDocumentController mengimplements interface Initialize dimana mewajibkan kita mengoverride method initialize(). Pada bagian initialize ini digunakan untuk mengatur kondisi awal saat pertama kali File UI FXML yang kita buat tadi diload atau ditampilkan. Pada bagian inisialisasi kita kalian menemukan deklarasi Label dengan annotation FXML seperti di bawah ini :

@FXML

private Label label;

Ini digunakan untuk mengakses variable yang ada di FXML agar dapat dimanipulasi lewat controller. Bagaimana caranya?? Caranya adalah dengan menambahkan nama deklarasi di atas(dalam hal ini “label”) ke dalam fx:id pada Label yang ada di scene builder seperti di bawah ini

Sekarang buka file HelloWorldFXML, sekarang kita meload classFXML yang kita buat tadi ke dalam root Parent untuk ditampilkan pada scene. Setelah itu coba run program dan klik tombol “Click Me” nya, maka akan muncul tulisan “Hello World” di bawah tombol.

Satu lagi kelebihan JavaFX adalah kita bisa menambahkan file css ke dalam aplikasi kita. Buat file baru bernama HelloWorldFXMLCSS.css, kemudian isikan seperti di bawah ini :

.root{

    -fx-background-color: blue;

}

.button:hover{

    -fx-background-color: yellow;

}

#label{

    -fx-font-size: 24;

}

Kemudian pada file HelloWorldFXML, tambahkan perintah seperti ini :

scene.getStylesheets().add(getClass().getResource("HelloWorldFXMLCSS.css").toString());

Compile dan Run maka background dan button ketika dilewati mouse akan berubah warna seperti gambar di bawah ini

Demikian aplikasi hello world yang kita buat dengan FXML

Sekian dan terima kasih