Channels ▼

Eric Bruno

Dr. Dobb's Bloggers

Coding the JavaFX TableView

June 12, 2012

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:


public class TestJavaFX extends Application {
    public static void main(String[] args) {
        launch(args);
    }
    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!");
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        btn.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                System.out.println("Hello World!");
            }
        });
        
        StackPane root = new StackPane();
        root.getChildren().add(btn);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }
}

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:

MainScreen

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:


    @FXML
    TableView<InvoiceEntry> invoiceTbl;
    @FXML
    TableColumn itemIdCol;
    @FXML
    TableColumn itemNameCol;
    @FXML
    TableColumn itemQtyCol;
    @FXML
    TableColumn itemPriceCol;
    @FXML
    Button addItemBtn;

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).


import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;

public class InvoiceEntry {
    public SimpleIntegerProperty itemId = new SimpleIntegerProperty();
    public SimpleStringProperty itemName = new SimpleStringProperty("<Name>"); 
    public SimpleStringProperty price = new SimpleStringProperty();
    public SimpleIntegerProperty qty = new SimpleIntegerProperty();
    public int invoiceId;

    public Integer getItemId() {
        return itemId.get();
    }

    public String getItemName() {
        return itemName.get();
    }

    public String getPrice() {
        return price.get();
    }

    public Integer getQty() {
        return qty.get();
    }
}

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:


    public void onAddItem(ActionEvent event) {
    }

Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

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.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 


Video