JavaFXComposerRESTBindingTutorial

1 JavaFX Composer Data Sources - REST Binding Tutorial

JavaFX Composer Data Sources - REST Binding Tutorial

Goal

This tutorial shows how to use JavaFX binding to get and display data from a REST (web service) data provider.

You will learn how to define REST data provider and how to bind data it produces to your JavaFX UI components. As an example, you will create a simple browser of projects hosted on kenai.com.

Preparation

Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template. A project should be created and an empty design file should be opened in an Editor area.

Add Components

Drag and drop the following components from "JavaFX Controls" category in Palette to the Design:

List View (listView) - will display list of projects

Move the components so that they are aligned nicely, see screenshot for an example. For the sake of image size the sample screenshot uses a mobile (240x320) screen.

Add And Configure REST Data Source

To work with a data source, you first need to add it to your design. To do that, drag an HTTP Data Source component from the Component Palette to the main Design pane just like you would drag and drop any other UI component.

Alternatively, you can add data sources by right-clicking on the Data Sources node in the Navigator.

If this is the first time you add a data source to your project, you will be notified that some necessary FX source files are added to your project. Just acknowledge the dialog.

Once a new data source is added to a project, a Data Source Customizer pops up. Here you will define the REST service URL, authentication credentials, if necessary, and also define some 'child' data source if you need to.

Let's examine those options one by one:

URL: enter "https://kenai.com/api/projects.json"
Method: leave set to GET, the default
Authentication: leave set to NONE, the default
Data Format: leave set to JSON, the default

Once the data source is properly configured, press the Fetch Data button. After a short while the results will be shown in the Data Source Records tree table as shown on the screenshot. You can freely browse and examine returned data.

In this tutorial, you will only display list of projects in a list view so you need to filter out returned data to only contain list of projects. To do that, select the "projects" node in the Data Source Records view and click the Add button.

Verify that the expression field contains "projects" expression and press OK. Notice that now there are two items in the Data Sources view, one for the master result and one for "projects" filtered result.

All is set up now, press OK.

Bind List View to Data Source

Select the List view in the Design pane and open the Items property customizer from the Properties pane.

Click Bind button in the customizer and bind list items as shown on the screenshot.

In the Components list box, select the "httpDataSource[projects]" entry, select "All Records" in the second listbox and pick "Record[] -> String[]" conversion type in the Converters list box. Finally, specify "name" as the project property to display in the list as highlighted on the screenshot.