How to populate a TableView that is defined in an fxml file that is designed in JavaFx Scene Builder

Question

I would like to know how do I populate a TableView with data... All the examples I have seen creates a TableView with columns and everything and add it to the scene. All done in the java code itself.

What I want to know: if I design my "form" in JavaFx Scene builder. Defining all the tables and columns in there. How do I access it to populate it from java? Or if someone can point me to a proper tutorial on this please.

I have defined my form in JavaFx Scene Builder - only a TableView with 3 Columns

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="288.0" prefWidth="293.0" xmlns:fx="http://javafx.com/fxml">
<children>
    <TableView fx:id="tableView" layoutX="35.0" layoutY="28.0" prefHeight="200.0" prefWidth="227.0">
    <columns>
        <TableColumn prefWidth="75.0" text="UserId" fx:id="UserId" />
        <TableColumn prefWidth="75.0" text="UserName" fx:id="UserName" />
        <TableColumn prefWidth="75.0" text="Active" fx:id="Active" />
    </columns>
    </TableView>
</children>
</AnchorPane>

I have my data in a ResultSet in my Java code.

ResultSet rs = c.createStatement().executeQuery(SQL);

I need to populate the TableView.

Thanks

Answer 1

To access to tableview you need to define a controller of your FXML page. Add

fx:controller="path.to.MyController"

attribute to the AnchorPane in FXML file. Then create the controller and link TableView, TableColumns from FXML file by putting @FXML annotation in front of these variables:

package path.to;

public class MyController implements Initializable {

    @FXML private TableView<User> tableView;
    @FXML private TableColumn<User, String> UserId;
    @FXML private TableColumn<User, String> UserName;
    @FXML private TableColumn<User, String> Active;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        UserId.setCellValueFactory(new PropertyValueFactory<User, String>("id"));
        UserName.setCellValueFactory(new PropertyValueFactory<User, String>("name"));
        Active.setCellValueFactory(new PropertyValueFactory<User, String>("active"));

        tableView.getItems().setAll(parseUserList());
    }
    private List<User> parseUserList(){
        // parse and construct User datamodel list by looping your ResultSet rs
        // and return the list   
    }
}

The tableview is populated in the initialize method. Note that in controller we are not creating new tableview or tablecolumns, since they are already created whlle the FXML file is being loaded. Also note that the TableView and Tablecolumn variable names must be the same with fx:id values in the corresponding FXML file. So while UserId, UserName and Active names are not convenient namings, change them both in FXML file and in Controller to names like userIdCol, userNameCol and userActiveCol respectively.

Answer 2

Yo can do this in your controller:

 @FXML
private TableView<User> table;
private List<User> users;

@Override
public void initialize(URL url, ResourceBundle rb) {
    // Set the columns width auto size
    table.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    table.getColumns().get(0).prefWidthProperty().bind(table.widthProperty().multiply(0.33));    // 33% for id column size
    table.getColumns().get(1).prefWidthProperty().bind(table.widthProperty().multiply(0.33));   // 33% for dt column size
    table.getColumns().get(2).prefWidthProperty().bind(table.widthProperty().multiply(0.33));    // 33% for cv column size
    table.getItems().setAll(this.users);
}