JAVAFX - Change specific Pane only using 1 window

Question

Can you Help me how to change the Spesific pane in 1 scene.

So when i want to click the Menu A. The Content will change to content A. And when i click the menu B. The Content will be change to Content B

i try with the 2 FXML and using normal method like load screen A an screen B

But the result only change the window. i want to change the content with 1 window only.

Is there any suggestion how to change the specific pane in 1 window?

Answer 1

As an option. Make FXML and controller for any "Content" and when the some button is clicked to delete the old "Content" and upload new.

Working example below (edited according to James_D comment):

Main.java

public class Main extends Application {
    Parent root;
    Stage stage;

    @Override
    public void start(Stage primaryStage) {
        try {
            root = FXMLLoader.load(getClass().getResource("Main.fxml"));
            stage = primaryStage;
            stage.setTitle("Stage");

            Scene scene = new Scene(root);
            stage.setScene(scene);
            stage.show();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

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

Main.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<BorderPane fx:id="mainPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Controller">
   <left>
      <ToolBar orientation="VERTICAL" BorderPane.alignment="CENTER">
        <items>
          <Button mnemonicParsing="false" onAction="#onBtnAClick" text="A" />
            <Button mnemonicParsing="false" onAction="#onBtnBClick" text="B" />
            <Button mnemonicParsing="false" onAction="#onBtnCClick" text="C" />
        </items>
      </ToolBar>
   </left>
</BorderPane>

Controller.java

import javafx.fxml.FXML;
import javafx.scene.layout.BorderPane;

public class Controller {

    @FXML
    BorderPane mainPane;

    @FXML
    public void onBtnAClick(){
        ContentA contentA = new ContentA();
        mainPane.setCenter(contentA);
    }

    @FXML
    public void onBtnBClick(){
        ContentB contentB = new ContentB();
        mainPane.setCenter(contentB);
    }

    @FXML
    public void onBtnCClick(){
        ContentC contentC = new ContentC();
        mainPane.setCenter(contentC);
    }

}

And some sample of Content:

ContentA.java

public class ContentA extends AnchorPane{

    public ContentA(){
        FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("ContentA.fxml"));

        fxmlLoader.setRoot(this);
        fxmlLoader.setController(this);

        try {
            fxmlLoader.load();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

ContentA.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<fx:root prefHeight="200.0" prefWidth="300.0" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ListView layoutX="50.0" layoutY="-26.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
   </children>
</fx:root>

Answer 2

try to use this, its easy

Parent root = null; 
        try {
            root=FXMLLoader.load(getClass().getResource("your_FXML_File.fxml"));
        } catch (Exception e) {
        }
        borderpane.setCenter(root);