Working With a RESTful WS Data Source In JavaFX Composer, part 4: Adding More Components

In this tutorial, you define a RESTful data provider and bind data it produces to your JavaFX UI components. In this part of the tutorial, you add Next and Previous buttons. These buttons let the user scroll through all the records in the record set. You also add a progress indicator.

Lessons In This Tutorial

This tutorial is divided into four parts:

1. Overview
2. Creating a Simple List of Data — Create a very simple application that displays one column of data from a RESTful data source. Data are converted to Strings in the List View binding.
3. Using a Cell Factory and Desktop Form — Redo the binding and add a cell factory, so the data are converted to Strings at the list cell level. Add a Desktop Form template and bind it to the List View, to display additional data when a user selects a cell.
4. This lesson, Adding More Components.

A complete sample of the application you develop in this tutorial is available from our Samples Catalog.

Contents

• Adding the Components
• Binding the Index Buttons
• Binding the Progress Indicator
• Running the Project

Adding the Components

At the end of Using a Cell Factory and Desktop Form, you had a List View that showed the first ten projects at http://netbeans.org/api/projects. You also had a Desktop Form that showed the display name and web URL for a project when the user selected a project in the list view. However, the user could still only see the first ten projects. In this section, you add Previous and Next buttons so the user can see all the projects. Because Previous and Next buttons are so frequently used in user interfaces, JavaFX Composer provides a preconfigured Index Buttons template that you can drag and drop into your application.

To add more components:

1. In the Palette, find the Templates section. Drag an Index Buttons template from the Palette into the Scene, lined up below the Desktop Form.
   
2. The Index Buttons template customizer opens. Accept the default values and click OK. (Unfortunately, the code that is automatically generated when you select an Indexed Component is not useful in this case.)
3. In the Palette, find the Controls section. Drag a Progress Indicator from the palette into the Scene, next to or below the index buttons.

All the extra UI components are now in place. Next, you bind them.

Binding the Index Buttons

The application now has Previous and Next buttons. You need to bind the Next button so that when the user clicks it, the next ten nodes appear in the List View. When the last nodes appear, the Next button should be disabled. Conversely, you need to bind the Previous button so that when the user clicks it, the previous ten nodes appear in the List View. When the first ten nodes are displayed in the List View, the Previous button should be disabled.

The master data source contains the nodes prev and next. The value of these nodes is the URL of the previous or next page of the data, respectively. For example, the following image is from the first record. The value of next is https://netbeans.org/api/projects.json?page=2 and the value of prev is null, because the record is on the first page.

In this section you bind the index buttons to the prev and next nodes.

To bind the index buttons:

1. Select the Previous button in the Navigator window or the Design view. The button's properties open in the Properties window.
2. Find the button's Disable property. Click the property's Open Details button.
   
3. The Details dialog opens. Click the Bind button. The binding view opens.
4. Select the httpdataSource component and the Current Record String Field property.
   
5. Replace <field-name> with prev and append ==null to the end of the field.
   
6. Click Close. The Disable property binding is complete.
7. In the Properties window, find the Action property. Click the Generate button (the pencil). A drop-down menu opens. Select Generate: Empty function.
   
8. The IDE changes to the Source view, with the cursor in the body of the indexPreviousButtonAction method. Fill out the method with this code:

   function indexPreviousButtonAction (): Void {
       httpdataSource.url = httpdataSource.getRecordSet().currentString("prev")
   }

9. Repeat this procedure for the Next button, but refer to the next node instead of the prev node.

The Index Buttons are now bound.

Binding the Progress Indicator

In this section, you bind the Visible property of the Progress Indicator to the data source. The result is that the indicator is only visible when the application is fetching data.

To bind the Progress Indicator:

1. Select the Progress Indicator in the Navigator window or the Design view. The Progress Indicator's properties open in the Properties window.
2. In the Properties window, locate the Progress Indicator's Visible property. Click the Open Details button for the Visible property.
   
3. The Details dialog opens for the Visible property. Click Bind. The Binding view opens.
4. Select the httpdataSource component and the fetchingData property.
   
5. Click Close. The binding is complete.

Running the Project

 

Run the RestfulDataSource project. (F6 or Run Main Project icon , if it is the main project.) Running the project automatically saves and compiles the project sources. The application opens, at first showing an empty List View, the desktop form with empty values, disabled Index Buttons and the Progress Indicator. Then the first ten projects appear, and the progress indicator disappears.

Click Next. The Progress Indicator appears briefly, and then the next ten projects appear in the list view. The Previous button is enabled.

The application is now complete. For more tutorials and excercises, please see the Java and JavaFX GUI Application Learning Trail and the JavaFX Composer wiki.

To send comments and suggestions, get support, and keep informed on the latest developments on the NetBeans IDE JavaFX development features, join the mailing list.