Enterprise JavaFX: Our Experience Building a JavaFX UI for a Seam Booking Application

JavaFX is new tool set for developing and delivering Rich Internet Applications or RIAs. JavaFX 1.0 was released in December 2008, and JavaFX 1.2 was released in June 2009. As these new releases have rolled out, the JavaFX community has been growing fast. This growth has produced a large selection of resources, articles, blog posts, books, and extension projects. This article, authored by Anton Polyakov, Senior Developer at Exadel, describes our experience building a JavaFX front end for a Seam booking application. 

Over this time, while JavaFX has been used extensively to provide “richness” in applications, it has been mostly “missing in action” for enterprise-level Web applications that would involve greater integration of JavaFX with the server side of the application. Remember, a Rich Internet Application is delivered from a server to the the client, but, more importantly, it continues to communicate with the server. The UI runs on the client while the application logic runs on the server.

We believe that for JavaFX to continue growing and compete against Flex and Silverlight, it should be acceptable by the enterprise for use in applications that take full advantage of both sides of Rich Internet Applications (Rich Enterprise Applications). Adobe and its community has done an excellent job demonstrating that Flex can be used to build real-world enterprise applications. The same needs to happen for JavaFX.

Exadel's Experience with JavaFX

Exadel has been working with JavaFX for more than a year now. In June of 2008, we took the popular Jboss Seam hotel booking Web application and built a JavaFX UI on it as a replacement for the standard JSF UI. Back then, we used a prerelease version of JavaFX. (There was very little interest in JavaFX at that time.)

Fast forward to today. We took the same Seam booking application and updated the JavaFX UI to JavaFX 1.2. You can find the demo running here. For your local use, you can also download the file to run or a Maven project to build this application.

Redoing the Booking Application

What we are going to do in the rest of this article is share our experience building this demo as an example of building an enterprise JavaFX applications. The task wasn't easy (but then it wouldn't have been as fun).

The Existing Application

As mentioned before, we took the popular Seam booking demo application as the starting point. (This demo provides a prebuilt back-end part very similar to what would exist in the type of enterprise-level application that many companies build today.) Seam,  is a lightweight framework whose goal is to make Java EE development simpler, unifying JSF with EJB3, JPA, and Hibernate. The original example application comes with a JSF/RichFaces-based user interface.

In the hotel booking demo, a user can register and then log in to search and book hotel reservations. A user can also edit existing hotel reservations as well as his or her profile. Everything is saved into a database. In many ways, it's a typical straightforward CRUD-like application.

Changing the Client Side

Any enterprise Web application consists of two parts: a client side and a server side. In this example, the server side is unchanged. We simply took the existing Seam application. Because the Seam back end is implemented using components, we could create a different UI without touching the server side.

For the client side, we wanted JavaFX which requires a different approach compared to using JSF. With JSF-based applications, the UI (JSF) and the logic (Seam) are both running on the server. Seam is set up well for a JSF-based UI (and offers integration). The server simply renders HTML to the browser and then listens to new requests. With JavaFX, things are different. Although the logic (Seam) is still running on the server, the JavaFX UI is running entirely on the client. Seam is not automatically aware of JavaFX (or Flex, for that matter). How then can the client and the server best communicate with each other?

Adding the Server/Client Communication

Although JavaFX offers basic XML and REST for data exchange between client and server, it's far from sufficient for communicating with Seam components on the server. Of course, you could write your own communication framework to solve this problem; however, we doubt you would want to do that.

