GUI Generation with JavaFX

Recently, we have had a look at JavaFX libraries for generating UIs in a dynamic way. The idea is that we have a data model (a JavaBean class, an EMF model class, a model class with JavaFX properties,…) as input for some GUI builder that takes the model and generates a matching user interface with bindings between the model and the JavaFX controls. In a perfect world, this library would allow us to use a variety of data models and to customise the generated user interface.

We have had three candidates (all open source). As we use EMF a lot, two of them are based on EMF models.

1. FXForm2

http://dooapp.github.io/FXForm2/

This pops up early when you are looking for UI generation libraries for JavaFX. As the name implies, it is meant for generating forms from model beans.

The main features include:

  • Automatic form generation and binding to bean properties
  • CSS support
  • Bean Validation handling (JSR 303)
  • Fields reordering and filtering
  • Tooltips
  • Localization

It takes three lines to add a generated form to your JavaFX scene graph:

MyBean myBean = new MyBean(); // get an instance of the bean to be edited
Node fxForm = new FXForm(myBean);  // create the FXForm node for your bean
root.getChildren.add(fxForm);  // add it to your scene graph

2. EMF Edit for JavaFX

http://tomsondev.bestsolution.at/2012/12/13/emf-edit-support-is-coming-to-javafx-via-efxclipse/

This library has a broader scope than FXForm2 as it can generate an entire RCP application with a sophisticated visual model editor rather than just a couple of form fields. Or you can define your own controls and easily bind your EMF model instances to these controls, including support for drag & drop and undo/redo commands. An example of a user interface based on a “Contacts” model can be seen in Tom’s video from the link above.

3. EMF Client Platform

http://eclipse.org/emfclient/index.html

This takes the idea of EMF Edit one step further. As the ECP website says:

The goal is to provide a one-click application based on a given EMF model. Besides the EMF model, no additional components have to be developed or generated.

So when you have your EMF model, you are only one click away from a complete client application with a model explorer, an editor, a persistence mechanism, and a couple of other nice things. The editor for the model attributes is similar to the data form generated by FXForm2, but it is embedded in an entire application whose pieces are customisable and extensible.

The bad news is that there is currently no JavaFX support for ECP.
[Update]
As Tom Schindl has pointed out in the comments section, there is a first version of JavaFX support for ECP in one of the development branches of the e(fx)clipse project. See here.

4. Summary

We have not found the perfect solution yet. FXForm2 has a promising approach for easily generating forms, of which we are going to have a lot in our final product. It requires some tweaks to make it work with EMF models but that is a small obstacle. What worries me a bit is the maturity of this library: the latest version is 0.2.2. So is it ready for production use? Well, there’s at least one real-world application that uses it.

EMF Edit is a very powerful framework but does not generate controls on the granularity we require for most parts of our application. It will certainly be of use for fancy features like drag & drop and the command stack. Maybe we can combine its strengths with the power of FXForm2 for generating really rich forms.

The EMF Client platform has a very appealing one-click approach but it lacks support for JavaFX. Once this limitation is gone, we may give it another look. A major question will then be how far we can customise the basic layout of the generated application which by default is very different from what we have in mind for our user interface.

About these ads

10 thoughts on “GUI Generation with JavaFX

  1. Thank you for mentioning FXForm2. Despite its “low” version number FXForm2 is production ready. (Actually, it started with 0.0.x, 0.1 was the first production version and 0.2 introduced some API improvements)
    But thank you for sharing your worries about that, we will update our versioning to 1.x.x in the next release, so that it appears clearer that it’s a production version.
    BTW, I’d be interested to get your feedback if you take the FXForm2 + EMF tweaking approach!

    • Thanks for your feedback, Antoine. It’s good to know that the current version number does not reflect the maturity of the project. Is there a roadmap for the next release?

      I’ll gladly share our experiences with FXForm2 and EMF once we have a nice solution.

    • Thanks you for this recommendation, Jeff. Java Inventor seems to be an IDE with some features but can I use it to generate forms programmatically (incl. custom styling) from my application code?

      • Yes, anything done in the form builder can be done with public API. You can also easily drop into the UI builder when the form is done and add a programmatic “FormOwner” class to easily add interactive features programatically.
        Currently there isn’t much in the way of documentation (Javi ships at the end of the year). Contact us if you have a significant need, however (we could use a benefactor or two :-).

  2. Although we have not demonstrated a clear path for developers, #Objectwheel is technology that should not be overlooked. There are a lot of videos on #Objectwheel and although our GUI is currently horrible, the technology is solid and very bleeding edge. We are using JDK8 build 102 at the current moment. Feel free to connect with me @abigdreamer on twitter. Templates created in #Objectwheel are shareable, loadable via JNLP, and have an embedded database. Some the the included components are fields, labels, buttons, hyperlinks, images, sliders, rectangles, youtube videos, music, facebook integration, twitter integration, email, browser, tab panes, voice record components, screen scraping & more.

  3. Pingback: Using FXForm2 with EMF Models | Uwe's Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s