Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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

}

}
like image 720
Snow Avatar asked Jul 19 '12 14:07

Snow


People also ask

How do I make a button in FXML?

You can create a Button by instantiating the javafx. scene. control. Button class of this package and, you can set text to the button using the setText() method.

How do I specify a controller in FXML?

FXML Controller Classes There are two ways to set a controller for an FXML file. The first way to set a controller is to specify it inside the FXML file. The second way is to set an instance of the controller class on the FXMLLoader instance used to load the FXML document.


2 Answers

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"));
}
like image 96
Sergey Grinev Avatar answered Sep 24 '22 15:09

Sergey Grinev


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")));
}
like image 32
Snow Avatar answered Sep 22 '22 15:09

Snow