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.

Designing Interfaces with JavaFX

Good design makes you happy. I was happy when I first saw an iPod, and even happier when I first held it in my hand. Sometimes, you will not notice the positive effects good design has on you, but you will always notice the effects of bad design.

I’m a software developer, not a designer. I’ve known that ever since the late 90’s when I repeatedly failed at impressing my friends with my one-minute Flash intro for my two-paged personal website over at Geocities. Why haven’t I learnt my lesson and still deal with visual design today? Because I believe a good visual design is essential for any software that has a user interface. If you don’t believe me, read what Ben Northrop wrote about the Halo effect.

Designing a great user interface is hard, in particular when you’re more excited about your domain models and your test coverage of 101%. Unfortunately, even smart developers can write bad user interfaces, as Karsten Lentsch explains in this Jax session (in German). It takes a lot of time, training, and user research until you come up with a user interface that doesn’t suck and that is tailored to your user’s needs.

If you’re lucky, you have a thorough and well-organised process for that. If you’re even luckier, you work with a professional user interface designer who can do all those things for you. That’s also a great way to find a scapegoat in the end, by the way.
But even working with a designer doesn’t save you from analysing your information architecture and from organising your application content. There’s still a lot to do.

And this is what I’m currently doing. My job is to develop a user interface for a client-server business application offering a compelling user experience. Here’s what I have so far:

Oh wait! I have some fantastic tools, too. They are centred around JavaFX as we saw the potential of this platform pretty early in our project and it has not disappointed us since. JavaFX supports the design process by its separation into layout (FXML), logic (controller classes), and appearance (CSS) tools. All of these can be tied together nicely with our underlying Eclipse rich client platform thanks to Tom’s e(fx)clipse project.
There’s nothing like a good tool chain. Well, a good design maybe.

So I know JavaFX allows me to develop great user interfaces, but how do I actually do it? How do I put the pieces together? This is the main question I’m going to ask my designer and myself again and again over the course of the next weeks and months. We have a general layout for our application window, which is fairly common in other applications, I would say, but one of the first things to decide now will be the navigation. How can the user go forward and backward in our application? How does she know where she is? And how do we tell her what else there is?
Exploring these questions is going to be part of my next blog posts. Stay tuned.