当.fxml不在场景中时，JavaFX按钮消失

Question

So I have this .fxml:

<StackPane fx:controller="controller.MainController" xmlns:fx="http://javafx.com/fxml">

    <Pane fx:id="aDrawPane" prefHeight="8000" prefWidth="10000" minWidth="10000" minHeight="8000">

    </Pane>
    <BorderPane fx:id="aBorderPane">
        <top>
            <VBox>
                <ToolBar fx:id="aToolBar" orientation="HORIZONTAL">
                    <HBox fx:id="umlBox">
                        <Button text="Create" fx:id="createBtn"/>
                        <Button text="Package" fx:id="packageBtn"/>
                        <Button text="Edge" fx:id="edgeBtn"/>
                        <Button text="Draw" fx:id="drawBtn"/>
                    </HBox>
                    <HBox fx:id="utilBox">
                        <Button text="Select" fx:id="selectBtn"/>
                        <Button text="Move" fx:id="moveBtn"/>
                    </HBox>
                    <HBox fx:id="undoBox">
                        <Button text="Delete" fx:id="deleteBtn"/>
                        <Button text="Undo" fx:id="undoBtn"/>
                        <Button text="Redo" fx:id="redoBtn"/>
                    </HBox>
                    <HBox fx:id="recognizeBox">
                        <Button text="Recognize" fx:id="recognizeBtn"/>
                    </HBox>
                </ToolBar>
            </VBox>
        </top>
        <bottom>
            <ToolBar>
                <Pane HBox.hgrow="ALWAYS" />
                <VBox alignment="CENTER">
                    <Slider fx:id="zoomSlider" min="10"  max="200" value="100"/>
                    <Label text="Zoom"/>
                </VBox>
                <Pane HBox.hgrow="ALWAYS" />
            </ToolBar>
        </bottom>
    </BorderPane>

    <stylesheets>
        <URL value="@main.css" />
    </stylesheets>
</StackPane>

And my application launcher class:

public class Launcher extends Application {

    public void start(Stage stage) throws IOException { 
        BorderPane tabView = null;
        FXMLLoader loader;

        StackPane canvasView = null;
        try {
            loader = new FXMLLoader(getClass().getClassLoader().getResource("view.fxml"));
            canvasView = (StackPane) loader.load();
        } catch (IOException e) {
            System.out.println(e.getMessage());
        }

        Scene scene = new Scene(canvasView, 1000, 800);

        stage.setScene(scene);
        stage.show();
    }
}

With this the buttons in the top toolbar are visible and working as well as the slider in the bottom one.

BUT, if I change the code to the following:

Group root = new Group();
root.getChildren().add(canvasView);
Scene scene = new Scene(root, 1000, 800);

The top toolbar is visible but the buttons are invisible and non-clickable and the bottom toolbar is completely disappeard (and the first pane "aDrawPane" is working as intended). I came across this problem when I wanted to put the view.fxml in a Tab. Why is this happening and how can I make the toolbar and the buttons visible again?

Answer 1

The reason is that a Group does not resize its children, but renders them at their preferred size.

The FXML states that the Pane should be

prefHeight="8000" prefWidth="10000" minWidth="10000"

and that is exactly what you get.