Luckily, we can use the [Exadel Flamingo RIA framework, http://exadel.com/web/portal/flamingo] that solves this problem and saves a lot of time. Flamingo is a tool for easily integrating rich UIs (so far, JavaFX and Flex) into Seam and Spring back ends. Flamingo offers features like these:

• Transparent calling of Seam components
• Component binding
• Hibernate validation
• Seam conversation supported

All you need is one line of code (besides adding the Flamingo libraries).

ServiceFactory.setUrl("{FX.getProperty("javafx.application.codebase")}seam/resource/hessian");

• ServiceFactory is a factory for getting Seam components.
• setUrl sets the URL to the server.

Then, to get an instance of a Seam component on the client, use this: 

ServiceFactory.getService(Identity.class, "org.jboss.seam.security.identity");

• org.jboss.seam.security.identity is a Seam component name.

or

ServiceFactory.getService(UserManager.class, "userManager");

• userManger is a Seam component name.

For example:

@Name(“userManager”)
public class UserManager {
  ...
}

One issue we encountered as we worked on this is major language changes between the prerelease version of JavaFX and the 1.x version of JavaFX. These included keyword changes, package changes, and more. Thankfully, this would not be an issue for anyone out there now. People will just start at JavaFX 1.2. 

Setting Up Login Form in JavaFX Side

We started with the simple JavaFX form shown below to enter user name and password. JavaFX provides a declarative language to build the UI. Don't be intimidated by the syntax. Once you start using it, you will understand that it's very easy to learn and use.

import javafx.stage.Stage;
import javafx.scene.control.Label;
import javafx.scene.control.TextBox;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.geometry.VPos;

Stage {
   scene: Scene {
   width: 200,
   height: 200,
   content: [
      VBox {
         vpos: VPos.CENTER
         spacing: 10
         content: [
            Label {
                text: "Username: "
            },
            TextBox {
                text: ""
            }
         ]
      }
   ]
  }
}

We have the form, so so far so good.

Adding UI Model

Next, we will need a small class to act as model for the UI:

public class User {
   public var username: String;
   public var password: String;
}

Adding TextBox Control

After this, we add a TextBox control and connect it to the data model. This binding is one of the key features in JavaFX. It allows the synchronization of data between the model and the UI.

...
Label {
   text: "Username: "
},
TextBox {
    text: bind user.username
},
Label {
    text: "Password: "
}
TextBox {
     text: bind user.password
},
...

Some Missing Items from JavaFX

When we were going to add a field for the password, we ran into an issue you probably would not expect. Surprisingly, there actually is no password control in JavaFX 1.2. However, the JavaFX community solved this problem by providing some custom controls.

We encountered some other issues as well. At this time, JavaFX is still missing some powerful layout controls of the type where resizing the parent element resizes all the elements it contains. Major missing items are table and combo box. Furthermore, we couldn't change the style of a hyperlink.

A Performance Issue with Binding in JavaFX

Now, let's talk about binding. JavaFX allows connecting variables through “binding”. When one variable changes, the other one will be updated automatically. For example:

var a = “say hello”;
var b = bind a;
a = “say goodbye”

b will now be equal to “say goodbye” as well.

Although binding is a very powerful feature, it can slow down application performance. For example, when we used a sequence (similar to an array in Java) with binding and modified the sequence content, we would quickly start getting OutOfMemory errors. It appears that on every change, a completely new sequence would be created, probably causing the memory issues. Just imagine how many objects are created if the sequence is being recreated all the time.

Conclusion

So, what's verdict? After working with JavaFX for over 3 weeks, we definitely believe it has a future, we just have to wait until version 1.5 or 2.0 to be able to use it for real enterprise development. Key controls are missing, existing controls come with minor bugs, and of course the performance issue has to be addressed. In some places we had to assign variables explicitly to a null value in order to increase performance. (Just doing that, we could notice performance improvement with the naked eye.)

Another issue is the Java plug-in in which JavaFX applications run. If you remember, the old applets had been plagued with numerous issues. Although the new Java plug-in drastically improves downloading and performance of JavaFX applications on a client, the whole process is still not as simple and transparent as it should be. Users still run into issues (as described here under comments, for example). For JavaFX to become successful, the download of an application should be as easy and transparent as Adobe has done with its Flash player.

Of course there are many positive things as well. The application can be easily launched as a stand-alone application, inside a browser as an applet, and via Java Web Start. Furthermore, the application looks and works the same in any browser as it runs inside a Java plug-in (virtual machine). You don't deal with HTML and JavaScript compatibility issues anymore. Although JavaFX is a new scripting language, it is still based on Java which enables it to use any new or existing Java classes.

All we need to do is to wait for the majore next release of JavaFX. In addition, based on Oracle hints as during JavaOne for example, JavaFX has a promising future. After all, it's rare that a technology becomes popular and widely adopted just after a 1.0 or even a 1.2 release. We are definitely looking forward to the next version of JavaFX, which we predict will truly be ready for the enterprise.

Exadel JavaFX Studio - plug-in for Eclipse

Besides Flamingo, Exadel also offers a free JavaFX Studio plug-in for Eclipse. The plug-in provides various tools for building and deploying JavaFX applications. The plug-in works with Eclipse 3.4.2 and 3.5. To try it, download it here.

About the Author

Anton Polyakov is a Senior Developer in Exadel. He has been developing enterprise Java applications with JSF, RichFaces, JavaFX, Flex, Seam and Spring. Anton developed JavaFX and Flex user interfaces for Seam Booking application mentioned in this article found here.