How to create multiple javafx controllers with different fxml files?

Question

I've been looking at some blogs and other stackoverflow questions, and I'm not seeing a direct answer to my question. I am creating a javafx gui client and I want to have my menubar be one controller in one fxml and then i want the content area to be additional fxml files. The login screen will be one fxml, after the login screen will be the main content of the application and that will be in one fxml. How do i go about doing this?

I just don't want to have all of my code for my login, menubar, and main content in the same file. This is an image of what i am working on:

Answer 1

Use FXML as components by using a custom java class as fx:root and as fx:controller of your FXML file: http://docs.oracle.com/javafx/2/fxml_get_started/custom_control.htm

To do so, you need to call in the constructor of your custom java class FXMLLoader which will load your FXML. The advantage is to change the way FXML load components.

The classic way to instanciate components via FXMLLoader with nested controllers is: FXML first, then controller for each part.

With this technique this is: controller first, then FXML for each component. And you won't load FXML in FXML directly, you will import your custom java classes in the FXML.

This is a better abstraction (no need to know how a component is implemented when you import them in FXML) and helps reusing code as it is like implementing a custom widget with FXML support. To make your component reusable, make sure your implementation doesn't have tight coupling with other parts, or use IOC to do so (for instance, with Spring integration with JavaFX). This way, you will be able to import your component in any part of your application (just like a DateInput widget) without worry and you won't duplicate code.

In your case you will have:

public class MenuBox extends VBox {  @FXML private LoginBox loginBox;  @FXML private ProfilesBox profilesBox;  public MenuBox() {     FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("menu.fxml"));     fxmlLoader.setRoot(this);     fxmlLoader.setController(this);     try {         fxmlLoader.load();     } catch (IOException exception) {         throw new RuntimeException(exception);     } }  public class LoginBox extends VBox { public LoginBox() {     FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("login.fxml"));     fxmlLoader.setRoot(this);     fxmlLoader.setController(this);     try {         fxmlLoader.load();     } catch (IOException exception) {         throw new RuntimeException(exception);     } }  public class ProfilesBox extends VBox { public ProfilesBox() {     FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("profiles.fxml"));     fxmlLoader.setRoot(this);     fxmlLoader.setController(this);     try {         fxmlLoader.load();     } catch (IOException exception) {         throw new RuntimeException(exception);     } } 

And you will import LoginBox and ProfilesBox in menu.fxml that manages the global layout for your page:

<?import com.foo.bar.LoginBox ?> <?import com.foo.bar.ProfilesBox ?> <fx:root type="javafx.scene.layout.VBox"     xmlns:fx="http://javafx.com/fxml">  <!-- Stuff here to declare the menu bar-->      <HBox>        <ProfilesBox fx:id="profilesBox"/>        <LoginBox fx:id="loginBox"/>     </HBox>  </fx:root> 

login.fxml and profiles.fxml contain just basic components.