Javafx Load TableView based on event from other TableView

Question

Basically I have 2 TableView elements. One with Teams and the second one with People. Each of these tableViews has its own FXML file, and are created within a controller. As an example, here is the TeamViewController.java:

public class TeamsViewController implements Initializable{

    // Service layer for accessing datastore
    private ServiceLayer serviceLayer = new ServiceLayer();

    @FXML private TableView<Team> tableView;
    private TableColumn<Team, Integer> idCol;

    @Override
    public void initialize(URL location, ResourceBundle resources) {

    tableView.getColumns().addAll(
            this.createIdCol(),
            this.createTeamNameCol(),
            this.createButtonColumn()); // Click to show Team members

    tableView.getItems().setAll(serviceLayer.getAllTeams());

}
// ......... bunch of methods to create the columns, etc.

And here the FXML file:

<AnchorPane prefHeight="342.0000999999975" prefWidth="568.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller="main.ui.TeamsViewController">
  <children>
    <TableView fx:id="tableView" maxHeight="-1.0" maxWidth="-1.0" prefHeight="282.0" prefWidth="568.0" />
  </children>
</AnchorPane>

Now, both table work fine when I add them separately to the main scene of my application this way:

public static void main(String[] args) {
    launch(args);
}
@Override
public void start(Stage primaryStage) {
    try {

        // This shows the Team table
        AnchorPane root = (AnchorPane) FXMLLoader.load(getClass().getResource("teamViewController.fxml"));
        Scene scene = new Scene(root,800,400);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();


        //This will show the People table
        AnchorPane people = (AnchorPane) FXMLLoader.load(getClass().getResource("peopleViewController.fxml"));
        scene.setRoot(people);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        log.severe(e.getMessage());
        e.printStackTrace();
    }
}

The last column of the Teams Table has a button. So, where I am stuck is: How can I show the team members table (People) when I click on the "Detail" button in my Team table? Thanks in advance for any tip!

Codelord Codelord · Accepted Answer · 2013-12-04T14:26:32

As you are using FXML's for both tableviews , you need to switch these fxml at click event of the 'Detail' button.

You also need to change your application file for changing fxmls.

You can use this code

 public void start(Stage primaryStage) {

    try {
        stage = primaryStage;

        gotohome();

        primaryStage.show();
    } catch (Exception ex) {
        Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
    }
}

public void gotohome() {
    try {
        FXMLController home = (FXMLController) replaceSceneContent("Homepage.fxml");
        home.setApp(this);
    } catch (Exception ex) {
        Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
    }
}

public void gotoproductwise() {
    try {
        SampleController product_wise = (SampleController) replaceSceneContent("/product_wise/product_wise.fxml");
        product_wise.setApp(this);
    } catch (Exception ex) {
        Logger.getLogger(Main.class.getName()).log(Level.SEVERE, null, ex);
    }
}


private Initializable replaceSceneContent(String fxml) throws Exception {
    FXMLLoader loader = new FXMLLoader();
    InputStream in = Main.class.getResourceAsStream(fxml);
    loader.setBuilderFactory(new JavaFXBuilderFactory());
    loader.setLocation(Main.class.getResource(fxml));
    AnchorPane page;
    try {
        page = (AnchorPane) loader.load(in);
    } finally {
        in.close();
    }

    // Store the stage width and height in case the user has resized the window
    double stageWidth = stage.getWidth();
    if (!Double.isNaN(stageWidth)) {
        stageWidth -= (stage.getWidth() - stage.getScene().getWidth());
    }

    double stageHeight = stage.getHeight();
    if (!Double.isNaN(stageHeight)) {
        stageHeight -= (stage.getHeight() - stage.getScene().getHeight());
    }

    Scene scene = new Scene(page);
    if (!Double.isNaN(stageWidth)) {
        page.setPrefWidth(stageWidth);
    }
    if (!Double.isNaN(stageHeight)) {
        page.setPrefHeight(stageHeight);
    }

   // stage.setOpacity(1);
    stage.setScene(scene);
    stage.sizeToScene();
    return (Initializable) loader.getController();
}

So you must send object of main application class to controller and from there you can call switching methods.

add this code to your Controller class

 private Main application; 
public void setApp(Main application) {
this.application=application;
}

Javafx Load TableView based on event from other TableView

1 Answers