How to change sub fxml gui parts at runtime with Button Click

Question

I'm tryin to build a skeleton for a big complex gui, so the idea is to make everything with mvc like style in javafx 2.1, so every component has a fxml file and if needed css,controller and model. I'm tryin to figure out how to change sub scenes(sub fxml at runtime). Anybody know how to do it? I'm kinda stuck on this. May bee to add MainViewController? scenario: user clicks on button in taskbar and the included content1.fxml will be replaced with content2.fxml

here the basic code

MainApp.java

Loads the MainView.fxml

MainView.fxml

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>


 <BorderPane xmlns:fx="http://javafx.com/fxml">
<center>
    <fx:include source="Content1.fxml"/>
</center>

<bottom>
    <fx:include source="TaskBar.fxml"/>
</bottom>

</BorderPane>

Content1.fxml

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<StackPane xmlns:fx="http://javafx.com/fxml" fx:id="content1">
    <Label text="Hallo Java FX 2.1.1 Content1.fxml"/>
</StackPane>

Content2.fxml

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<StackPane xmlns:fx="http://javafx.com/fxml" fx:id="content2">
    <Label text="Hallo Java FX 2.1.1 Content2.fxml"/>
</StackPane>

TaskBar.fxml

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<HBox xmlns:fx="http://javafx.com/fxml" spacing="10" alignment="center" 
     fx:id="taskBar" fx:controller="TaskBarController">
    <children>
        <Button fx:id="taskBarButton1" onAction="#handleTaskBarButton1Action"/>     
        <Button fx:id="taskBarButton2" onAction="#handleTaskBarButton2Action"/> 
    </children>
</HBox>

TaskBarController.java

import java.net.URL;
import java.util.ResourceBundle;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;

public class TaskBarController implements Initializable {

// Binding with the FXML
@FXML
private Button taskBarButton1;

@FXML
private Button taskBarButton2;

@FXML
private void handleTaskBarButton1Action(ActionEvent event) {
    System.out.println("click! taskBarButton1");
}

@FXML
private void handleTaskBarButton2Action(ActionEvent event) {
    System.out.println("click! taskBarButton2");
}

@Override
public void initialize(URL location, ResourceBundle resources) {
    // TODO Auto-generated method stub

}

}

Answer 1

Don't just include fxml, create a business logic layer for that:

<BorderPane xmlns:fx="http://javafx.com/fxml">
<center>
    <Pane fx:id="content"/>
</center>

and update it in button click handlers:

@FXML
private void handleTaskBarButton2Action(ActionEvent event) {
   System.out.println("click! taskBarButton2");
   content.getChildren().clear();
   content.getChildren().add(FXMLLoader.load(getClass().getResource("Content2.fxml"));
}

Answer 2

it works,thx for help, but i was forced to remove TaskBar.fxml and TaskBarController.java , wrote a MainViewController with @FXML handles and @FXML for the Buttons and the Pane with the fx:id="content" , and put my customs Buttons in MainView.fxml

@FXML
private void handleTaskBarButton2Action(ActionEvent event) throws IOException {
    System.out.println("click! taskBarButton2");
    content.getChildren().clear();
    content.getChildren().add((Node) FXMLLoader.load(getClass().getResource("Content2.fxml")));
}