JavaFXComposerRESTBindingTutorialJa

(Difference between revisions)
Keiichio (Talk | contribs)
(Created page with '== 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 pro…')
Newer edit →

Revision as of 04:55, 18 December 2009

Contents

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.

File:javafxcomposer-tutorial-REST-s8.png

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

File:javafxcomposer-tutorial-REST-s1.png

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.

File:javafxcomposer-tutorial-REST-s9.png

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.

File:javafxcomposer-tutorial-REST-s7.png

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.

File:javafxcomposer-tutorial-REST-s10.png

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.

File:javafxcomposer-tutorial-REST-s6.png

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.

File:javafxcomposer-tutorial-REST-s11.png

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

File:javafxcomposer-tutorial-REST-s4.png

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.

File:javafxcomposer-tutorial-REST-s3.png

Click the Close button. Now run the application, you should see list of Kenai projects (the first 10) in a list box.

File:javafxcomposer-tutorial-REST-s2.png

Congratulations! You have learned basics of data binding in JavaFX Composer. You can now continue with part 2 of the REST data binding tutorial.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo