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.

At first glance, using the JavaFX 2 TableView control may seem confusing. But after you have the first "Aha!" moment with it, you'll see just how easy it is to use. Thanks to JavaFX binding and the new JavaFX Scene Builder, it's all cake. 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 1: Create the Project

If you have the latest Java SE 1.7 installed (Update 4), then you have JavaFX by default — it's bundled with it. Otherwise, you can download and install it separately here. Remember, you can develop JavaFX 2.0 applications with either Java SE 1.6 or 1.7.

After JavaFX is installed, create a new JavaFX project. This is very easy with the latest NetBeans, but you can use any IDE you'd like. For now, I'll assume you're using NetBeans.

Next, give the project a name, and NetBeans generates everything you need to begin. As a result, you'll get a small application with a main class that looks like this:

Step 2: Define the UI Layout

Before we modify any code, however, we'll need to define the UI layout. It's easiest to do this with the JavaFX Scene Builder, which I've written about in a previous Dr. Dobb's blog. Open Scene Builder and add a TableView control to the canvas. Drag four TableColumn controls onto the table, and assign them the text names: "ID", "Item Name", "Qty", and "Price", respectively. Finally, add a button control below the table, and name it "Add Item". We'll use this button to add items to the table for illustration. It should look like this:

Save your Scene Builder work, saving the resulting FXML file in the same directory as your application's source code. Next, in the Document section on the right side of the Scene Builder window, make sure you choose your project's main class as the controller. It's important that these steps be performed in that order.

Step 3: Add the Controls to the Code

Go back to NetBeans, and prepare to make some simple modifications to the code. First, add the following FXML control declarations to the main class:

Since InvoiceEntry isn't defined yet, this code won't compile. Create this class now as defined below, and then fix the imports so the code will compile (in NetBeans, right-click on the code and choose "Fix Imports" from the menu).

Note: It's very important that this class contains getter methods for the data items that map to columns in the table. This is how JavaFX performs its magic and reduces the code you need to write. It calls the getters automatically, as long as they conform to the normal JavaBeans naming patterns for class data.

Finally, add an empty onAddItem() method to map to the button, as shown here:

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!