Channels ▼

Eric Bruno

Dr. Dobb's Bloggers

Coding the JavaFX TableView

June 12, 2012

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:


    public class InvoiceTable extends Application implements Initializable {
        //...
    }

With this interface, you need to implement the initialize() method, which the JavaFX runtime will call for you when the window is first displayed:


    @Override
    public void initialize(URL url, ResourceBundle rb) {
        //...
    }

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:


        data = FXCollections.observableArrayList(); // create the data
        invoiceTbl.setItems(data); // assign the data to the table

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:


    private void generateInvoiceEntry() {
        // Add to the data any time, and the table will be updated
        InvoiceEntry entry = new InvoiceEntry();
        itemNum++;
        entry.itemId.set(itemNum);
        entry.itemName.set("Item " + itemNum);
        entry.price.set("" + (1.99 + itemNum) );
        entry.qty.set(itemNum + 10);
        data.add(entry);
    }

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.

Happy Coding!
—EJB

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