JavaFX has FXML as Flexible XML

Hello Today after long days I’ve came here to share my experience of FXML in JavaFX. After working with FXML I found it’s really easy for every developer.


  •  XML knowledge
  •  CSS knowledge

FXML and Binding Stuff

Ok First lets start with a FXML Template.

In above FXML I’ve not added Rectangle,Button,TextArea controls.
As per the FXML specification you can call the function from the FXML attribute using ‘#’ just before the function name. Here I’ve added #handleButton() and #handleClearButton() functions to handle the event of Buttons. Here First we are going to load them in JavaFX Application moreover we are going to make the Rectangle flexible to the Stage‘s width and height. To make any shapes or controls width and height relative to the Stage‘s width, height we can use bind feature plus a the control or the shape which we are going to make bind must static. Ok now we are going to need one Controller for the FXML which helps to control the FXML GUI components. I’ve already added fx:controller = "fxmlstuff.fxml.GUITemplate" in above FXML. So to map the controller we ought to make one conroller class inside fxmlstuff.fxml package with classname

In above Java controller I’ve not done anything. Just made the instances. We’ll need to customize our controller class to make things working greatly.You can see there are eventHandler for the buttons also. I just want you to know that I’ve made some variables static which is useful for binding with Stage width and height. Here one more Java class we need to add i.e. a.k.a main executor class.

As you can see on the main executor class there we’ve bind the property with respect to the Stage’s width and height. Currently If you compile them you won’t be able to see any thing magic. So to make thing work let’s touch with CSS. Let’s attach some css with our controller and css. Here we are again back to controller class. edit)

I’ve add some bindings to make the rectangle and control to be updated according to the Stage’s width and height. Also I’ve added some css class to customize the default controls color and style. Finally I did alignment for the clear and button Button to the left and right with some margins.

CSS Stuffs

Now we can head towards CSS for our design.

If you are new to CSS of javafx then please have a look at this CSS reference: CSS Ref
Now If compile and run this program you will output like this:

FXML Stuffs

If you like more like run some Java code during initialization of the FXML then Yes, you can do it! You just need to make things static so that it is accesible by the main-executor class or other class to run specific java task inside FX Thread. Added Java Task inside initialize )

Now load them inside initialize of the FXController or load them from the Main executor class as per your requirement. I’ve loaded them insize initialize of the Now you can see that the “: 5 second gone..” is printed in TextArea every 5 second which is the Java thread.

FXML Stuffs

Project Source Code :

Ok Thanks for watching the blog. Please feel free for comment.
Have a 🙂 good day