JavaFX: FXML: How to make the child to extend its size to fit the parent pane?

Question

I have managed to load a child fxml(sub UI) under a parent fxml (mainMenu UI). I have created an AnchorPane with id "mainContent". This pane is bound to 4 sides and changes in accords to the stage.

The child window will be loaded into the "mainContent" anchorpane. However, I can't figure out how to make the child to change along with its parent "mainContent".

My child UI is called like this.

@FXML
private void mnuUserLevel_onClick(ActionEvent event) {
    FXMLLoader loader = new FXMLLoader(getClass().getResource("DBedit.fxml"));
    loader.setController(new DBeditEntityUserlevel());

    try {
           Node n = (Node)loader.load();
           mainContent.getChildren().add(n);
    } catch (IOException e){
           System.out.println(e.getMessage());
    }
}

To further illustrate my question, please see my snap shot. The red square is the child. The yellow square is the "mainContent" AnchorPane of the MainMenu parent.

Answer 1

If you set the topAnchor, bottomAnchor, leftAnchor, rightAnchor values of the pane inside your AnchorPane to 0.0 the panel will get stretched to the full extend of the surrounding AnchorPane.

Documentation Link: AnchorPane

edit: in the documentation link you can also see how you can set these values in your java code.

FXML example:

<AnchorPane fx:id="mainContent" ...>
<StackPane fx:id="subPane" AnchorPane.topAnchor="0.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" ></StackPane>
</AnchorPane>

Answer 2

If you have a Region, which is a subclass of Node that includes Axis, Chart, Control, and Pane (this probably includes anything you might want to load), you can bind the child's size to the space in the parent similar to how they did here. Now any future adjustments of the parent's size will be reflected in the child.

Region n = (Region)loader.load();
mainContent.getChildren().add(n);
n.prefWidthProperty().bind(mainContent.widthProperty());
n.prefHeightProperty().bind(mainContent.heightProperty());

Answer 3

With the look at the structure of your interface I guess you better use BorderPane as your parent container with this suggestion don't use AnchorPane directly inside the BorderPane container here is my suggestion you do:

->BorderPane-Top = "your menu"

->BorderPane-Center = another container (could be SplitPane, another BorderPane etc.. but not AnchorPane I guess but you can try if you want)

->BorderPane-Bottom = another container (could be hbox with buttons or label for info or notifications etc..)

Answer 4

You could try with setting prefWidth. I don't know why, but it seems like it takes the prefWidth which is set in SceneBuilder after referencing your newPane to your AnchorPane.

Node newPane = FXMLLoader.load(getClass().getResource("view/YourPane.fxml"));
List<Node> parentChildren = ((Pane)yourAnchorPaneId.getParent()).getChildren();
parentChildren.set(parentChildren.indexOf(yourAnchorPaneId), newPane);
yourAnchorPaneId.setPrefWidth(1800); // 1800 just example value for test
Main.primaryStage.setWidth(500); // 500 example value with which you wishe to start app