Is there a way to change source path of <fx: include source = "source.fxml"> through a button

I'm trying to change the fxml code of a VBox through a button, but it the code gives me a NullPointerException error:

this is my sample.fxml

    <VBox fx:id="optionsVBox" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="515.0" prefWidth="515.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <fx:include fx:id="VBoxInclude" source="VBox1.fxml"/>
   </VBox>

there is my VBox1 (by default):

<VBox fx:id="options" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="370.0" prefWidth="270.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
                  <HBox alignment="CENTER" VBox.vgrow="ALWAYS">
                     <children>
                        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Options" onAction="#goToOptions">
                           <font>
                              <Font name="Century Gothic" size="20.0" />
                           </font>
                        </Button>
                     </children>
                  </HBox>
                  <HBox alignment="CENTER" VBox.vgrow="ALWAYS">
                     <children>
                        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Re-Play?">
                           <font>
                              <Font name="Century Gothic" size="20.0" />
                           </font>
                        </Button>
                     </children>
                  </HBox>
               </children>
</VBox>

and when the button in VBox1 is pressed, the sample's fxml path should swap with this VBOX2

<VBox fx:id="change" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="370.0" prefWidth="270.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <children>
      <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
         <children>
            <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Log out?">
               <font>
                  <Font name="Century Gothic" size="20.0" />
               </font>
            </Button>
            <Button mnemonicParsing="false" onAction="#goBack" prefHeight="70.0" prefWidth="100.0" text="Back..." HBox.hgrow="ALWAYS">
               <HBox.margin>
                  <Insets left="5.0" />
               </HBox.margin>
               <font>
                  <Font name="Century Gothic" size="20.0" />
               </font>
            </Button>
         </children>
      </HBox>
   </children>
</VBox>

And my controller (when a button is pressed in a vbox, it should change the VBox with the other VBox):

@FXML
public void goToOptions() throws IOException{

    optionsVBox.getChildren().clear();
    optionsVBox.getChildren().add(FXMLLoader.load(getClass().getResource("VBox2.fxml")));

}
@FXML
public void goBack() throws IOException {

    optionsVBox.getChildren().clear();
    optionsVBox.getChildren().add(FXMLLoader.load(getClass().getResource("VBox1.fxml")));
}

P.s. all the fxml files are in the same package

Here is the Stack Trace (hope I did it correctly)

Caused by: java.lang.NullPointerException
    at sample.Controller.goToOptions(Controller.java:29)
    ... 58 more

Here is what it points to

optionsVBox.getChildren().clear();
        optionsVBox.getChildren().add(FXMLLoader.load(getClass().getResource("/VBox2.fxml")));

And the rest that didn't have a path to my code

Exception in thread "JavaFX Application Thread" java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
    at javafx.fxml.FXMLLoader$MethodHandler.invoke(FXMLLoader.java:1774)
    at javafx.fxml.FXMLLoader$ControllerMethodEventHandler.handle(FXMLLoader.java:1657)
    at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:86)
    at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
    at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
    at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
    at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
    at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
    at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
    at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
    at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
    at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
    at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
    at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:49)
    at javafx.event.Event.fireEvent(Event.java:198)
    at javafx.scene.Node.fireEvent(Node.java:8413)
    at javafx.scene.control.Button.fire(Button.java:185)
    at com.sun.javafx.scene.control.behavior.ButtonBehavior.mouseReleased(ButtonBehavior.java:182)
    at com.sun.javafx.scene.control.skin.BehaviorSkinBase$1.handle(BehaviorSkinBase.java:96)
    at com.sun.javafx.scene.control.skin.BehaviorSkinBase$1.handle(BehaviorSkinBase.java:89)
    at com.sun.javafx.event.CompositeEventHandler$NormalEventHandlerRecord.handleBubblingEvent(CompositeEventHandler.java:218)
    at com.sun.javafx.event.CompositeEventHandler.dispatchBubblingEvent(CompositeEventHandler.java:80)
    at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:238)
    at com.sun.javafx.event.EventHandlerManager.dispatchBubblingEvent(EventHandlerManager.java:191)
    at com.sun.javafx.event.CompositeEventDispatcher.dispatchBubblingEvent(CompositeEventDispatcher.java:59)
    at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:58)
    at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
    at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
    at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
    at com.sun.javafx.event.BasicEventDispatcher.dispatchEvent(BasicEventDispatcher.java:56)
    at com.sun.javafx.event.EventDispatchChainImpl.dispatchEvent(EventDispatchChainImpl.java:114)
    at com.sun.javafx.event.EventUtil.fireEventImpl(EventUtil.java:74)
    at com.sun.javafx.event.EventUtil.fireEvent(EventUtil.java:54)
    at javafx.event.Event.fireEvent(Event.java:198)
    at javafx.scene.Scene$MouseHandler.process(Scene.java:3757)
    at javafx.scene.Scene$MouseHandler.access$1500(Scene.java:3485)
    at javafx.scene.Scene.impl_processMouseEvent(Scene.java:1762)
    at javafx.scene.Scene$ScenePeerListener.mouseEvent(Scene.java:2494)
    at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:394)
    at com.sun.javafx.tk.quantum.GlassViewEventHandler$MouseEventNotification.run(GlassViewEventHandler.java:295)
    at java.security.AccessController.doPrivileged(Native Method)
    at com.sun.javafx.tk.quantum.GlassViewEventHandler.lambda$handleMouseEvent$353(GlassViewEventHandler.java:432)
    at com.sun.javafx.tk.quantum.QuantumToolkit.runWithoutRenderLock(QuantumToolkit.java:389)
    at com.sun.javafx.tk.quantum.GlassViewEventHandler.handleMouseEvent(GlassViewEventHandler.java:431)
    at com.sun.glass.ui.View.handleMouseEvent(View.java:555)
    at com.sun.glass.ui.View.notifyMouse(View.java:937)
    at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
    at com.sun.glass.ui.win.WinApplication.lambda$null$147(WinApplication.java:177)
    at java.lang.Thread.run(Thread.java:748)
