FXML: Why It Rocks, And The Next Phase

JavaFX 2.0 shipped with a declarative XML-based language for defining user interfaces, called FXML. FXML is a key part of our strategy around making it easier to create user interfaces in Java. Certainly having a markup language has been attractive to web developers since it is a familiar and comfortable way to approach describing a user interface. But there are other key strategic reasons why FXML is important, how it fits into the broader JavaFX ecosystem, and how it helps you write testable user interfaces with minimal fuss. In essence, FXML helps you follow best practices while also making your life easier.

Quick Introduction

FXML is an XML-based language for describing UIs. This has become quite commonplace in the industry. Swing had several variants which did just this (including JDNC). Flex came with MXML and .NET and Silverlight came with XAML. And then of course the web has always had a non-XML based HTML markup and XML-based XHTML markup, as well as SVG and many other variants. So we’re not exactly treading new ground here, which is one of the great advantages to FXML. Whereas JavaFX 1.X forced everybody to learn a new language and new tools, with JavaFX 2.0 we explicitly decided to return to familiar languages and familiar tools.

FXML doesn’t have a schema. It does have some basic predefined structure, but what you can express in FXML and how it applies to constructing object graphs depends on the API of the objects you are trying to construct. It isn’t only for constructing UI graphs, you can also construct Services or Tasks or domain objects or whatnot. Heck, you can even use JavaScript or other scripting languages in FXML. However, from a Model-View-Controller perspective, FXML works best when simply representing the view in some declarative manner and you let your Java code (or other JVM language) handle the model and controller parts of the pattern.

Tools

FXML is a key part of our tooling strategy. One of the major drawbacks to Java RAD tools has been that they create (and sometimes) parse arbitrary Java code and then try to represent this in the GUI editor view. This proved to be so difficult, that nearly every Java RAD tool instead opted for a tool-specific XML file to describe the UI, and then do one-way code generation. The problem with this approach is that the only tool-independent representation of the UI is in Java code, so when you use one GUI builder you are essentially locked into using it, or having to write custom converters to convert from one tool to another. Needless to say, in a large team where people want to use different IDEs this puts up significant barriers to RAD tool adoption.

With JavaFX 2.0 and the introduction of FXML, we’re defining a standard interchange format which can be used by every RAD tool. Even better, it isn’t just a tooling format, but is also easy to read / write by hand. We’re working hard with our Scene Builder tool to make sure it produces clean FXML — the kind you would have done by hand had you decided to do so. This strategy is of course not new, both MXML and XAML are used in the same manner.

Because FXML doesn’t have a schema of its own, we anticipate IDEs will add specific FXML editor support such that you will get code completion and so forth when editing FXML by hand. As for myself, I hope to always use a RAD tool 😉

Design Patterns

The terminology used with FXML is that of MVC. The idea being that the View is the FXML file itself, and should only really have a description of the user interface. The Controller is some Java class (optionally implementing Initializable) which is then declared in the FXML file as the controller for that FXML file. The Model is just some domain objects you have, probably defined on the Java side, that you then need to wire up to the view via the controller. It would look something like this:

In this example, the FXML document contains a TextField and Label. When the “enter” key is pressed while the TextField has focus, it will invoke the “submit” method on the controller. The controller, meanwhile, is going to update the label whenever the text is submitted.

One thing that is kind of awkward though is that all my binding is being done in Java code. The Controller facilities interaction between the View and Model, and therefore in the initialize method of the controller, you specify how to wire things up. The problem with this is that the RAD tools shouldn’t be generating Java code (or we’re back to the same troubles as with previous Java RAD tools), but should only use the FXML document. So that means your RAD tool won’t be able to do any binding for you.

I could turn things around a little bit and move the binding into the FXML document. This would allow tools to handle data binding in addition to layout. Note that the following code does not work today because bidirectional bindings are not supported in FXML, but we are working on fixing that.

Here the FXML document defines a local “Model” variable, to which it binds. The Model is nothing more than a class which then has a “Person” object on it, though it could have other state. In the Controller I then get the Model defined in the FXML document and give it the Person object it should operate on. The benefit here is that the controller no longer has any references to the GUI elements defined in the FXML document. This means it would be much easier for tooling support (no modification of the Java code). There is also an elegance to the fact that the State exists independently of the View, and the View just binds to the State.

As I mentioned above, this code does not work today because we don’t have bidirectional binding support in the FXML language, although that is high on the priority list since it would enable patterns like this to exist.

Unfortunately this fully MVC pattern is more verbose than necessary, because there are actually two different models. We have the “Person” object which is actually the domain data model, and then we have the “Model” class which is acting as a carrier — it is the way we declare in the FXML that some domain data will be declared in this “Model” so we can bind to it, but it isn’t actually adding value in and of itself. That is, it is an accidental creation in order to make the system happy, not some essential element in your application. Lets get rid of this boilerplate. Beside MVC there is another great pattern known as the Presentation Model.

