Features I would like to see in FXML

I really enjoy using FXML, it is robust, simple and well supported by the Scene Builder tool but there are some features I would really like to see.

Controllers allowed on arbitrary nodes

Large controls usually have many action methods, many controls injected with the @FXML annotation and typically other objects like DAOs which can get quite messy.  Sometimes handling code for a single control such as a combo box can get quite large, creating an FXML for a small control seems like overkill.

To tackle this, it would be useful to allow the fx:controller attribute on any FXML element specifying a node that is loaded into the scene graph.  This 'sub-controller' would have controls injected with @FXML annotations in the same way as root controller except that the it would not be able have it's parent controls injected.  Only the element it is declared on or that element's children could be injected.

Allow effects to be created in Scene Builder and then injected into a controller

It is much easier to create effects in Scene Builder than it is in Java code because I can get instant feedback and fine tune much easier.  It would be great if I could create an effect in FXML and have it injected into the controller using an @FXML annotation.

Support 'Actions'

One of the things that I miss from Swing is the javax.swing.Action interface.  This was used to encapsulate action logic of a button in a single class instead of having many action listeners in one class.  I could create a class implementing EventHandler and set it on the button in the controller class, but it would be nice to specify it under the code tab in the same as you would specify a method to handle an event.

Specify some validations on TextField controls

For Me, FXML is all about productivity so it makes sense that it could support common requirements such as validations on TextField controls.  For example, a TextField might only allow numeric input up to a maximum number.  If you google "javafx numeric textfield" there are already many varied implementations.  It would be great to see this in Scene Builder, even better if it could be tested in preview mode.

JUnit Rule for JavaFX Controller Testing

Testing JavaFX controllers is relatively easy although you do have to jump through a couple of hoops. Firstly, JavaFX must be initialised and secondly JavaFX controls must only be mutated on the JavaFX thread created internally during initialisation. The JUnit rule below will setup JavaFX once and run all tests on the FX thread. All you need to do is create it as a field in your test case class and annotate it with @org.junit.Rule. You will need to be running JUnit 4.9 to use the rule API.

Reusable FXML Controls with Guice

Update:
This code is now integrated into the fx-guice project where it will be maintained.  I am not intending to modify the GitHub gists so this post now only serves to document the code as seen here.

---

It is very simple to inject controllers into an FXML control using Guice but once the UI starts to get bigger it is likely that we will need to split it out into smaller files. I wanted to do this with a list builder control simple to that in SceneBuilder used to build a list of CSS classes.

In my UI the controller of the parent control (called parent controller from now on) would tell the list builder control what items it could add to the list and what items were already in the list using the list builder's controller (the child controller).  Getting this to work this is far from simple.  

It is not possible to get or set a controller on an arbitrary control node.  I fired up VisualVM to see where the list builder controller was referenced and the only incoming references were to the event handlers I had set up.  If there were no event handlers it looks like the controller would get garbage collected.  It was also not possible to set a Guice singleton scope on the controller as there may be several list builders in the user interface at the same time.

Here is a run down of my final solution although it is not altogether as simple as I would have liked it.  This tutorial is much more complex than my previous FXML/Guice post, I had to look up my own tutorial on Guice scopes to work it out.  Please let me know if anything is not clear

1. Add the Guice Module

Add the following Guice module to your Injector.  This example also assumes that you are using the same Injector to inject controllers when loading FXML, this is detailed on my previous Guice/FXML post.

The module uses the following Guice scope to track all injected controllers.

2. Use a scope annotation on the controller

Reusable controllers are annotated with the custom @FXMLLoadingScope.

3. Implement the IdentifiableController interface in the controller

Reusable controllers must implement the IdentifiableController interface which has one method, #getId().  #getId() must return a non-null String containing the ID of the parent of the root pane of the control.  If this ID is null then return the second parent-parent's ID.  Keep going until a non-null ID is found.

4. Set an ID on the parent

When importing one FXML file into a parent, set the container ID to the ID you want for the controller.

5. Retrieve the child controller

In our parent controller (the one that that will tell the list builder what to do) we need to retrieve the list builders controller to populate options and so on.  To do this, Inject an instance of ControllerLookup into the parent controller.
In the parent controller, make sure you implement the Initializable interface.  In the initialise method of the parent controller call ControllerLookup#lookup(String) on the instance you have injected to retrieve the child controller.  The ID that is passed in should be the ID that is returned by IdentifiableController#getId().  This could be hard coded but in this example it is using the FXML ID of the parent control, "factorsList" in this case.  This allows several list builders to be used in the same parent control.

I am using this in my own JavaFX project and although the implementation was not simple I have found it quite easy to use.

JavaFX CSS Styling

I've been working on a light grey look and feel for JavaFX with square corners, inspired by the Swing Substance (Business Grey) Look and Feel.  Here are the results so far:




And just as a reminder as to the default JavaFX look and feel:



This is a work in progress and not all of the controls are styled.  This skin has now become the first entrant in the jfxtras-styles project hosted on github or click here if you just want to grab source.

The extra space is to show the drop shadows on the titled panes which I use quite a lot in my own application.

Update:
Just to show the different a little CSS styling can do, below is a recent screenshot of EstiMate, the JavaFX project I have been working on.  It's come a long way!  You can take a look at the CSS here.

Creating JavaFX Controllers Using Guice

I really like Guice Dependency Injection so was pleased to hear that some work has been done to make this interact with JavaFX. The solution presented though, was less than ideal. It had some duplication of configuration where the class name of the controller needed to specified in the FXML as you would expect but also when loading it. After a brief fumble through FXMLLoader's methods I found #setControllerFactory. By passing this wafer thin adapter below as a parameter to #setControllerFactory, any controllers will be instantiated via Guice.

JScrollPane Repainting Problems

I was having some problems with the JScrollPane not repainting my custom component properly when scrolling.  The results were that the area that was now visible because of the scroll was painted unevenly and looked blurred.  This seems to happen when a component is doing some custom rendering inside a JScrollPane and using the clip to find out what area it should paint.  To fix this call the following methods on your JScrollPane:

scrollpane.getViewport().setScrollMode(JViewport.SIMPLE_SCROLL_MODE);

In the modern swing implementation there is some 'clever' caching of the content view to improve performance which seems to be the problem.  Setting SIMPLE_SCROLL_MODE will force the scroll pane to repaint it's entire contents while scrolling.  Although this is less performant, it at least shows the correct results with minimum fuss.

Safely Removing an Element While Iterating a List

If you want to remove an element while you're iterating a Java ArrayList then you have some problems.  First off, if you use an iterator then the list will most likely throw a ConcurrentModificationException.  If you use a classic style for loop then when you remove an element the list will no longer be the same size or have it's other elements at the same position as when you started iterating which might cause an error, logical or otherwise.

The simplest way to do this is to iterate backwards over the list.  This means when you remove an element, the other elements will not get reordered.  The method below demonstrates:

    public void iterateBackwards()
    {
        List list = new ArrayList(Arrays.asList(1,2,3,4,5));
       
        for (int i = list.size() - 1; i >= 0; --i)
        {
            System.out.println(list.remove(i));
        }
    }

This prints....

  5

  4

  3

  2

  1