Eric Bruno

Dr. Dobb's Bloggers

Coding the JavaFX TableView

June 12, 2012

Here's a sample test app, with step-by-step explanations, that serve as a roadmap to building your own table-based JavaFX applications.

Step 4: Wire Up the Controls

Next, go back to Scene Builder and wire up the button, TableView, and each TableRow component to each FXML declaration in the code with the matching name. Do this within the Properties section in Scene Builder. Save the file, and get ready to complete the table sample.

Step 5: Initialize the TableView

We're almost done. All we need to do is add code to initialize the table, and then wire up the button on the window to use binding to add items. First, make your application main class implement the javafx.fxml.Initializable interface, as shown here:

Next, you need to set up the table's columns by telling each column which part of the InvoiceEntry class it maps to. The name in quotes must match a field in the class, which must have the appropriately named getter method (i.e. "itemId" must have a getItemId() method):

// Set up the invoice table
itemIdCol.setCellValueFactory(
new PropertyValueFactory<InvoiceEntry,Integer>("itemId")
);
itemNameCol.setCellValueFactory(
new PropertyValueFactory<InvoiceEntry,String>("itemName")
);
itemQtyCol.setCellValueFactory(
new PropertyValueFactory<InvoiceEntry,Integer>("qty")
);
itemPriceCol.setCellValueFactory(
new PropertyValueFactory<InvoiceEntry,String>("price")
);

Note that columns that display Strings must map to a class field of type javafx.beans.property.SimpleStringProperty, Integers must map to javafx.beans.property.SimpleIntegerProperty, and so on. This sets up the relationship between the table column and the data, and allows binding to work.

Next, adding data to the table is done with two lines of code; the first to create an ObservableList (again, for binding), and the next to assign it to the table as its data:

Whenever a new InvoiceEntry is added to this ObservableList, from anywhere in the application, the TableView control will automatically be updated via JavaFX binding. To implement this, add the generateInvoiceEntry() method, as shown here:

Step 6: Add Entries to the TableView

The generateInvoiceEntry() method generates a new InvoiceEntry object with incrementing values, and adds it to the ObservableList, data. You can call this method in the onAddItem() method, which itself gets called when you click on the "Add Item" button:

public void onAddItem(ActionEvent event) {
// Add to the data any time, and the table will be updated
generateInvoiceEntry();
}

All Done! Go ahead and run the application, and click the "Add Item" button repeatedly to see how binding updates the table for you. In the end, not much code is needed to get a bunch of functionality with JavaFX 2.0.

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task.
However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Video

This month's Dr. Dobb's Journal

This month,
Dr. Dobb's Journal is devoted to mobile programming. We introduce you to Apple's new Swift programming language, discuss the perils of being the third-most-popular mobile platform, revisit SQLite on Android
, and much more!