Eric Bruno is a contributing editor to Dr. Dobb's and can be contacted at eric@ericbruno.com.
In the article JavaFX Database Programming with Java DB I discussed ways integrate JavaFX with databases using JDBC, thanks to JavaFX-Java integration. One topic I didn't cover was JavaFX's built-in support for JDBC and various data formats through a set of Data Source components. This includes relational databases, files, the file system itself, and web-based data (XML, JSON, and so on). In this article, I examine how to use them to write very little data handling code. To do so, I use the JavaFX Composer tool (a NetBeans plug-in) to do the heavy lifting.
The JavaFX Composer
If you plan on doing a lot of JavaFX GUI work and don't know about the JavaFX Composer, prepare to get acquainted. Initially released as a beta component with JavaFX 1.2, it was only recently offically released along with JavaFX 1. You can download the NetBeans 6.9 / JavaFX 1.3 bundle from http://javafx.com if you haven't already. With the Composer, you can visually lay out components from the NetBeans palette that's located in a pane in the upper right of the screen (see Figure 1). Refer to JavaFX Database Programming with Java DB for more in-depth information on using the Composer plug-in.
All of the JavaFX layout containers, controls, shapes, effects, charts, data sources, and so on, are available in the palette to be dragged and dropped onto your application's Scene. To begin, drag a List View control onto the Scene, and place it on the left side. Next, drag a second List View control and place it to the right of the first one. Next, locate the JDBC Data Source component (listed under Data Sources in the Palette), and drag one onto the Scene as well. Once you do, a window titled Data Source Customizer will appear. This is where you fill in the JDBC source information.
The JavaFX JDBC Data Source
Let's fill in the information required by the JDBC Data Source. To do this, use the sample "programmer's library" database I presented in JavaFX Database Programming with Java DB). Follow the directions in that article to create a Java DB entry within the NetBeans Services tab, and then choose it as the Connection URL in this window when you hit the Browse button. Next, enter the user name and password for the database in the appropriate fields (use "dbuser" for both with the sample library database).
You need to specify a query for the data source. You can either type the query manually in the SQL Query field, or you can have the Composer help you generate it. To do that, click the Create button and select theBOOK table in the Tables list of the smaller Browse Tables window that appears (see Figure 2). Click OK to set the query, and the window will close. To test your SQL, click the Fetch Data button, and the Query Result list should fill with the results of your query.
Since we'll be adding a second JDBC data source later, rename this one to jdbcBooks. To do that, locate and select the component under the Data Sources entry in the NetBeans Navigator pane. Then, type the new name in the Identifier property within the Properties pane.
Next, you need to bind the list view's data to the results of the query. To do this, select the first list view control you added (the one on the left), then locate the Items property in the Properties pane. To the far right of the property, there is a small rectangle (see Figure 3). Click this rectangle and a window will open where you can set this property. I've highlighted both the property and the rectangle in Figure 3 to help you locate these.
Next, you need to bind the list view to the data from the JDBC data source, so click the Bind button at the top of the pop-up window for the Items property. In this window, you'll find three lists: in the Components list, select jdbcBooks; in the Property list, select All Records; and in the Converters list, select Record[] -> String[] (see Figure 4). Before you click the Close button, you need to make a slight modification to the bind statement. Simply change the text "name" in the call torecord.getString("name") to all uppercase; for example, record.getString("NAME").
Next, you want to populate the second list view with the list of library patrons from the database. To do this, add a second JDBC Data Source component and connect it to the same library database as the previous data source, but this time use select * from APP.PATRON for the SQL statement. Additionally, you should name this instance jdbcPatrons to avoid confusion. To bind the second list view's items to this data source, follow the same steps as you did above, with these exceptions:
- Select the second list view on the Scene.
- In the Bind pop-up window, choose jdbcPatrons in the Component list, All Records in the Property list, and Record[] -> String[] in the Converters list.
- At the end of the bind statement, replace record.getString("name") with "{record.getString("FIRSTNAME")} {record.getString("LASTNAME")}". Be sure to include the surrounding quotes as shown here.
You're almost ready to run the application. First, be sure everything compiles in case you missed a step or made a typo along the way. Next, since you're using a Java DB (Apache Derby) database, you need to include the client JAR file in your project. To do this, right-mouse click on the project in NetBeans and select Properties from the pop-up menu. Next, select Libraries in the list, and then click the Add JAR/Folder button on the right. Locate and select the derby.jar file, and click OK to close the Project Properties window. Finally, execute the application from within NetBeans so that if any errors or exceptions occur, you'll see them in the Output window. If all goes well, the result will be as in Figure 5.
Next, let's take a peek at what's behind all of the JavaFX magic you've explored so far.
