Javafx, Cannot display tableview content to different tab?

Question

I want to create tabs that display different content as a tableview. However, it only shows the table with no columns and content in each tab. Here are the relevant code.

@Override
public void start(Stage primaryStage) {
    this.primaryStage = primaryStage;
    this.primaryStage.setTitle(WINDOW_TITLE);
    showWindow();
}

public void showWindow() {
    try {
        FXMLLoader loader = new FXMLLoader();
        loader.setLocation(UserInterface.class.getResource(MAIN_WINDOW_LAYOUT));
        AnchorPane page = (AnchorPane) loader.load();
        Scene scene = new Scene(page);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch (IOException e) {
        e.printStackTrace();
    }
}

/**
 * Returns the main stage.
 *
 * @return primaryStage
 */
public Stage getPrimaryStage() {
    return primaryStage;
}

public static void main(String[] args) {
    launch(args);
}

Table class that create the table

/**
 * Creates a Task Table to display tasks
 *
 */
protected TaskTable(ArrayList<Tasks> taskListToDisplay) {
    FXMLLoader loader = new FXMLLoader(getClass().getResource(LOCATION_TASK_TABLE_FXML));
    loader.setController(this); // Required due to different package declaration from Main
    setTable(taskListToDisplay);
    indexCol.getStyleClass().add("align-center");
    timeCol.getStyleClass().add("align-right");
    indexCol.setCellValueFactory(new PropertyValueFactory<>("index"));
    descriptionCol.setCellValueFactory(new PropertyValueFactory<>("description"));
    timeCol.setCellValueFactory(new PropertyValueFactory<>("time"));
    table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

}


/**
 * Create task table to display
 */
public ObservableList<TaskModel> getTaskList(ArrayList<Tasks> currentList) {
    ObservableList<TaskModel> taskData = FXCollections.observableArrayList();
    DateDisplay display = new DateDisplay();

    for (int i = 0; i < currentList.size(); i++) {
        Tasks currentTask = currentList.get(i);
        taskData.add(new TaskModel(i + 1, currentTask.getDescription(),
                display.getDurationString(currentTask)));
    }
    return taskData;
}

public Node getTaskTable(){
    return this.taskTable;
}

public TableView getTable(){
    return this.table;
}

public void setTable(ArrayList<Tasks> taskList){
    table.setItems(getTaskList(taskList));
}

public void setObservableTable(ObservableList taskList) {
     table.getItems().setAll(taskList);
}

And TabHandler

    // -----------------------------------------
    // FXML variables
    // -----------------------------------------
    @FXML
    private TextField userCommand;
    @FXML
    private Label feedback;
    @FXML
    private Tab toDoTab;
    @FXML
    private Tab completedTab;
    @FXML
    private TabPane tabPane;
    @FXML
    private TaskTable toDoTaskTable = new TaskTable();
    @FXML
    private TaskTable completedTaskTable = new TaskTable();

    // -----------------------------------------
    // Class variables
    // -----------------------------------------
    private ArrayList<Tasks> currentToDoList = new ArrayList<Tasks>();
    private ArrayList<Tasks> currentCompletedList = new ArrayList<Tasks>();


    // -------------------------------------------------------
    // Message String
    // -------------------------------------------------------

    private static final String PROMPT_USERCOMMAND_TEXT = "Enter command";
    private static final String PROMPT_USERCOMMAND_CLEAR = "";


    @FXML
    private void initialize() throws Exception {
                initGUI();
                handleUserInput();
    }

    public void handleUserInput() {
        userCommand.setOnKeyPressed(e -> {
            if (e.getCode().equals(KeyCode.ENTER)) {
                String userInput = userCommand.getText();
                FeedbackMessage output;
                try {
                    output = getOutputFromLogic(userInput);

                    currentToDoList = output.getIncompleteTaskList();
                    currentCompletedList = output.getCompleteTaskList();

                    toDoTaskTable = new TaskTable(currentToDoList);
                    completedTaskTable = new TaskTable(currentCompletedList);

                    toDoTab.setContent(toDoTaskTable.getTable());
                    completedTab.setContent(completedTaskTable.getTable());

                    feedback.setText(output.getFeedback());
                } catch (Exception e1) {
                    // TODO Auto-generated catch block
                    e1.printStackTrace();
                }
            }


        });
    }

    public void initGUI() {
            toDoTaskTable.setTable(currentToDoList);
            completedTaskTable.setTable(currentCompletedList);
            toDoTab.setContent(toDoTaskTable.getTableView());
            completedTab.setContent(completedTaskTable.getTableView());
    }

Answer 1

You should not do this :

@FXML
private TaskTable toDoTaskTable = new TaskTable();

There is a reason why you are annotating the field with @FXML and it being when your FXML is loaded this field will be instantiated with all other fields.

If you re-instantiate it with the keyword new the reference to the original control is lost (The control should be there in the FXML). When you call setTable on the new created instance, you are adding data into this object which has nothing to do with the object which is being displayed on the FXML and so it always appears empty.

I am guessing (from the way you have put your question and I should be guessing right) that TaskTable is a custom component. If yes, then you can easily import the custom component into the scene builder. There are questions and answers to help you with it.

Once you remove new TaskTable() from the above code and fix other issues, your code should get going.