JavaFX how to inject new FXML content to current Scene

Question

I have an app, which has HomeScene.fxml file with headers and menu. HomeScene has also dashboardPane, which should be changed dynamically after menu button is being pressed. Dashboard pane content should be loaded from another fxml file, lets say 'FinancesPane.fxml' or 'SettingsPane.fxml'.

Im trying to replace content of dashboardPane in HomeController:

@FXML
public void handleFinancesButtonAction() {
    FinancesPaneFactory paneFactory = new FinancesPaneFactory();
    dashBoardPane.getChildren().clear();
    dashBoardPane.getChildren().add(paneFactory.createPane());
}

My FinancesPaneFactory looks like this:

public class FinancesPaneFactory extends PaneFactory {

    private static final String PANE_TEMPLATE_PATH = "/sceneTemplates/FinancesPane.fxml";

    public FinancesPaneFactory() {
        super(PANE_TEMPLATE_PATH );
    }

    @Override
    protected Pane generatePane(FXMLLoader loader) {
        try {
            return (Pane) loader.load();
        } catch (IOException e) {
            throw new FatBirdRuntimeException("Unable to load FinancesPane", e);
        }
    }

}

To be more clear, this is how HomeScene looks like: HomeScene . This empty space is a dashboardPane, and should be replaced with another content when user press the left menu button.

How to inject this content dynamically?

Answer 1

Yes, you should do this to keep scene graph low and you will benefit from better performance , what i do is create dynamic container :

@FXML
private ScrollPane dynamicNode;

Scroll pane is a good choice.

This is put to MainController.

I have main controller different from others , main controller is actually the only one i initialize, so in your main program class whatever you call it :

private static MainViewController mainViewController;

...

 private static BorderPane loadMainPane() throws IOException {

        FXMLLoader loader = new FXMLLoader();
        loader.setController(mainViewController);
        BorderPane mainPane = (BorderPane) loader.load(
                CsgoRr.class
                .getResourceAsStream(Info.Resource.FXML_FILE_MAIN));
        mainPane.getStylesheets().add(CsgoRr.class.getResource("path...style.css").toString());

        return mainPane;
    }

Dont forget to create static accessor, other controllers that i have are usually not created this way , i use fx:controller in fxml to specify what controller should be for which fxml , its usually handy to have mainController accessable.

So to change your views create in your main controller methods that are connected to your menu with whose you change views

@FXML
private void setViewPreferences() {
    setView(Info.Resource.FXML_FILE_PREFERENCES);
}

@FXML
private void setViewProductPage() {
    setView(Info.Resource.FXML_FILE_PRODUCT_PAGE);
}

Currently in dynamicNode is helper to see what exactly is the current selected, its

private String currentlyInDynamicPane;//not important

Here is setView

   public void setView(String fxmlPath) {
         dynamicNode.setContent(getView(fxmlPath));
            currentlyInDynamicPane = fxmlPath;
   }


  public Node getView(String fxmlPath) {
        try {
            return new FXMLLoader(getClass().getResource(fxmlPath)).load();
        } catch (IOException ex) {
            ex.printStackTrace();
            return null;
        }
    }

So when you click left menu you swap FXML files, you can make sure that you have some default FXML shown at the start or when nothing in menu is selected as well.

This is the way i do it, roughly.

So think about YOUR DASHBOARD as DynamicPane,