Monday, June 13, 2011

JavaFX 2.0: Using the WebView Component in a Swing Client

Oracle has released a beta version of the new JavaFX 2.0 which is taking a new direction compared with previous versions. JavaFX script is gone and the intent moving forward is to have a Java library roughtly on the same level as Swing. Although this is a clear conceptual break from the Swing interface with the introduction of the scene graph, it is much more familiar to anyone coding Java. In addition, the ability to mix JavaFX and Swing inside the same application offers a very compelling migration path where you can port pieces of your existing application as opportunities arise instead of an all or nothing approach. So it is definitely worth looking into JavaFX for your UI needs. I am still doubtful as to how much it will spread as a RIA platform, it seems to me that HTML5 makes a much more logical choice now. However, I would say that this definitely offers some interesting options for desktop applications, i.e. as a replacement for Swing in the long run.

I have just played around a bit with the beta SDK with a focus on the Swing interaction. I've made a small application based on the samples and tutorials that come with the JDK and this was overall very easy to work with. I focused on the WebView component which is a very interesting web component for java. It boasts support for javascript and HTML5, so it has the essentials covered. In addition and contrary to most other web components out there, it is a lightweight component. This means in essence that it actually mixes nicely with the other components in Swing and JavaFX. The heavyweight components out there will not respect glasspanes and layers in the swing application which can be problematic if you depend on this.

To test out how well the integration works, I decided to use the famed JLayeredPane from Swing to integrate with. This is one of the components that usually proves to be the most challenging to use and integrate with. I've put together some simple code that shows a WebView in a layered pane with a JLabel. The JLabel is on top of the WebView and is transparent, it seems to blend in very nicely. In the example I also played around with injecting some javascript into the web page, in this case to change the background color. I also tried to see if the current API supports call backs from the javascript to the java code, but I didn't manage to find a clean way of doing this. A hack I came up with was to use the prompt method from javascript which can be intercepted in the java code, this does not feel clean at all. If anyone has a good of doing this, please leave a note in the comments.

Below is the code that I wrote. You can run it after you've installed the JavaFX 2.0 Beta on your system. I ran it from the IntelliJ IDEA IDE and had the JavaFX libraries in my classpath.

Edit (30/07/2011): Since the release of JavaFX 2.0 Beta build 36 the sample was broken as the Application.launch method is now a blocking method. I modified it so that the frame initialization now occurs in the start method of the Application class. Also there seems to be a problem running with jdk7 in that the WebView does not get rendered, so run this with the latest version of java 6.