The Presentation Model is another Smalltalk pattern for describing how to build a UI. From effective engineers I know who have used it in practice, the Presentation Model has significant advantages such as making testing easier. You really ought to go read a bit about it. The essence is very simple: there is a presentation (view), and a presentation model (view model). There is also a data model, it is true, but that becomes exposed to the view via the presentation model. In our terminology, the presentation is the FXML document, and the presentation model is an associated controller.

With this pattern, all the binding logic lives in the FXML document, while all the model data lives in the presentation model. One of the wonderful side effects of this pattern is that I no longer need to have @FXML annotated fields representing the different UI elements, or even have any @FXML annotated fields at all. This simplifies the Controller code, but also makes it easier to maintain because if I add new elements or remove elements or change the ids of the elements or whatnot, I don’t have to change the code. And remember that the RAD tool want’s to touch as little code as possible, so removing this tight coupling between sources and FXML is a big plus. In addition, everything is just easier to understand. And the Controller now takes on a significantly simpler and more powerful role.

As you can see, this is almost exactly like the previous version except now the model state is in the Sample PresentationModel/Controller rather than in the Model class or FXML document, and the FXML document no longer defines its own model variables, but just binds straight through the controller. This example is a proposal, it won’t work today. We are thinking about adding support for this in an upcoming update release. In particular, in addition to needing to add FXML language support for bidirectional binding, we also need to add support for an implicit “controller” variable.

The real power of the PresentationModel is that it gives you, the Java developer, the ability to do all the custom things you typically need to do in real world applications. Perhaps the data model comes to use as a single phone number and you need to split it into area code, high numbers, low numbers (555-223-2333 for example) for your UI. In this case, you write some code in the PresentationModel which does this, presenting three simple and straightforward properties that your UI will bidirectionally bind to. Or perhaps you are presenting a form, and you want people to enter items in the form and auto-validate the entire form together, but you don’t want to update the domain objects until the user “submits” the form. In such a case, you can take the domain object and have properties in the PresentationModel represent each individual field, essentially buffering changes from being put back into the domain object until the submit method is called. For example:

(I used a public final property instead of getters and setters because, I’m lazy ;-). Since this part of the post is about futures, I figured, what the heck).

There are other ways this could be further simplified, if there were binding containers and auto-buffering properties and the like. But the key point here is that the Presentation Model pattern lets you do all this application specific manipulation of state in Java code, by the developer, while the designer is free to modify what the UI looks like or what fields are exposed via the FXML.

This much more interesting because the Presentation Model is also fully testable. You can easily write unit tests for the Presentation Model, to test that buffering is working as expected, validation is working as expected, loading of domain objects works as expected, and so forth. And all this done irrespective of what the actual UI looks like!

Now of course, we want to make all this tool-able. So in a RAD tool you can load up the controller (presentation model) for an FXML document and then bind things directly in the tool. It will introspect and find all the properties exposed on the PM and offer these as bind targets and make this all nice and easy. Those are my thoughts on it. What are yours?

36 Comments

mchiareli
on October 14, 2011 at 3:47 pm

The markup language seems to be cool, very hard to think in UI using ‘pure code.’

The ability to execute scripts in the xml it’s nice, but can let people to do ‘bad things.’

Possibilities have been submitted. But all is not supported. And along with other essential features (such as masks and formats, dialog boxes) are scheduled for release Lombard (2013 is a long time).
The javafx2.0 is spectacular, very easy to apply effects, simpler than the swing (and I love swing). But without these basic features, I can only use it in design small = (

@Tom, great work on e(fx)clipse BTW, been watching that for some time :-). We actually talked about this use case. One of the problems is that FXML can be split among multiple files and include each other, so although we saw an easy and obvious way to inject the primary controller, it wasn’t so obvious as to how to inject the secondary controllers. I’d love to solve the problem though.

Thanks Richard – Well I’m not sure what the problem is and maybe I solved the problem not correctly what I suggest is that you allow users of the API pass a delegate instead of doing the classloading and instance creation your own.

This would make it possible to use whatever DI-Framework you want to (Guice, Spring, Eclipse DI) and OSGi when it comes to classloading.

My Eclipse-DI-Container BTW takes care of those sub-fxml files and their sub-controllers which is quite easy there because Eclipse DI itself supports hierarchical structures and so nested FXML and Eclipse DI are a natural fit

In our case we are searching a remote Lucene/Solr index and then loading the returned results as POJO map objects that populate a local space made up of areas we call contexts. The Solr documents represent different configuration sets which in the contexts become a big cache of properties for different types of objects (contexts) in the app to lookup (or bind to) and utilize. Also, these cache contexts can have their contents reset and update at anytime dynamically.

