In this post, I’m going to show how to split FXML-files and include one FXML-file to a second FXML-file. I will also show how to create a separate controller for those FXML-files.

Java FX and FXML, I’m sure, is everyone’s favourite GUI building library for Java. No? Not your favourite? You are surprised it’s even alive any more? Well it is. Since it seems that it is not actually widely used, there are limited amount of tutorials and help available. After getting help myself and doing bit of google-fu I managed to do what I wanted. This is what I found out. There are three main steps:

  1. Create a new FXML-files and controllers
  2. Include one FXML-file to a second FXML-file
  3. There is no step three

I will assume that you already have a Java FXML -project with at least one controller and at least one FXML-file. At the writing of this post Java version 7 JRE and JDK has come out which I use here. I also have used Java FX 2.2. Some of this might not work for earlier versions of Java FX.

Creating a New FXML-files and Controllers

First create a new blank FXML-file and then a new Java-class that we use as the controller.

The easiest way to do this is to use Eclipse or Netbeans to create both files for you. In Netbeans, select your Java FXML project in the project drawer, right-click and select New > Other > Empty FXML. This will start a wizard that guides the creation of both the FXML and the controller.

This will start a wizard that guides the creation of both the FXML and the controller. This can be seen in images above and bellow. Note, you can enlarge the images by clicking them.

Netbeans: Create an empty FXML-file Wizard, Step 1 Netbeans: Create an empty FXML-file Wizard, Step 1

Select a Java FX -category and an Empty FXML from there. Next the wizard will ask you the name of the FXML-file and the location where you want to create it.

Netbeans: Create an empty FXML wizard, Step 3 Netbeans: Create an empty FXML-file wizard, Step 2 After this you have the option to create a controller with the FXML-file. Let’s create the controller too using the wizard.

Netbeans: Create an empty FXML-file wizard, Step 3 Netbeans: Create an empty FXML-file wizard, Step 3

The wizard will also ask if you want to create a CSS-file. I didn’t require one so I skipped this step. It’s not necessary for this guide. Just hit Finish. You can add it later if you need one.

You should now have an empty FXML-file and a controller for it. The FXML-file should have the following content:

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml" fx:controller=".FXMLViewController">

</AnchorPane>

Note the fx:controller-attribute in the AnchorPane-element. The name of your controller should match the value of this attribute.

The controller should have the following:

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.Initializable;
/**
 * FXML Controller class
 *
 * @author hki
 */

public class FXMLViewController implements Initializable {

  /**
 * Initializes the controller class.
 */

   @Override
   public void initialize(URL url, ResourceBundle rb) {
     // TODO
   } 

}

The controller implements the Initializable-interface and has overridden the initialize-method.

At this stage you can copy the FXML-markup from your main FXML-file that has your view implemented or you can go ahead and create a new view markup in the new FXML-file. The next step is to add this new FXML-file to the main FXML-file.

Including One FXML-file To a Second FXML-File

Now that we have our new FXML-file and our new controller it would be nice to use them. What we will do is we will include the new FXML-file to the existing FXML-document in your project.

I’m sure this does not come as a surprise to you. FXML is XML. FXML uses include-element to include external FXML-files.

I use a TabPane in my project and decided to split the tabs in separate FXML-files and and controllers. Below is my main FXML-file.

Netbeans: FXML-file Netbeans: FXML-file Again, click the image to view it more closely if you wish. It has defined a TabPane with three tabs. All of the tabs are included from an external FXML-file as show below. I left a stub of the tabs code that I copied from the main FXML to my new FXML-file.

Netbeans: FXML include-element Netbeans: FXML include-element Take care where you place the include-element. In my case the TabPane-required the content-element before the include-element.

The include statement is as follows:

<fx:include source="NameOfYourFXMLFile.fxml"  />

Clean and build. Keep your fingers and toes crossed. Basically this should be it. If you run into exceptions and fail to build it is most likely because some element in the FXML is missing or the name of your controller is not correct. If you used a tool like Netbeans the latter is less likely.

There Is No Step Three Is a Lie

You have now created a hierarchy for your views and controllers and all is great. All you need to do is to implement your application. It should be piece of cake after this hurdle. Nothing to it. Enjoy!

This post is mostly a reminder or a guide for me. So if you find errors in it or better ways to do the same, feel free to comment. And yes, the layout really doesn’t support code presentation. I’m working on it.