SQL Zone is brought to you in partnership with:

Sergey has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

JavaFX and JDBC

02.25.2008
| 41684 views |
  • submit to reddit

This guide describes how to use the JavaFX technology in application development. Common questions such as how to create CRUD-oriented systems and using SQL are considered.

 

Task setting

To examine the capacities of JavaFX let us consider the toursDB database from the Sun JDK v1.6 delivery and create a GUI for it.

The toursDB database contains a tourist agency's information on flights to various world destinations and the number of booked seats.

Suppose that the user registers a flight for a specific date indicating the number of economy, business and first class seats. A typical scenario of user actions would be as follows:

  • look through a list of flights and find a required flight by its number or arrival/destination location

  • look through the registered dates and either open the required record or register a new one

  • look through information for the registered date and edit the number of seats or delete the date record altogether

We have three forms. They appear as folows:

Development Environment

In order to develop the application, you will need the free NetBeans IDE with the installed JavaFx plugin.

As a database engine this example uses Apache Derby.

To run the application JRE v1.6 should be installed on your computer. JDK is not required for running applications.

Project Creation

Create a NetBeans project using the standard procedure and specify its type as a JavaFX Application:

 

Add JavaFXUserLib and Derby to the project libraries:

 

The Derby libraries are delivered along with JDK v1.6 and are typically located in the

C:\Program Files\Java\jdk1.6.0\db\lib\ folder.

For simplicity this example uses the Derby library in embedded-mode, therefore it is enough to specify the derby.jar file in the project. For convenience, you may copy derby.jar to the project directory.

A file with a test database is located in the archive

C:\Program Files\Java\jdk1.6.0\db\demo\databases\toursdb.jar

To allow debugging within the NetBeans IDE, extract toursdb.jar to the project's root directory.

In Project Properties specify crudfx.MainFrame as the main class. This class will contain the main form of the application:

Using this configuration, you will be able to run the application directly from NetBeans.

Create a Java class called Starter and specify the following string in the main method

net.java.javafx.FXShell.main(new String[]{"crudfx/MainFrame"});

This string allows you to run the application as a Java module.

Create a new configuration for the main class:

When building the project with the second configuration, the dist folder with the application's jar file and all used libraries will be created .

Main Form of the Application

Using standard JavaFX facilities, create a form in the crudfx.MainFrame.fx file as follows:

The form contains search fields in the left-hand area and a table for results in the middle. For better visual perception, switch off the standard decoration of window borders.

Working with the Database

Remove the code that operates with the database into a separate Java-class crudfx.DataSource, bind the form's table with a model, and fill in the model by calling the static crudfx.DataSource.getFlightData(... method.

No additional resources are required in order to call Java code from JavaFX.

Operation with the database will be executed via JDBC by means of standard Java facilities.

Expanding Capacities

Some GUI components in JavaFX do not have sufficient means for adjustment. For example, in the main form the table headings and scroll bar are not adjustable.

To improve their appearance, use the crudfx.DataGrid class as a table. This class extends the Table JavaFX class. Override the createView operation:

operation DataGrid.createView():<<javax.swing.JComponent>> 
{
var jComponent=super.createView();
Tools.adjustTableHeader(jComponent);
return jComponent;
}