Utilizing the loaded/activated cache properties from the app is done in two primary ways:

1 – either via binding in an FXML file when there will be a designated UI widget that will simply update to reflect the state of the cache context it is bound to (the DataFX project comes to mind)

2 – or via renderer objects that receive pure data from a separate model (the datagraph) then look to their specific context of activated properties for instructions on how to render the data. The instructions include font and style properties. The renderer objects can produce immediate mode Java2D or else retained mode JavaFX scenegraph nodes.

In the first case FXML will likely suffice but I’m not sure if FXML is suitable for creating the graph of renderer objects and making the binding between the renderers and their dynamically changable properties in the cashe work?

I like where FXML this is going in terms of the PM design pattern and I am most interested to learn how my cache of contextual properties can best work with it moving forward.

No problem, I think that our friend zonski has made things clear as glass in his posts. What I need in my situation is for the FXML variable to be resettable / changeable to different models. The models is what I already have in the cache contexts described above. The inbound Solr documents expand into model graphs (or just maps in some cases).

Then as these graphs change as a result of a users choices an FXML UI context/graph could be reconfigured to use the newly activated models in the separate cache context I describe above. This would then be very flexibly coupled so that the FXML can become more versatile and useful.

You could have one FXML file this way instead of umteen hardwired and dedicated ones. An analogy to HTML/CSS might be this: the FXML could be like the HTML and my cache context models like the CSS. This way we have a FXML structure that is way more robust and useful.

I also agree with zonski that allowing for changeable controllers as well as models would be excellent.

I tried to post this comment yesterday but it seems to have disappeared into the ether – I hope it doesn’t come through twice.

There are some very cool features being listed here. FXML is very powerful already and its future is bright in my opinion. I have a suggested improvement that relates back to your proposed features – one I think allows the developer to do all of the design options listed above in a powerful, intuitive and flexible way.

I would like to see an FXML file be able to declare variables that it needs to be passed. Something like:

This would allow the developer to pass in one model, many models or whatever they like to the FXML. So long as the passed in object meets the specified type (which I would encourage to be defined as interfaces, but this is up to the developer) then the FXML file will be happy.

We could optionally provide some way to specify what happens if the variable is not passed in (i.e. either fail with error, create the object or just ignore and keep it as null). Something like:

And then used as per your nice expression language notation in your post:

This keeps the RAD tools happy as the type of the objects are defined so they can do introspection, etc. But it also gives the developer much more control over their design – they can choose to use a model, or multiple models, or the controller, or their domain beans, or whatever – FXML is not dictating the design anymore.

I would really (really!) love to see this idea extended to the controllers as well. Currently there is a far too intimate relationship between the FXML and the controller. The view (FXML) explicitly defines the implementation of the controller it will use. This really limits our architectural options and does not lead to clean design on our end. Why not allow the user to pass in any number of arbitrary ‘controllers’ as named variables that can then be used in the FXML?

Then attach these to events:

Much more flexible – and the really great thing about all this is the controller is not instantiated by the FXML. I can load my controller from anywhere (a Spring or JNDI context for example) and pass it into the FXML. If I want to have a controller manage three different FXML views I can pass the same instance into all three. If I want to use the same FXML file but with two different controller implementations, I can call the load twice but with different vars.

Even better, for testing I can create a mock controller which implements my controller interface and pass this into the FXML. I can test my GUI in different error states and with different amounts and types of data in it! (Going overboard but you could even have a little scripting engine in your RAD tool that allowed you to dummy up an implementation of the variables so you could test it with data from within the RAD tool!).

Another small plus in this is that we could completely do away with the need for the @FXML annotation.

For fx:includes we could pass the variables to the sub-xml. Something like:

<!– 'model' is the var defined in the sub FXML, person defined in the calling FXML

And why not take it the distance, we could also use this same variable approach for resources/internationalisation. If we pass in a variable of type ResourceBundle then the FXMLLoader would just know to call getString() to resolve it.

This gives us the same nice syntax all the way through (no need for # %) and also allows the developer to do more powerful stuff with their resources. For example, I can just change the type of the resources to a bean with Observable properties for each resource and now I can dynamically change the language of my running app!

I personally think this would add a lot of power and flexibility to the FXML space. I’m interested to hear peoples’ thoughts.

One thing that I noticed though; the example with the model binding looks remarkably close to idiomatic JSF/Facelets.

Even the first example where the controller gets references to the widgets could be JSF/Facelets (via the binding attribute of UIComponents, a ‘backing bean’ can receive UIComponent references in JSF).

The main difference seems to be that in JSF, the backing bean (controller here) is referenced via a simple name that is looked-up in some scope, while here the fully qualified class name is used.

Given this already apparent similarity, perhaps it would be an idea to look at JSF and Facelets (if you haven’t already ;))?

