How to resize automatically when loading an FXML into an AnchorPane?

Question

I am having trouble with the layout of an FXML I load into an AnchorPane.

I have a Scene.fxml with an AnchorPane and a button on it. Pressing the button loads the Internal.fxml into the AnchorPane. The Internal.fxml has a TextField with the AnchorPane Constraints set to left and right. That's about it.

Though now when resizing the window the TextField does not resize.

Why doesn't the TextField resize itself? Where is the error in the code below?

Main.java:

@Override
public final void start(final Stage firstStage) throws Exception {
    Parent mask = FXMLLoader.load(getClass()
                            .getResource("/fxml/Scene.fxml"));

    Scene scene = new Scene(mask);
    scene.getStylesheets().add("/styles/Styles.css");

    firstStage.setTitle("MyProgram");
    firstStage.setScene(scene);
    firstStage.show();

    Main.stage = firstStage;
}

Scene.fxml:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>

<AnchorPane id="AnchorPane" fx:id="content" prefHeight="600.0" prefWidth="800.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="com.treasury.myprogram.controller.SceneController">
  <children>
    <Button layoutX="257.0" layoutY="227.0" mnemonicParsing="false" onAction="#loadInternal" text="Button" />
  </children>
</AnchorPane>

Internal.fxml:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-1.0" maxWidth="-1.0" minHeight="400.0" minWidth="600.0" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="com.treasury.myprogram.controller.InternalController">
  <children>
    <TextField layoutY="14.0" prefWidth="-1.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="14.0" />
  </children>
</AnchorPane>

SceneController.java:

package com.treasury.myprogram.controller;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.layout.AnchorPane;

public class SceneController implements Initializable {
    @FXML
    private AnchorPane content;


    @FXML
    private void loadInternal() {
        try {
            AnchorPane internalPane = FXMLLoader.load(getClass().getResource("/fxml/Internal.fxml"));

            this.content.getChildren().setAll(internalPane);

        } catch (IOException ex) {
            System.out.println("Internal error: " + ex.getMessage());
        }
    }

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

Edit:

Ok, first off thanks a lot, now the code works. Well, half of it does, but at least the first issue is gone. I now have an FXML that works only half. It has a GridPane with a couple of entries and a TextField beneath. Both of them are directly on the AnchorPane. Now, when I am in the construction mode in JavaFX Scene Builder 1.1 everything looks fine, but when I load this Internal.fxml into the Scene.fxml only the TextField adapts to the Parent size, but the GridPane doesn't. I am having trouble finding out why. What's the problem? Where is the missconfiguration?

Internal.fxml:

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-1.0" maxWidth="-1.0" minHeight="400.0" minWidth="600.0" prefHeight="-1.0" prefWidth="-1.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="com.treasury.myprogram.controller.InternalController">
  <children>
    <GridPane gridLinesVisible="true" prefHeight="-1.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" AnchorPane.topAnchor="5.0">
      <children>
        <Label text="Program name:" GridPane.columnIndex="0" GridPane.rowIndex="0" />
        <Label text="Version:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
        <Label text="Release date:" GridPane.columnIndex="0" GridPane.rowIndex="2" />
        <Label text="myprogram" GridPane.columnIndex="1" GridPane.rowIndex="0" />
        <Label text="1.0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
        <Label text="28.02.2014" GridPane.columnIndex="1" GridPane.rowIndex="2" />
        <TextField prefWidth="200.0" GridPane.columnIndex="0" GridPane.rowIndex="3" />
        <TextField prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="3" />
      </children>
      <columnConstraints>
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="294.0" minWidth="10.0" prefWidth="112.0" />
        <ColumnConstraints hgrow="SOMETIMES" maxWidth="502.0" minWidth="10.0" prefWidth="478.0" />
      </columnConstraints>
      <rowConstraints>
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
        <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
      </rowConstraints>
    </GridPane>
    <TextField layoutY="125.0" prefWidth="590.0" AnchorPane.leftAnchor="5.0" AnchorPane.rightAnchor="5.0" />
  </children>
</AnchorPane>

Answer 1

Try to use a BorderPane rather than anchor pane and set the object of child fxml into center. Also check whether parent fxml is auto resizable in Scene Builder.

@FXML private BorderPane bPaneHomeChild;
FXMLLoader loader = new FXMLLoader(getClass.getResource("/fxml/Internal.fxml"));
Pane cmdPane = (Pane) loader.load();
bPaneHomeChild.setCenter(cmdPane);

Answer 2

There are really good reasons to never use any of this. JavaFX and JavaFXML are bad rehashes of someone else's work namely Microsoft. The tools that Oracle provide look like they came straight out of 1975. You are struggling with this product and framework because it is poorly thought out and even more poorly executed. Live up to your potential, join the web revolution, Angular, REACT, MVC whatever. Just don't hang yourself with someones idea of punishing his fellow programmer. Java had it's moment in 2000 to 2005. That time is over, the rest are just hanging on. Don't hang up, upgrade yourself.

Answer 3

Select GridPane left hand side, then click the shaded area around it. Then choose Vgrow and Hgrow to "ALWAYS" on the right side "Layout" panel. Like this:

Answer 4

Try like this:

AnchorPane.setTopAnchor(<child node>,0.0);
AnchorPane.setBottomAnchor(<child node>,0.0);
AnchorPane.setLeftAnchor(<child node>,0.0);
AnchorPane.setRightAnchor(<child node>,0.0);