Hello folks,

Today I would like to blog about the FXML define and include tag which can be very useful for those who are very keen to use FXML in their application. The FXML is an XML file which is loaded by javafx using FXMLLoader . It’s all loaded at the runtime and it’s really fast to load and easy to learn too. The previous blog about the FXML as Flexible XML is just a basic about FXML . Today in this blog here you will learn about how to include FXML files in your main FXML file.

I’m talking about the <fx:include> tag of the FXML.

Let’s see the basic flow of how the <fx:include> are loaded. Let’s assume there are two FXML Main.fxml and Child.fxml


Here in the above image you can see the Child.fxml is called inside Main.fxml embeded byΒ <fx:define> Now you need to know that the <fx:define> are used for defining any variables or any instances inside FXML.

Let’s see things in real . We are going to make one simple Tab based application which simply get’s it’s tab content from different FXML files. Firstly we’ll make Main.fxml which contains the TabPane.

Main.fxml

You can see the highlighted lines of which helps to load the content of Home.fxml and About.fxml in the Main.fxml . Also we ‘ve added fx:id property for making instances available of Home and About class. Now let’s see the FXController class of Main.fxml

 

Here in the controller we have just made the instance of Home and About class with respective to their fx:id

Home.fxml

 

 

Home.java

 

About.fxml

 

About.java

Now you have finally finished the FXML stuffs of adding components inside the FXML. You can now just create one FXML Executor class which helps to execute and load your FXML using FXMLLoader.load() . I’m going to use the FXMLTest class as the executor of the FXML files in Stage.

 

FXMLTest.java

 

The preview of this javafx class will be something like this.

 

The continue of this blog will be posted in coming week. The next blog post will contain the extended part of this application where you can take control over the event triggered from About.fxml and Home.fxml FXML component to the Main fxml.

That’s it for today. You can now easily include the fxml file inside the FXML file using things like this.
Have a πŸ™‚Β  good day and fell free on commenting your views about this post.

Thanks