Using multiples FXML files in a javafx application

In this post we assume that you have the knowledge necessary for building your user interface with the JavaFX SceneBuilder.

Usually, one FXMl file represent one screen in the user interface and practically any decent application has more than one.

So how to switch between mutiples fxml files ?

Remember that FXML files are loaded into JavaFX applications by the JavaFX runtime using the FXML Loader class and the result is always a Java object, usually a node such as a Group or a Pane.

So for this purpose we will use a screen controller that holds all of the instances of the fxml files loaded. And every fxml controller will point the instance of that controller.

The screen controller will give the appropriate root to the scene when needed.

public class Controller {
    Pane                     container;
    Map<String, Pane>        screens;  
    public Controller(Pane container) {
        this.container = container;
        screens = new HashMap<>();
    }      

    public void switchContent(String fxml) {            
       container.getChildren().clear();                
       container.getChildren().add(getContent(fxml)); 
    }

    private Pane getContent(String fxml) {        
        if (!screens.containsKey(fxml)) {
            Parent node = loadContent(fxml);
            screens.put(fxml,(Pane) node);
        }        
        return screens.get(fxml);
    }

    private Parent loadContent(String fxml) {
        String path = String.format("%s.fxml", fxml);
        FXMLLoader loader = new FXMLLoader();
        loader.setBuilderFactory(new JavaFXBuilderFactory());
        loader.setLocation(this.getClass().getResource(path));
        Parent page = null;
        try (InputStream in = this.getClass().getResourceAsStream(path)) {
            page = loader.load(in);
            ((Managed) loader.getController()).setScreensController(this);
        } catch (IOException ex) {
            ex.printStackTrace();
        }                     
        return page;
    }         
}

The screens variable contains all the fxml previously loaded.
container represents the root node in our Scene.

Also every fxml Controller must have a variable of the type Controller and implements that interface :

public interface Managed {
    public void setScreensController(Controller controller); 
}

So when we need to switch to another screen, we simply call the switch node method of the controller.
and finally the main class will look like this

public class MultiFxmlApp extends Application {
    
    static Controller controller;
    
    @Override
    public void start(Stage stage) throws Exception {
        
        stage.setScene(new Scene(new StackPane()));
        
        controller = new Controller( (Pane) stage.getScene().getRoot());                                       
        
        controller.switchContent("first");
        
        stage.setResizable(false);
        
        stage.show();
        
    }


    public static void main(String[] args) {
        launch(args);
    }
}

the source files of the application are on github

https://github.com/mooninvader/MutipleFxml