JavaFX Composer Data Binding Tutorial - part 2
This tutorial shows how to use advanced properties of Data Sources in JavaFX Composer and how to bind them to your JavaFX UI.
Note: This tutorial continues from where the part 1 ended so if you have not finished the first part, you should read it before proceeding.
Adding more components
In the previous tuorial you created a simple view of the first 10 kenai.com projects which is nice but not that useful. Let's add three more components to the UI, namely two buttons and a progress indicator as shown below. Just drag and drop them from the palette and label them Previous and Next.
Kenai.com returns list of projects in pages of size 10. The Next button will fetch the next page and the Previous button will fetch the previous page. Buttons will be disabled when there are no more projects or when the first page is shown, respectively.
Customizing the Previous and Next buttons
You will customize Disable and Action properties of both Previous and Next buttons. Tutorial only covers the Previous button, just repeat following steps for both and replace "prev" with "next" as apporpriate.
Select the Previous button and open the property customizer for the Disable property, then click on the Bind button.
In the property customizer dialog select the "httpDataSource" and "Current Record String Field" as shown on the screenshot. Also make sure the Bind text box contains the text shown. What this does is that it binds the Disable property of the button to the result of the expression in the red box. Simply put, the data source contains a Record named "prev" which is either null or contains URL of the previous page of projects. You want to disable the button if there is no previous page. Click the Close button.
Now define action for the Previous button. Select the Previous button and in the Property sheet click on the pen icon next to the Action property. A popup menu appears, select the "Generate: Empty function" item.
Source editor opens as JavaFX Composer generates an empty function that will handle click events on the button. Type the following code into the function body:
Make sure you did customize both buttons before proceeding to the next section.
Binding Progress Indicator
Select the Progress indicator component and open the property customizer for its Visible property.
Click on the Bind button and in the customizer select "httpDataSource" in the Components list box and "fetchingData" in the following list box. Click on close.
Now the progress indicator will only be visible if tha data source is fetching data from the web service.
You can run the application now to test the functionality of navigation buttons and progress indicator.
Congratulations, you have finished the second part of REST services tutorial.