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                                                                                  

01package fxmlstuff;
02 
03import java.net.URL;
04import java.util.ResourceBundle;
05import javafx.fxml.FXML;
06import javafx.fxml.Initializable;
07import javafx.scene.layout.BorderPane;
08 
09/**
10 * @author Narayan
11 */
12 
13public 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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值