Working With a RESTful WS Data Source In JavaFX Composer, part 2: Creating a Simple List of Data
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 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.
Using a Cell Factory and Desktop Form To Display More Data— 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.
Adding More Components — Adding Next and Previous buttons to scroll through the data, along with a progress indicator.
A complete sample of the application you develop in this tutorial is available from our Samples Catalog.
For the purposes of this tutorial, you need a JavaFX Desktop application with some UI components. In this section you design the application.
To design the application:
Choose File > New Project. The New Project wizard opens. Under Categories, select JavaFX.
Under Projects, select JavaFX Desktop Business Application or JavaFX Mobile Business Application and click Next.
The Name and Location page opens. Name the project RestfulDataSource. Select a location for the project. Accept the default options and click Finish.
The project is created and an empty design file opens in the Editor. Look for a Palette window and a Properties window on the right. If either window is missing, open it by going to Window > Palette (Ctrl+Shift+8) or Window > JavaFX Properties, respectively.
In the Palette window, expand the JavaFX Controls section and drag a List View into the design. Align it as you want.
Adding and Configuring the RESTful Data Source
In this section, you add a data source to the project and configure it in its customizer dialog.
To add and configure a data source:
Add the data source to the project. Do one of the following:
Go to the RestfulDataSource tree in the Navigator window. Right-click the Data Sources node and select Add > Data Source > HTTP Data Source.
Expand the Data Sources section in the Palette window. Drag and drop an HTTP Data Source into the project.
A dialog box opens informing you that necessary source files have been copied into your project. Click OK.
The Data Source Customizer dialog is open. Fill in the following fields:
URL: enter https://netbeans.org/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
Click the Fetch Data button. After the IDE fetches the data, a tree of data nodes appears. Expand the aRecord node.
Select the projects node and click Add.
The Child Data Source dialog opens. In this dialog, you can change the expressions of child data sources. Accept the default, projects, and click OK.
The projects data source appears in the Data Sources tab. Select this data source, and you can copy the value of any node.
Note that you can view the pre-parsed data in the Raw Data tab.
Click OK. The IDE adds the data source to the project.
The data source is visible in the Navigator view. You can reopen the Data Source customizer by double-clicking the data source node or by right-clicking the node and selecting Customize.
Selecting a data source in the Navigator window opens its properties in the Properties window.
Binding the UI Element to the Data Source
Now that you have a UI element and a data source in your project, you bind one to the other. In this case, you bind the List View to the RESTful data source so that the list view displays the database entries that are exposed by the RESTful web service. The Data Binding With JavaFX Composer tutorial explains data binding in more detail.
To bind the list view to the data source:
Select the List View in the Design window and locate the list view's Items property in the Properties window.
Click the Items property's Open Details button. The property's Details dialog opens.
Click the Bind button. The Binding dialog opens.
In the list boxes, select the following component, property, and converter:
Component:
httpDataSource[projects]
Property:
All Records
Converter:
Record[] -> String[]
The final appearance of the binding dialog is below. Make certain that "name" is the property of the record.getString method. This means that name is the record that is displayed in the list view.
Click Close. The binding and your application are 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, showing the list of the first ten projects at https://netbeans.org/api/projects.json.
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.
button. The property's Details dialog opens.
, if it is the main project.) Running the project automatically saves and compiles the project sources. The application opens, showing the list of the first ten projects at https://netbeans.org/api/projects.json.
