Add children to child of fx:root element in java fxml

Question

I have an issue since I do how know, how to add new components to fx:root container child.

This is what I have at the moment.

Root element called PopupContainer

<fx:root type="StackPane" alignment="CENTER" xmlns:fx="http://javafx.com/fxml"
     styleClass="popup">
    <VBox alignment="CENTER">
        <HBox alignment="CENTER">
            <VBox fx:id="content" alignment="CENTER" spacing="5" styleClass="whiteBackground, blackborder"
              fillWidth="false" StackPane.alignment="CENTER">
            <!-- this is where I would like to add components -->
            </VBox>
        </HBox>
    </VBox>
</fx:root>

I have controller for it as well.

Now, I would like to use it like this in some other fxml:

<PopupContainer xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="com.example.bank.editbank.EditBankPresenter"
            styleClass="popup"
            fx:id="container">
    <!-- those components should go to VBOX up there -->
    <ViewTitle label="%editBankUC"/>
    <Button fx:id="someButton" text="Click me"/>
</PopupContainer>

Of course, when I add components they go directly under StackPane since it is root of the layout. I tried to override getChildren() method to return VBox children but I got children cycle detected. I do not want to add them programatically since it is more then 300 such cases in application but I can add new tag (instead of for example something else). Thanks!

Answer 1

Answering my own question because I think someone else would like to know this too.

So, as I already had before, this is PopupContainer.fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.layout.HBox?>
<?import javafx.geometry.Insets?>
<fx:root type="StackPane" alignment="CENTER" xmlns:fx="http://javafx.com/fxml"
         styleClass="popup">
    <VBox fx:id="child1" alignment="CENTER">
        <HBox alignment="CENTER">
            <VBox fx:id="content" alignment="CENTER" spacing="5" styleClass="whiteBackground, blackborder"
                  fillWidth="false" StackPane.alignment="CENTER">

                <padding>
                    <Insets topRightBottomLeft="10.0" />
                </padding>
            </VBox>
        </HBox>
    </VBox>
</fx:root>

And controller PopupContainer.java:

import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;

import java.io.IOException;

public class PopupContainer extends StackPane {

    //refference to VBox from layout
    @FXML private VBox content;

    public PopupContainer() {
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("PopupContainer.fxml"));
        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException exception) {
            throw new RuntimeException(exception);
        }
    }

    //note this getter, this is the key that allow you to add childred to child of this component
    public ObservableList<Node> getItems() {
        return content.getChildren();
    }
}

And at the end usage goes like this:

<PopupContainer xmlns="http://javafx.com/javafx"
                xmlns:fx="http://javafx.com/fxml"
                fx:controller="com.example.bank.editbank.EditBankPresenter"
                styleClass="popup"
                fx:id="container"
>
    <!-- this is what was acceptable to do in question so instead of children I am using items (setter in PopupContainer.java) -->
    <items>
        <ViewTitle label="%editBankUC"/>
        <HBox VBox.vgrow="ALWAYS">
            <Pane minWidth="20"/>
            <VBox alignment="CENTER" spacing="5">
                <HorizontalTextInput fx:id="name" label="%nameUC" alignment="CENTER_RIGHT" />
                <HorizontalTextInput fx:id="bic" label="%bicUC" alignment="CENTER_RIGHT" />
                <AddressInput fx:id="address" />
                <HorizontalCheckboxInput fx:id="active" label="%activeUC" />
            </VBox>
            <Pane minWidth="20"/>
        </HBox>
        <HBox alignment="CENTER" spacing="5">
            <JFXButton fx:id="close" onAction="#closeView" text="%closeUC" />
            <JFXButton fx:id="edit" onAction="#editClicked" />
            <padding>
                <Insets top="10.0" bottom="10.0" />
            </padding>
        </HBox>
    </items>
</PopupContainer>

I hope it is clear, how to add it. I did not find nothing familiar to this elsewhere but looking at the source of BorderPane can give you a hint how to do it. Cheers