JavaFX Switch Scene in a SplitPane?

Question

At the Base I have an AnchorPane then a SplitPane. On the left pane I have a listView and depending on the list element selected, the right pane displays the appropriate content. The way I have done this is by overlapping AnchorPanes and setting them to .setVisible(false) initially and as they are selected I set them to .setVisible(true) like so :

public void listSelection() {       
    String selection = listView.getSelectionModel().getSelectedItem();
    switch(selection) {
    case "Speed of sound":
        disableOld(); // disables old AnchorePane
        response.setText("Speed of sound conversion");
        AnchorPane1.setVisible(true);   
        break;
    case "Temperature conversion":
        disableOld(); 
        response.setText("Temperature conversion");
        AnchorPane2.setVisible(true);       
        break;
    }
}

I would like to know how to produce the same effect visually but with different scenes as I would like for each new AnchorPane to have it's own FXML and ControllerClass.

Answer 1

You can implement something like this :

Your main class :

public void start(Stage primaryStage) throws IOException {
            primaryStage.setTitle("Title");
            primaryStage.setScene(createScene(loadMainPane("path_of_your_fxml")));
            primaryStage.show();

    }

    private Pane loadMainPane(String path) throws IOException {
        FXMLLoader loader = new FXMLLoader();

        Pane mainPane = (Pane) loader.load(
                getClass().getResourceAsStream(path));

        return mainPane;
    }


    private Scene createScene(Pane mainPane) {
        Scene scene = new Scene(mainPane);
      return scene;
    }
    public static void main(String[] args) {launch(args); }

Then you can create a separate class call Navigator to store all your fxml paths:

public class Navigator {

private final String P1;
private final String P2;
//then you can implement getters...
public String getP1() {
    return P1;
}

public String getP2() {
    return p2;
}

private static FxmlController Controller;

    public static void loadPane(String fxml) {
    try {
        FxmlController.setPane(
                (Node) FXMLLoader.load(Navigator.class.getResource(fxml)));
    } catch (IOException e) {
        e.printStackTrace();
    }
}

public Navigator() throws IOException {
    this.P1 = "p1.fxml";
    this.P2 = "p2.fxml";}

In your main FxmlController (which is the controller of the permanent layer of your application , rest of the stack-panes-{p1 and p2} will load on your permanent layer )

This is how you load layers on the main FxmlController :

@FXML
private StackPane stackPaneHolder;
... 

public void setPane(Node node) {
    if (stackPaneHolder.getChildren().isEmpty()) {
        //if stackPaneHolder is empty
        stackPaneHolder.getChildren().add(node);

    } else {
        if (stackPaneHolder.getClip() != node) {
          //if stackPaneHolder is not empty then remove existing layer and add new layer
            stackPaneHolder.getChildren().remove(0);
            stackPaneHolder.getChildren().add(0, node);
        }
    }
}

Then you can load panes by pressing a button like below :

@FXML
private void btnAction(ActionEvent event) throws IOException {
Navigator.load(new Navigator().getP1());
..

This is how it works :