Max Katz heads Developer Relations for Appery.io, a cloud-based mobile app platform. He loves trying out new and cool REST APIs in mobile apps. Max is the author of two books “Practical RichFaces” (Apress 2008, 2011), and is a frequent speaker at developer conferences. You can find out what Max is up to on his blog: mkblog.exadel.com and Twitter: @maxkatz. Max is a DZone MVB and is not an employee of DZone and has posted 74 posts at DZone. You can read more from them at their website. View Full User Profile

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

08.26.2009
| 21008 views |
  • submit to reddit

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.

 
Published at DZone with permission of Max Katz, author and DZone MVB.

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

Comments

Ben Geyer replied on Wed, 2009/08/26 - 10:00am

I appreciate you sharing your experiences, both pros and cons. Just in using your demo, I agree with your analysis on the java plugin. Make it easier. Another issue I have with java client stuff in general compared to Adobe and Microsoft is fonts. Surely there's a way to improve that out of the box. Again, thanks for the article.

Otengi Miloskov replied on Wed, 2009/08/26 - 11:39am

JavaFX have a future?!, Do you belive in Santa?. JavaFX its a failed project from the start but Nice writing by the way.

Gregory Smith replied on Wed, 2009/08/26 - 12:44pm

For Rich Internet Applications in Java, the best way to go is neither JavaFX nor Flex - both of which are proprietary and neither of which are really Java. The answer is Apache Pivot - a simple, efficient, FOSS, and pure-Java solution.

Jing Ge replied on Thu, 2009/08/27 - 2:49am

nice work!

FYI: the applet lets my firefox crash...... I'm using 3.0.13.

dobby aaaa replied on Thu, 2009/08/27 - 4:21am

I really don't see the point of building a flex/javafx app, it replicates exactly what we already can do in browsers to day.  As an added bonus we get longer load time (the hole app loads instead of one page), sloppy performance (javafx) and if we are really lucky it crashes the browser.

Sun/Oracle should invest in html5 and tools around that instead of trying to reengineer the web. It seems obvious to me that this technology will never take of, every year believers will say wait until version x of javafx.

 

Kevin Daly replied on Thu, 2009/08/27 - 7:33am in response to: dobby aaaa

I have to agree that html5 is the way to go for RIA applications. I was orignally a strong supporter of FX, but working with GWT and SmartGWT has changed my mind in a big way. Browsers are increasingly becoming a more capable client platform, and all this effort wasted on something the browser vendors have essentially "nailed", seems to be a waste of resources.

Max Katz replied on Thu, 2009/08/27 - 6:13pm in response to: Kevin Daly

HTML5 is definitely one of the future RIA tools, but it is still years away before the specification is final and all browsers support it.

Armin Ehrenreich replied on Sat, 2009/08/29 - 4:57am in response to: Max Katz

... and in the meantime JavaFX will be mature, widely deployed and commonly used? Do you really believe in miracles? Sun should have teamed up with Google and enhance GWT if they wanted to have RIA. Its a pity of all these wasted resources on the JavaFX Project. I only hope things will be usable from Swing one day and that a good and easy to use application framework for Swing will be bundled with the JDK. Java Web Start and rich cross platform applications is the "ecological niche" to fill. This can't be done by HTML.

Liu Huasong replied on Mon, 2009/08/31 - 6:44am

I write a true PasswordBox, you may like it:
http://code.google.com/p/jfxtras/source/detail?r=299

bob areyoukiddingme replied on Fri, 2009/09/04 - 12:34pm

what in gods name is it with java people? i love java, but i hate the people who use it. absolutely everything, even very simple tasks, have to become rocket science to you people. you'll do 700 lines of xml "configuration" to avoid a little java code. yay for xml configuration! all the complexity of programming, but with terrible syntax, stealth dependencies, and no compile time syntax or semantic checking! hooray! so you have to do javafx because flex was "not invented here." you have to do jboss cache because memcached was "not invented here." you'll use 2 dozen third party libraries and put up with the learning curve, version dependencies, and stealth bugs all to avoid one afternoon of programming something yourself. has java become the language where software engineering goes to die?

Comment viewing options

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