Q:

JavaFX Scene Builder: Creating a new scene or just making changes on a specific element?

I'm completely new to JavaFX and Scene Builder.
My program is designed as below picture, with 4 Buttons on the right and a TabPane on the left. The problem is I don't know how to design the TabPane for each button on the right. For example, if user click on Button 1, it shows 2 tabs Option 1 - A and Option 1 - B. If clicking on Button 2, it shows Option 2 - A and Option 2 - B and so on.
How can I achieve this? It it possible to add 4 TabPane designs in 1 scene (switch between them by show hide elements like working with html and javascript) or I need to make 4 copies of the first scene and change the TabPane for each of them?

A:

Sample app: This app has a mainview that consist of an anchorpane and two buttons. This app also has two other views. When the top button is pressed in the mainview, it loads viewOne into mainview's anchorpane. When the bottom button is pressed in the mainview, it loads viewTwo into mainview's anchorpane.

Main

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 *
 * @author blj0011
 */
public class JavaFXApplication63 extends Application
{

    @Override
    public void start(Stage stage) throws Exception
    {
        Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));

        Scene scene = new Scene(root);

        stage.setScene(scene);
        stage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args)
    {
        launch(args);
    }

}

BaseView Controller

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Pane;

/**
 *
 * @author blj0011
 */
public class FXMLDocumentController implements Initializable
{
    @FXML AnchorPane apMain;

    @FXML
    private void handleButtonAction(ActionEvent event)
    {
        try 
        {
            Pane newLoadedPane;

            Button tempButton = (Button)event.getSource();
            switch(tempButton.getId())
            {

                case "btnOne":
                    newLoadedPane =  FXMLLoader.load(getClass().getResource("viewOne.fxml"));
                    apMain.getChildren().add(newLoadedPane);
                    break;
                case "btnTwo":
                    newLoadedPane =  FXMLLoader.load(getClass().getResource("viewTwo.fxml"));
                    apMain.getChildren().add(newLoadedPane);
                    break;
            }
        }
        catch (IOException ex) {
            Logger.getLogger(FXMLDocumentController.class.getName()).log(Level.SEVERE, null, ex);
        }
    }

    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        // TODO
    }    

}

Baseview FXML

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane id="AnchorPane" prefHeight="200" prefWidth="320" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication63.FXMLDocumentController">
    <children>
        <Button fx:id="btnOne" layoutX="241.0" layoutY="24.0" onAction="#handleButtonAction" text="Click Me!" />
        <Button fx:id="btnTwo" layoutX="241.0" layoutY="56.0" onAction="#handleButtonAction" text="Click Me!" />
        <AnchorPane fx:id="apMain" maxHeight="200.0" maxWidth="200.0" minHeight="200.0" minWidth="200.0" prefHeight="200.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="120.0" AnchorPane.topAnchor="0.0" />
    </children>
</AnchorPane>

ViewOne Controller

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.Initializable;

/**
 * FXML Controller class
 *
 * @author blj0011
 */
public class ViewOneController implements Initializable
{

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        // TODO
    }    

}

ViewOne FXML

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

<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane fx:id="apOption2" maxHeight="200.0" maxWidth="200.0" minHeight="200.0" minWidth="200.0" prefHeight="200.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication63.ViewOneController">
   <children>
      <TabPane layoutX="125.0" layoutY="83.0" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <tabs>
          <Tab text="1 - A">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
          <Tab text="1 - B">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
        </tabs>
      </TabPane>
   </children>
</AnchorPane>

ViewTwo Controller

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.Initializable;

/**
 * FXML Controller class
 *
 * @author blj0011
 */
public class ViewTwoController implements Initializable
{

    /**
     * Initializes the controller class.
     */
    @Override
    public void initialize(URL url, ResourceBundle rb)
    {
        // TODO
    }    

}

ViewTwo FXML

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

<?import javafx.scene.control.Tab?>
<?import javafx.scene.control.TabPane?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane fx:id="apOption2" maxHeight="200.0" maxWidth="200.0" minHeight="200.0" minWidth="200.0" prefHeight="200.0" prefWidth="200.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="javafxapplication63.ViewTwoController">
   <children>
      <TabPane layoutX="24.0" layoutY="-14.0" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
        <tabs>
          <Tab text="2 - A">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
          <Tab text="2 - B">
            <content>
              <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
            </content>
          </Tab>
        </tabs>
      </TabPane>
   </children>
</AnchorPane>

In this app, no initial view is loaded into the main anchorpane when the app starts. You might want to load a view as soon as the app starts.

