FXML

-

FXML

Program HelloJavaFX sebelum ini dibuat hanya dengan menggunakan code Java. Cara ini tidak menggunakan kaedah model-view-controller (MVC). Dengan kaedah MVC, kita boleh menggunakan FXML untuk menentukan rupa bentuk program kita.
Sekarang kita akan delete balik projek HelloJavaFX sebelum ini dan akan buat benda yang sama tetapi menggunakan FXML.
Jadi, seperti sebelum ini klik File kemudian New Project. Pilih kategori JavaFX, dan pilih projek JavaFX FXML Application. Selepas klik Next, namakan projek kita, contohnya HelloJavaFX.
Setelah selesai, kita akan dapat tiga file iaitu HelloJavaFX.java,FXMLDocument.fxml, dan FXMLDocumentController.java. Anda boleh run program tersebut walaupun program tersebut agak lain daripada program sebelum ini.
Untuk menunjukkan cara untuk membuat file FXML, kita akan delete dua file ini:
  • FXMLDocument.fxml
  • FXMLDocumentController.java

Create file FXML

Sebelum itu, kita akan membuat satu package baru untuk menyimpan file FXML. Anda boleh abaikan step ini, tetapi saya galakkan untuk membuatpackage baru supaya code lebih tersusun.
Klik kanan pada package hellojavafx, kemudian New, dan klik Java Package.
Gambar membuat package baru untuk menyimpan file FXML
Namakan package ini sebagai hellojavafx.view dan klik Finish.
Gambar nama package untuk file FXML
Untuk membuat file FXML yang baru, klik kanan pada package view, kemudian New, dan klik Empty FXML. Namakan apa-apa sahaja, jadi kita akan namakan file tersebut sebagai Home. Selepas klik Next, tick pada Use Java Controller. Selepas Next yang seterusnya, ikut suka anda mahu menggunakan CSS ataupun tidak. Akhir sekali, klik Finish.

Edit FXML menggunakan Scene Builder

Jika anda sudah install Scene Builder, double-click file Home.fxml untuk edit menggunakan Scene Builder.
Sekarang kita akan buat program sama seperti HelloJavaFX sebelum ini. Jadi, kita resize AnchorPane kepada saiz 400×300. Klik pada AnchorPane tersebut, dan segala Properties akan terpapar pada menu sebelah kanan. Klik pada Layout dan tukar lebar (width) dan tinggi (height).
Gambar tukar saiz menggunakan Scene Builder
Untuk menambah control (atau widget) pada Pane, lihat menu di sebelah kiri dan klik Controls, kemudian tarik saja ke Pane tersebut.
Gambar drag and drop menggunakan Scene Builder
Kita boleh menukar text pada button tersebut di menu sebelah kanan bahagian Properties.
Gambar tukar text pada button
Setelah selesai, kita boleh save dan tutup Scene Builder.

Komentar

Posting Komentar

Postingan populer dari blog ini

Javafx Scene Builder

-
Gambar
Javafx Screen Builder itu apa sih? Bagi yang mengetahui Javafx, ia insya Allah mengetahui Javafx Scene Builder. Saya tidak berani mengatakan pasti loh :D. Javafx screen builder atau lebih singkatnya screen builder adalah semacam tool yang dapat digunakan untuk membuat design UI dari sebuah aplikasi. Javafx adalah penerus dari Java Swing, digunakan untuk membuat aplikasi java berbasis Graphical User Interface (GUI). Ya, aplikasi dengan user interface yang ciamik. Dengan screen builder, saya rasa sangat mudah sekali membuat layout aplikasi hanya tinggal drag and drop. Tak perlu pusing memikirkan fxml, karena screen builder ini seketika membuat secara otomatis file fxml. Seperti diketahui, fxml adalah file yang berformat xml, yang isinya adalah layout dari aplikasi Javafx. Wah, maaf kalau kata-katanya muter-muter.  Berikut saya berikan tampilan dari screen builder. Saya menggunakan screen builder versi 1.1. Gambar di atas adalah penampakan screen builder yang saya gunakan. ...
Baca selengkapnya

FXML injection

-
Gambar
FXML injection Sekarang kita akan tambah fungsi kepada button tersebut menggunakan  FXML injection . Buka  HomeController.java  dan tambah code seperti berikut: package hellojavafx.view; import java.net.URL; import java.util.ResourceBundle; import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.fxml.Initializable; public class HomeController implements Initializable { @FXML private void tulisHelloWorld (ActionEvent event) { System.out.println( "Hello World!" ); } /** * Initializes the controller class. */ @Override public void initialize (URL url, ResourceBundle rb) { // TODO } } Tips: Untuk  import  secara automatik menggunakan Netbeans, tekan Ctrl+Shift+I . Pastikan juga anda import dari package  javafx . FXML injection  ialah tanda  @FXML  yang kita letakkan pada method tulisHelloWorld() . Jika kita tidak letak  ...
Baca selengkapnya

Styling dengan CSS Java FX

-
Gambar
Styling dengan CSS Java FX Kita boleh menggunakan  Cascading Style Sheets  (CSS) untuk menghias program kita. CSS selalunya digunakan untuk menghias website. Selalu kita nampak setiap website mempunyai  button ,  menu , dan  background  yang lain daripada website lain. Sebenarnya CSS yang menghias website tersebut. Format CSS adalah seperti berikut: < selector > { < property > : < value > ; < property > : < value > ; } Contohnya, .button { background-color : black; font-size : 25 ; font-family : “Times New Roman” } Untuk JavaFX ada sedikit tambahan pada nama  property , iaitu ‘-fx-‘, contohnya, .button { -fx-background-color : black } Sekarang kita akan menghias program kita sebelum ini, iaitu program HelloJavaFX. Create file CSS Sebelum itu, seperti biasa kita akan membuat  package  baru untuk menyimpan semua file CSS dan gambar-gambar (jika ada). ...
Baca selengkapnya