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.

Source: https://github.com/dooApp/FXForm2/wiki/Style-your-form-with-css

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.

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

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.

Source: http://eclipse.org/emfclient/

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.