JavaFX composer, dynamic layout and XScene

As I mentioned in a previous post, I was quite unsuccessful developing a resizable application with dynamic layout behavior using the beta release of the Netbeans composer. An Amy Fowler’s post about Growing, Shrinking and Filling reminded me that I should give another try - dynamic sizing behavior is a great thing.

Moreover, some interesting changes have been introduced in the RC1 version of Netbeans. Let’s see how to do this:

• Create a new design file. By default the design file creates a javafx.scene.Scene. Unfortunately, this scene does not dynamically resize it’s child nodes to it’s current size.  This is exactly what the org.jfxtras.scene.XScene does. However, in the beta version of Netbeans Composer it was not possible to replace the default Scene by the one provided by JFXtras. Netbeans RC1 has introduced a cool feature: the Class Name Property. This allows to customize the class used in the generated code for a given component. This is a very interesting feature, bringing flexibility without overloading the composer’s interface. This way you can customize any component handled by the composer (as long as it’s using the same properties). In our case, just set “org.jfxtras.scene.XScene” as class scene for the scene component.
• Next step is to add a layout manager to the scene. Let’s use the Grid container, which is now supported by the RC1 version of the Composer! You can then add components to the layout and manage the number of rows and columns of the Grid layout. Notice that a new property has been introduced in the layout properties of the components: “Grid Hor. Span”. This allows to control the spanning of a component over multiple columns. For example, in the attached screenshots, the bottom button is spanned over two columns. The left button switches it’s Vertical Fill property, automatically adapting it’s size to the new constraints.

You can now start building your application with dynamic sizing and layout using the JavaFX Composer - a big step forward!