In Depth Tutorials and Information

Making Your JavaFX Groovy (JavaFX Languages and Markup) Part 2

GroovyFX Binding

Binding in JavaFX is an extremely powerful feature, but the API-based syntax in JavaFX 2.0 can often get in the way of understanding what the bind code is doing. GroovyFX solves this problem by taking advantage of the operator overloading feature of the Groovy language to provide an infix notation for common bind expressions.

For example, to bind one rectangle’s width to the width of a second rectangle, you can write the following code in GroovyFX.

There is also an alternate version of the same code that you can use instead:

However, the real power of GroovyFX binding comes into play when you are combining multiple properties in a bind statement. As a second example, let’s say that you want to bind one rectangle’s width to the sum of two others. In GroovyFX you can write the following code.

This would translate to the following, much longer, JavaFX Java code.

The GroovyFX distribution comes with an example of some binding code to animate the hands of an analog clock. This example was written by Jim Clark, and the relevant code showing properties and binding is shown in Listing 10-9.

Listing 10-9. Analog Clock Excerpt from the GroovyFX Demo Package

The combination of automatic properties expansion via AST transforms and infix notation binding lets you express fairly complex logic without much code. The resulting Groovy Analog clock graphic UI that you get when running the example is shown in Figure 10-7.

Figure 10-7. Groovy analog clock demo

GroovyFX API Enhancements

In addition to the core language benefits of using Groovy instead of JavaFX, GroovyFX has taken many of the JavaFX APIs and Groovy-ized them to make them easier to use from a dynamic language. We cover three major ones in this section: the GroovyFX custom DSL for animation, a simplified table construction pattern, and streamlined JavaFX layouts. All of these provide significant benefits over the core JavaFX APIs, allowing you to write less code and do more.

Animation

GroovyFX supports building animations using a special DSL that has syntax for creating Durations, KeyFrames, and KeyValues, all with a concise syntax. We showed an example of the Groovy animation syntax earlier in the Vanishing Circles application, which looked like this:

The basic pattern is as follows, where you can have multiple at expressions in a timeline and multiple change expressions within an at.

Similar to binding, there is also a second format for referring to the property that makes up the change expression:

And the syntax also supports an optional tween that lets you provide a curve for the speed at which the animation proceeds:

With the above change, the animation would start out slow and speed up to its normal rate, and then slow down at the end the same way.

Compared to the full Java code, the Groovy animation syntax is a huge savings in characters and makes it much easier to see what your animation is actually doing.

Tables

Between the extra syntactic sugar for builders or imperative Java, and the need to specify Generic at multiple levels, building simple data tables in Java code can be quite a lot of code. Groovy simplifies this with a fairly intuitive builder format for creating tables, along with some conveniences, such as a built-in type converter that lets you specify a closure to change the output type for a field.

As a result, you can write fairly complex tables with very little code. The following example builds from the Person class that we created earlier to display a list of people in a tabular format. The full code is shown in Listing 10-10.

Listing 10-10. Code Demonstrating a Table in Groovy with Strings, ints, and Dates

Notice that the code to display the table is almost as short as the code to set up the data. The converter in the last column to format the Date is a one-line operation in Groovy, but requires a CellValueFactory with an implementation of a Callback interface, which is several lines of Java code saved.

Figure 10-8 displays the result of running this table application in Groovy.

Figure 10-8. Groovy Table demo with famous women in computers listed

Layouts

Another set of APIs that are relatively challenging to use in a declarative fashion are the JavaFX layouts. They have a powerful constraint system that you can use to give Nodes special layout behavior on a per-layout basis, but this also means that adding a Node to a layout involves two steps: (1) adding it to the container and (2) assigning constraints.

The GroovyFX APIs solve the layout problem with a very clean solution that involves annotating the node object with additional pseudo-properties for layout constraints. This allows you to define the constraints as you construct the scene graph, and then during the layout phase, the JavaFX layout system uses the constraints to control how the Nodes are positioned and sized.

Listing 10-11 shows an example of one of the more complicated layouts, GridPaneLayout, with the entire application written in a declarative style.

Listing 10-11. Example Code of a GridPane Layout in GroovyFX

Notice that the code is succinct, clean, and closely models the UI that it is trying to build. The result of running this application looks exactly like what you would expect from a typical UI form, as shown in Figure 10-9.