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 } }

hier Picture for my desired funktion alsphera.com/enter/howtodoit.png — Snow
– Snow, Commented Jul 19, 2012 at 16:13

Sergei Grinev · Accepted Answer · 2012-07-19 16:53:29Z

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")); }

I was about to suggest it. You can even iterate over your children an d replace one using it's id if that's the case
this schould work fine if everything was put into MainViewController, but i want to keep modularity, how can i get from TaskBarController wich is attached to TaskBar.fxml the access to parent node? would be the BorderPane from MainView.fxml, and than i could attach the loaded content2.fxml to center of the boarderpane

Snow · Accepted Answer · 2012-07-22 18:07:22Z

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"))); }

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related