Definitely, our goal with the FXML binding syntax is to support full Unified Expression Language from JSF/JSP. It is somewhat different in that we don’t have the request/response lifecycle, so the semantics / definitions for the different expression types is worded differently, but it is essentially the same thing. I’d love to allow pluggable resolvers and everything, right out of the spec. It will need some modification though, so probably pluggable resolvers will be something that happens a little farther down the road.

>Definitely, our goal with the FXML binding syntax is to support full Unified Expression Language from JSF/JSP

Richard, this is extremely good news! I guess this will also nicely align with the ongoing effort of separating the EL from its JSP roots into a separate spec useable by other APIs (see http://jcp.org/en/jsr/detail?id=341)

Among others this will also ease the job for tools I guess, as the existing investments in EL processing (validation, auto-completion, etc) can be re-used then.

As for binding to a model, will it be possible to optionally bind directly to a POJO domain model without the need of something like SimpleObjectProperty?

Just have a controller return a Person, and then define bi-directional bindings to person.name etc. With such a binding, the controller can not directly push changes to the view, but that might not always be a requirement. The widget can still pull in data and push changes to the model.

I’m not exactly sure what you mean by ‘pluggable resolvers’, but I suspect your talking about the job the BeanAdapter is doing, and, if so, I would really like to see this. I recognize that sophistication in a component of a language (FXML) that is deliberately not-sophisticated (markup) is miles of rope to hang myself with, but I still think it would be a great thing to see. The thing that drove me to this comment is an annoying modification I’ve had to make to our controller classes because I need to have our fxml look something like where reason and problem are simply string fields on the controller. Without sophisticated resolvers I’m left calling setters from java, and I hate java that calls setters. Its like using a sledgehammer to put in finishing nails.

Is there the possibility to access the objects created from the FXML file from java code directly?
I am STUCK and cant find anywhere:
i made the UI in JFX 2 Scene Builder but i cant access the node instances as i could if hand coded directly in java…so now i cant dynamically expand my UI..nor access entered data…and root.lookup(#) just works in a limited way it wont access deep down in the hierarchy.

IS IT POSIBLE TO ACCESS THE OBJECTS/NODES MADE IN FXML directly from the aplication that loaded the file?
if it is..how to access those objects so that they can interact with the other java dinamic parts of the UI?
THANKS Really its important and i just cant find info about it.

Stumbled across this post while researching another problem. I would like to bind onAction attributes to controller objects – rather than using the controller method. (The objects will also be used for binding of disabled, image other attributes – not just for handling the invoked action).
More details of the above are at http://nigel-eke.com/fxml-onaction-binding/. Any updates / info appreciated.
(and thanks Richard for the very interesting initial posting)

I wrote a framework for page changing for javafx, basically, just assigning unique ids to each controller created, manipulating the ui tree to do things like changing a subpage, changing a page that is displaying, back and forward by maintaining history, all using unique id compose of class name and seq number. I looked at the framework suggested in zen java blog, it looks stupid to me as it always need to find the parent controller of sub pages when changing page, any idea?

I’m am (or at least was) a Flex enthusiast and a fan of the MVP (or more specifically the MVPC) pattern for user interface development. In Flex we implemented this in much the same way as described in the proposed solution in the article. We used the application framework parsley which made implementing the pattern really simple and loosely coupled.

I wondered if and when the described solution will be realized in javaFX / FXML. We are currently looking for an alternative technology (after the blow of Flex being dumped by Adobe..) to create our future enterprise user interfaces and are currently looking at javaFX as one of the possibilities.

Hello,
what from this article is true today. Today we have JavaFx 2.2. Is it good idea implement this architecture in version 2.2 or exists better way? In other words is it bidirection binding in .fxml file the best pattern to follow.

How is FXML supposed to work when you have dynamic attributes that cannot be specified in markup using FXML? For example, what if I have a complex, dynamic widget that I need to display a variable number of inside a FlowPane. There is no expression language in FXML like with JSP. There is no ${model.getComplexItem} type of mechanism. Also, there are many controls and things that can’t seem to be specified in FXML (look at almost anything in ControlsFX). I don’t understand how FXML is viable unless you have a purely static type of layout with no dynamics. Are you supposed to “finish” the view in the Controller code? Because that seems like it breaks separation of concerns. Even then, because it is so tightly coupled with the Controller/Presenter requiring @FXML annotated elements in order to interact with, it fundamentally breaks separation of concerns and the other MV* patterns. I just don’t understand how this can be a viable approach to a enterprise application yet.