FXML Stuffs (include and define)

FXML Stuffs (include and define)
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

                                                    
 

                                                                                                                                                                                                                                                                                   

01	<?xml version="1.0" encoding="UTF-8"?>

02

03	<?import java.lang.*?>

04	<?import javafx.scene.*?>

05	<?import javafx.scene.control.*?>

06	<?import javafx.scene.layout.*?>

07	<?import javafx.scene.shape.*?>

08	<?import javafx.scene.effect.*?>

09	<?import fxmlstuff.Main?>

10

11	<Main xmlns:fx="http://javafx.com/fxml" fx:controller="fxmlstuff.Main" >

12	<fx:define>

13	<fx:include source="Home.fxml" fx:id="homeContent" />

14	<fx:include source="About.fxml" fx:id="aboutContent" />

15

16	</fx:define>

17

<center>

18	<TabPane fx:id="tabpane" translateY="5" translateX="5"  >

19

<tabs>

20	<Tab text="HOME" fx:id="homeTab" content="$homeContent" closable="false" />

21	<Tab text="ABOUT" fx:id="aboutTab" content="$aboutContent" closable="false"/>

22

</tabs>

23	</TabPane>

24

</center>

25

</Main>

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                                                                                  


01	package fxmlstuff;

02

03	import java.net.URL;

04	import java.util.ResourceBundle;

05	import javafx.fxml.FXML;

06	import javafx.fxml.Initializable;

07	import javafx.scene.layout.BorderPane;

08

09

/**

10	* @author Narayan

11

*/

12

13	public class Main extends BorderPane implements Initializable{

14

15

@FXML

16	private Home homeContent;

17

@FXML

18	private About aboutContent;

19

20

@Override

21	public void initialize(URL url, ResourceBundle rb) {

22

}

23

}

                                                                                                                                                                                                                                                                                   

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

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.effect.*?>
<?import fxmlstuff.Main?>

<Main xmlns:fx="http://javafx.com/fxml" fx:controller="fxmlstuff.Main" >
    <fx:define>
        <fx:include source="Home.fxml" fx:id="homeContent" />
        <fx:include source="About.fxml" fx:id="aboutContent" />

   </fx:define>
    <center>
        <TabPane fx:id="tabpane" translateY="5" translateX="5"  >
            <tabs>
                <Tab text="HOME" fx:id="homeTab" content="$homeContent" closable="false" />
                <Tab text="ABOUT" fx:id="aboutTab" content="$aboutContent" closable="false"/>
            </tabs>
        </TabPane>
    </center>
</Main>

 

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

 

package fxmlstuff;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.BorderPane;

/**
 * @author Narayan
 */

public class Main extends BorderPane implements Initializable{

    @FXML
    private Home homeContent;
    @FXML
    private About aboutContent;

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

 

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

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import fxmlstuff.Home?>
<Home id="homeContent" xmlns:fx="http://javafx.com/fxml"
        spacing="10" translateY="40" translateX="20" fx:controller="fxmlstuff.Home" >
    <children>
        <Label text="Add New Dock of Home" />
        <Button text="Add !" onAction="#handleAction" />
    </children>
</Home>

 

 
 
Home.java

package fxmlstuff;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.VBox;

/**
 * @author Narayan
 */
public class Home extends VBox implements Initializable{

    @FXML
    private void handleAction(ActionEvent event) {
    }

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

}

 

 
About.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import fxmlstuff.About?>
<About id="aboutContent" xmlns:fx="http://javafx.com/fxml"
    spacing="10" translateY="40" translateX="20" fx:controller="fxmlstuff.About">
    <children>
        <Label text="Add New Dock of About" />
        <Button text="Add !" onAction="#handleButtonAction"  />
    </children>
</About>

 

 
About.java

package fxmlstuff;

import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.VBox;

/**
 * @author Narayan
 */
public class About extends VBox implements Initializable {

    @FXML
    private void handleButtonAction(ActionEvent event) {
    }    

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

}

 

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

package fxmlstuff;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author Narayan
 */
public class FXMLTest extends Application{

   public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));
        Scene scene = new Scene(root,800,600);
        stage.setTitle("FXML Test");
        stage.setScene(scene);
        stage.show();
    }
}

 

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