Netbeans JavaFX Composer: Designing a CustomNode

The JavaFX composer is a powerful tool to design interfaces but at first it’s not really obvious how to split a complex interface into several pieces and how to handle custom nodes. In this article I’ll present the approach that turned out to be the most efficient from my own experience after some months of work with this composer.

• Create a new desktop design file called Main.fx that contains the common design parts of your application.

• Now let’s say we have the following model object and its manager:

• Next step is to design the node responsible for rendering a Doo instance in the interface. Select New File > JavaFX Fragment Design File to create a DooNode.fx design file. This will create a design fragment that you can edit visually with the JavaFX composer. Let’s switch to the “Source” view and add a field to this class that will contain the Doo instance edited/rendered in our node.

• We can now design this node and bind it to the rendered object.

• Now the question is how to use this design file in the main interface? The composer generates a method called getDesignRootNodes() that gives you access to the parent nodes of the design file. Using this method to handle this node is not really handy since it’s not defined in any interface and it won’t be easy to switch from a renderer to another one. JavaFX define the concept of custom node through the CustomNode class. Why not using this class as parent class for our design file? Switch back to the source view and let DooNode extends CustomNode. Now just define the postinit method and insert the root nodes into the children of the custom node. Your class should look like this now:

• Our DesignNode class is now a classical CustomNode and can be manipulated in a transparent way in the main design file. Let’s insert a flow layout into the Main design class and bind it’s content to a sequence of DooNode associated to the doo’s defined in the manager:

And that’s it! If you run the application you should see something like this:

This approach provides a handy way to split the interface into several small pieces in a transparent way and to take advantage of the composer features.

Note: the Netbeans project is available in the CustomNodeDesign file attached to this post