In the static adjustTableHeader(... method of the crudfx.Tools Java class, modify the scroll bar using standard Swing facilities:

The table headings will be adjusted in almost the same way.

Code Separation

Although components initialization in JavaFX generally requires just a few lines of code, it is often convenient to place the initialization code in a separate file. For example, let all buttons from the application example differ only by their icons and called actions:

For code reuse, create the crudfx.ImageButton JavaFX class and add an operation of button creation to this class.

operation ImageButton.createButton(click:operation(),normalImage:Image
,hoverImage:Image)

Adding a button looks as follows:

...
top: BorderPanel
{
right: (new ImageButton).createButton
(
operation()
{
exitFromApp();
}
,Image { url: "images/closeButton.png" }
,Image { url: "images/closeButtonHover.png" }
)
...

Date Chooser Form

When clicking on a line with a flight in the main form, open a window with flight dates:

The window will contain a list of dates and a button for registering a new date. The scroll bars of the list can be adjusted similar to those of the table in the main form.

Flight Booking Form

In the form for editing information on a booked flight, data will be entered in text fields:

Buttons will be displayed depending on whether this is a new record or an editable one:

...
left: (new ImageButton).createButton
(
operation()
{
if(dateModel.row==null)
{
if(DataSource.registerDate(dateModel.key,dateModel.flight_date
,dateModel.economy,dateModel.business,dateModel.firstclass))
{ me.close(); }
}
else
{
if(DataSource.updateDate(dateModel.key,dateModel.row.flight_date
,dateModel.flight_date,dateModel.economy
,dateModel.business,dateModel.firstclass))
{ me.close(); }
}
}
,Image { url: if dateModel.row == null then "images/insertButton.png"
else "images/updateButton.png" }
,Image { url: if dateModel.row == null then "images/insertButtonHover.png"
else "images/updateButtonHover.png" }
)
...

Error Messages

When working with data, place the code for displaying error messages directly in the methods of the DataSource class. For example, if you are entering a date in an invalid format, a standard Swing dialog will display the message "Can't register date" along with an exception text:

This message will be sufficient for the application.

Creating Executable File

The JavaFX code has to be compiled before running, hence it is necessary to display a splash while the application is being loaded. Starting from version 6 of the Java platform you can display a splash by specifying an image in the application's manifest file using the SplashScreen-Image parameter.

Choose some animal creature as a logo:

 

But since forms use an image of a dandelion, it is better to use something similar in a splash. For example see the following drawing:

 

In the NetBeans IDE select the earlier created configuration named «test», and build the project. The CRUDFx.jar file and a folder with the used libraries will be created in the distr folder. Copy the toursDB folder with the test database to the distr folder.

To run the application, click the CRUDFx.jar.

Source Code

crudfx.zip - 5Мb

This file contains the source code, the database and the compiled application.

Conclusion

Despite JavaFX technology's beta state, the capabilities used in this technology allow you to create runnable desktop applications.

The Silverlight and Flex projects, often referred to as JavaFX competitors, can only be used for recreational or multimedia content.

Comparison of JavaFX, Flex and Silverlight Architectures

What is JavaFX?

Java FX is a set of Java libraries which compiles JavaFX Script (formerly known as F3) code into Java code (and eventually bytecode).

The script language is optimized for describing GUI layouts. Since JavaFX is build on the JRE and allows you to easily call Java classes, any tasks that cannot be solved in JavaFX directly can be handled by Java code. JavaFX is convenient and powerful.

What is Flex?

Flex is a compiler which takes an MXML description of a GUI and compiles it into a .swf file that can be displayed in a browser or run separately using the Flash plugin. The resulting .swf file is similar to Flash objects that are often presented as advertisements on web pages. There is almost no access to the file system when using Flex.

What is Silverlight?

Silverlight is a Microsoft plugin available for most major browsers on Windows and Mac (no Unix support yet). You can access Silverlight's functions from JavaScript and build a form or drawing by writing an XAML description (an XML file). In Windows you can access system components from JavaScript via OLE. Support for direct acccess to the CLR (Microsoft's runtime for C#) is under development in Silverlight v2.

Conclusion: JavaFX has an advantage by having access to the mature Java platform. All three platforms are new and under active development.

5
Your rating: None Average: 5 (2 votes)
Published at DZone with permission of its author, Sergey Surikov.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Artur Biesiadowski replied on Mon, 2008/02/25 - 4:05pm

[quote]

Despite JavaFX technology's beta state, the capabilities used in this technology allow you to create runnable desktop applications.

The Silverlight and Flex projects, often referred to as JavaFX competitors, can only be used for recreational or multimedia content.

[/quote]

After reasonably nice looking article, you came out with conclusions not supported by anything you referred to earlier. Do you want to say that because in Silverlight/Flex you need 3 tier solution, while with JavaFX 2 tier is possible, Silverlight/Flex can be used only for "recreational or multimedia" content?

Silverlight/Flex are presentation tiers. JavaFX also tries to be one. It has to provide a good value at this level, not at skipping middle tier for transactions.

Sergey Surikov replied on Mon, 2008/02/25 - 5:33pm in response to: Artur Biesiadowski

May be.

Could you point any working database application like this one? Silverlight or Flex?

Silverlight Airlines demo http://delay.members.winisp.net/SilverlightAirlinesDemo/ do not work for me.

All Flex database examples found by me are too simple.

Karsten Silz replied on Mon, 2008/02/25 - 6:15pm

[quote]All three platforms are new and under active development.[/quote]

 

This is not true for Flex - Flex 1.0 was released nearly four years ago (March 2004 - http://en.wikipedia.org/wiki/Adobe_Flex#Release_history), so it is more mature than Silverlight and Java FX. Given that Java FX has not been released at all, one could argue it is the least mature of the three.

Guido Amabili replied on Tue, 2008/02/26 - 5:56am

Hi Sergey,

Many thankx for your articles on JavaFx.
I didn't yet have time to look at i, but you made a little application that shows how much JavaFx is to be taken seriously by the competitors.

We have in our team a guy who is trying to sell hard Flex as a Gui to some of our server application, but I really do not see any advantages.

It complicates even more the building of friendly UI for the average developper.

I recall the guy who implemented the prototype had problem storing the temporary data on the local filesystem (using air 3 beta, flex or whatever)

 

 

Mark Haniford replied on Wed, 2008/02/27 - 1:18am

Good article, but as Artur pointed out, the author came up with some bogus conclusions about Silverlight and Flex.

Sergey Surikov replied on Wed, 2008/02/27 - 2:18pm in response to: Mark Haniford

How long do you use Flex, Silverlight and JavaFX?

Karsten Silz replied on Wed, 2008/02/27 - 12:22pm in response to: Mark Haniford

The Java FX / Flex / Silverlight comparision at the end of this article is comparing apples and oranges. In this article, Java FX is used to build a desktop application with local database access, whereas both Flex and Silerlights run in the browser, with all the advantages and limitations that brings. So both Flex and Silverlight talk to server backend through web services, REST, sockets or other technologies, and the the server will typically be Java, .Net or PHP / Python / Ruby. That's why you can use Flex and Silverlight with Java - on the server.

Sergey Surikov replied on Wed, 2008/02/27 - 2:17pm in response to: Karsten Silz

Whath you talking about?

8)

Too many words 

 

Browser example coming soon.  

Karsten Silz replied on Wed, 2008/02/27 - 5:55pm in response to: Sergey Surikov

I'm saying check your facts when comparing frameworks - you compared desktop app against browser frameworks, got some facts wrong (Flex isn't new, Flex works fine with Java on the server) and didn't mention that Flex is at version 3.0, Silverlight at 1.0 and Java FX not even at 1.0 (I heard that JDK Update N will be out late summer / early fall, so that's more than half a year away).

