Working With a RESTful WS Data Source In JavaFX Composer, part 3: Using a Cell Factory and Desktop Form
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 redo the binding, add a cell factory, and design a Desktop Form to show additional information.
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.
This lesson, Using a Cell Factory and Desktop Form.
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.
At the end of Creating a Simple List of Data, you had a complete application. This application used the simplest way to bind a List View to data, where data conversion is part of the binding. In this section, you remove this binding and replace it with a binding that does not convert the data.
To redo the binding:
Select the application's List View. In the Properties window, click the Open Details icon for the Items property.
The Details dialog opens for the Items property, with the binding view displayed. Click the Unbind button.
The dialog changes to the values view. Click the Bind button.
The dialog changes to the binding view, but with no binding selected. Select the httpDataSource["projects"] component and the All Records property, as you did before. But do not select a converter. Click Close.
The List View is bound again, but with no converter. In the next section, you add a cell factory that converts the data to strings for each cell.
Adding a Cell Factory
In this section, you add a cell factory to the List View. The cell factory converts the record data to strings for each cell.
To create the cell factory:
Select the application's List View. In the Properties window, find the Cell Factory property for the List View. Click the green plus sign. The IDE adds a cell factory.
The cell factory's label property automatically opens in the Properties window. Find the Text property and click the Open Details button.
The Binding view of the Details dialog opens for the Text property. The binding field value "{listCell.item}" is set by default. Delete that value. Create a new binding with the listCell component, item property, and (as Record).getString() converter. Click Close when you are done.
The cell factory is bound.
Designing a Desktop Form
In this section, you make use of the new binding setup to display more data from the source. The data is displayed in a desktop form.
To design a desktop form:
Go to the Navigator window and find the data source. Right-click the data source's node and select Customize from the context menu.
The Data Source customizer opens. Click Fetch Data. Explore the data nodes of the projects and write down the names of any nodes you find interesting. In this tutorial, the display_name and web_url nodes are used.
Cancel the data source customizer and go back to the application's design view. Move the List View to the left side of the Scene. From the Palette's Templates section, drag and drop a Desktop Form next to the List View.
The Desktop Form customizer opens. From the Data Source drop-down list, select List View. For each data node you want to display, click Add and type the name of the data node in the Field cell. The IDE automatically generates a display title based on the node name. Add the display_name and web_url nodes. Accept all other default values. The completed customizer looks like this:
Click OK. The desktop form customizer closes. The desktop form appears in the scene, next to the List View.
Go to the Navigator window. Expand the scene node, and you find the form's HBox and the two VBoxes it contains, for titles and values. Select a label in the Navigator, and the label is selected in the scene and the label's properties are displayed in the Properties window.
If you want to change the text of a title label, it is safer to do so in the Properties window than in the Desktop Form customizer.
The application is now complete and ready to run.
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, and the desktop form with empty values.
Select a project in the list. The project's display name and web URL appear in the desktop form.
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.
, 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, and the desktop form with empty values.
