How do I update the center node of a BorderPane using FXML Controller

Question

I am trying to update the center node of a BorderPane using FXML. I have created a VBox on the left with Buttons and when clicked they are supposed to update the center node however the center node does not update. Can someone shed some light on what I am doing incorrectly?

I know the buttons events work (they print to the screen usiong println) but it will not update the UI.

The root nodes .fxml (the BorderPane):

<?import javafx.scene.layout.BorderPane?>

<BorderPane xmlns:fx="http://javafx.com/fxml" fx:id="rootPane">

    <left>
    </left>

    <center>
    </center>

</BorderPane>

The menu

<?import javafx.scene.layout.VBox?>
<?import javafx.scene.control.Button?>

<VBox fx:controller="" xmlns:fx="http://javafx.com/fxml" >
    <children>
        <Button text="Dashboard"            fx:id="dashboardButton" onAction="#dashboardButtonEvent"    />
        <Button text="Sales"                fx:id="salesButton"     onAction="#salesButtonEvent"        />
    </children>
</VBox>

The MenuController

public class MenuController implements Initializable {

    @FXML
    private BorderPane rootPane;

    @FXML
    private Button dashboardButton; //same name as in the menu.fxml file

    @FXML
    private Button salesButton; //same name as in the menu.fxml file

    @FXML
    private void dashboardButtonEvent(ActionEvent event) {
        try {
            VBox dashboard = FXMLLoader.load(getClass().getResource("../../../fxml/dashboard.fxml"));
            rootPane = FXMLLoader.load(getClass().getResource("../../../fxml/root.fxml"));
            rootPane.setCenter(dashboard);
        } catch (IOException e) { System.out.println(e); }
    }

    @FXML
    private void salesButtonEvent(ActionEvent event) {
        try {
            VBox sales = FXMLLoader.load(getClass().getResource("../../../fxml/sales.fxml"));
            rootPane = FXMLLoader.load(getClass().getResource("../../../fxml/root.fxml"));
            rootPane.setCenter(sales);

        } catch (IOException e) { System.out.println(e); }
    }

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

    }
}

I assume where I am going wrong is the way I am going about assigning the root pane using rootPane = FXMLLoader.load(getClass().getResource("../../../fxml/root.fxml"));. If thats the case, how do I get the current rootPane from the existing scene?

I think your are wrong in thinking about FXML. You use FXML to describe the UI. Then, in the application you load the FXML. After that you work only with the defined controllers. You don't change the FXML-File in the process. In your event-methods you must access the controller of the nodes.fxml and set the child of the rootPane there. By calling FXMLLoader.load() you allways create a new instance of your UI. — Ralf Renz, Sep 17 '18 at 13:36
https://stackoverflow.com/questions/48425065/load-new-fxml-in-borderpane-center — SedJ601, Sep 17 '18 at 13:47

How do I update the center node of a BorderPane using FXML Controller

0 Answers0