Shahid Raza replied on Tue, 2008/12/23 - 7:26am

Hi Sergey,

 First of all, I would like to thank you for your CRUDFx application. It helped me a lot in uderstanding overall JafaFx. This is the first complete application I have seen build on javafx. I wonder how to retrieve tablecell value from your application in your Tools class where you apply rendering. I tried with tablecolumn by typecasting table.getColumnName(index) to TableColumn class, it returned me the screen value. However , I don't know what to do for tablecell.. I tried with so many class of but it alwasy gives unable to typecast UIContextImpl$XTableCell ... Any help Sergey :-(

 

Sergey Surikov replied on Tue, 2008/12/23 - 7:39am

This example too old. Wait for new examples.

Sergey Surikov replied on Wed, 2009/02/11 - 3:12pm

updated version for JavaFX v1.0

http://www.javafx.me/crudfx/examples/DerbyUI.zip

screenshot

http://www.javafx.me/crudfx/examples/screenshot/derby.jpg

Gaspare Di Giovanna replied on Sun, 2009/02/15 - 2:46pm

Hail Sergey, great work!

I'd like to see the source code of this application (the new version).

I'm starting study JavaFx in these days but I would like to put my hands directly on a source code of a full application like your one!

King regards

Gas

Sergey Surikov replied on Sun, 2009/02/22 - 7:38am in response to: Gaspare Di Giovanna

i will publish all sources of my JavaFX examples later

Sergey Surikov replied on Tue, 2009/03/03 - 10:16am

Another version with advanced graphics

http://jfxstudio.wordpress.com/2009/03/03/the-graphic-database-front-end/

 

Gaspare Di Giovanna replied on Thu, 2009/03/05 - 2:59pm in response to: Sergey Surikov

When will you release the sources? You say later... but we're impatient... please :D

Sergey Surikov replied on Tue, 2009/05/26 - 3:21am

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.