Caused by: java.lang.reflect.InvocationTargetException
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at sun.reflect.misc.Trampoline.invoke(MethodUtil.java:71)
    at sun.reflect.GeneratedMethodAccessor1.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at sun.reflect.misc.MethodUtil.invoke(MethodUtil.java:275)
    at javafx.fxml.FXMLLoader$MethodHandler.invoke(FXMLLoader.java:1771)
    ... 48 more

Solution

The problem seems to be fx:controller specified in both of yours VBox1 and VBox2 fxml files definitions.

Let me propose the following solution:

sample.fxml

fx:include both options and change VBox definitions
specify fx:id for both these VBoxes
set visible and managed properties to false for the second VBox

code:

<?import javafx.scene.layout.VBox?>
<VBox fx:id="optionsVBox" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
  prefHeight="515.0" prefWidth="515.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1"
  fx:controller="sample.Controller">
<!-- controller set in top level VBox-->

    <!-- both vboxes added as children, removed fx:controller from their definition -->
    <fx:include source="optionsVBox.fxml" fx:id="options"/>

    <!-- visible and managed is set to FALSE in the beginning -->
    <!-- visible - whether user could see the control -->
    <!-- managed - whether control occupies space in the layout -->
    <fx:include source="changeVBox.fxml" fx:id="change" visible="false" managed="false"/>
</VBox>

optionsVbox.fxml

specify fx:id for the button you want something to happen on click
remove fx:controller from top level VBox
remove onAction from the button - this will be wired in code later on

code:

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      prefHeight="400.0" prefWidth="600.0">
    <HBox alignment="CENTER" VBox.vgrow="ALWAYS">
        <!-- add fx:id to this button! -->
        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Options" fx:id="btnOptions">
            <font>
                <Font name="Century Gothic" size="20.0"/>
            </font>
        </Button>
    </HBox>
    <HBox alignment="CENTER" VBox.vgrow="ALWAYS">
        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Re-Play?">
            <font>
                <Font name="Century Gothic" size="20.0"/>
            </font>
        </Button>
    </HBox>
</VBox>

changeVbox.fxml

do the same as for optionsVbox.fxml

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity"
      prefHeight="370.0" prefWidth="270.0">
    <HBox alignment="CENTER" prefHeight="100.0" prefWidth="200.0">
        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="150.0" text="Log out?">
            <font>
                <Font name="Century Gothic" size="20.0"/>
            </font>
        </Button>
        <Button mnemonicParsing="false" prefHeight="70.0" prefWidth="100.0"
                text="Back..." HBox.hgrow="ALWAYS" fx:id="btnChange">
            <HBox.margin>
                <Insets left="5.0"/>
            </HBox.margin>
            <font>
                <Font name="Century Gothic" size="20.0"/>
            </font>
        </Button>
    </HBox>
</VBox>

Controller.java

wire VBoxes by their fx:ids
find Buttons by their fx:ids using lookup function and set proper onAction callbacks
toggle visible and managed properties in the callbacks

code:

package sample;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.layout.VBox;

public class Controller {
    @FXML
    public VBox change, options;

    @FXML
    void initialize() {
        Button btnOptions = (Button) options.lookup("#btnOptions");
        btnOptions.setOnAction(this::goToOptions);
        Button btnChange = (Button) change.lookup("#btnChange");
        btnChange.setOnAction(this::goBack);
    }

    @FXML
    public void goBack(ActionEvent actionEvent) {
        change.setVisible(false);
        change.setManaged(false);
        options.setVisible(true);
        options.setManaged(true);
    }
    public void goToOptions(ActionEvent actionEvent) {
        change.setVisible(true);
        change.setManaged(true);
        options.setVisible(false);
        options.setManaged(false);
    }
}