如何添加 <fx:root> 组件作为FXML中的子组件？

Question

I have a custom component that extends AnchorPane , as in:

public class CustomAnchorPane extends AnchorPane { }

I would like to load this within a BorderPane . If I wanted to load a regular AnchorPane , I would do it as so: (I removed some lines for brevity)

<BorderPane fx:id="borderpane" ... fx:controller="main.java.Controller">
    <center>
      <AnchorPane fx:id="anchorpane" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
 </BorderPane>

I understand the <fx:root> construct is used for reusable/custom components. I do not understand how to set it as a child of the BorderPane , however, as I believe it must be the root of the FXML file. Thus the following throws an error:

<BorderPane fx:id="borderpane" ... fx:controller="main.java.Controller">
    <center>
       <fx:root fx:id="custom_anchorpane" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

What is the proper way to do this?

Thanks in advance.

Answer 1

<fx:root> only makes sense as the root of a fxml, since this is the only place where the parent object of a object created from the fxml is used, but not defined in the fxml itself.

It only makes FXMLLoader use the object passed using setRoot instead of creating a an element for this tag itself.

Assuming you've properly implemented your custom Node , you can use it the way you'd use any other element:

<BorderPane fx:id="borderpane" ... fx:controller="main.java.Controller">
    <center>
       <CustomAnchorPane fx:id="custom_anchorpane" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
    </center>
</BorderPane>

Note that this requires a suitable import in the processing instructions at the start of the file and the class needs to provide a public constructor taking no parameters.

If you didn't create a custom class yourself, but have a fxml file you want to use in a certain playe, you can also use fx:include :

<BorderPane fx:id="borderpane" ... fx:controller="main.java.Controller">
    <center>
       <fx:include source="custom_anchorpane.fxml"/>
    </center>
</BorderPane>