Trying Groovy's @Vetoable bindings in JavaFX Application #javafx-ja #JavaFX

Hello, these day's Advent Calendar rush is making me much confusion.

I'm mike_neck.

This post is written as 16th day's post in JavaFX Advent Calendar 2012.

This post is a translated version of my 13th day's post in JavaFX Advent Calendar 2012, titled

JavaFXでGroovyのVetoableが機能するか試してみた #javafx-ja

.

Yesterday we read @tarchan's great post titled

JavaFXで電子書籍リーダーを作ってみた

.

What's the Groovy Vetoable

Groovy's Vetoable is a one of AST transformations which is useful to GUI(thus means a Swing) developers.

When creating Swing UIs, you're often interested in monitoring the changes of value of certain UI elements. For this purpose, the usual approach is to use JavaBeans PropertyChangeListeners to be notified when the value of a class field changes. You then end up writing this very common boiler-plate code in your Java beans:

and then the result of the main method will be like as follows.





But with Groovy's @Vetoable annotation, we can add PropertyChangeListener much easily.

• Add @Vetoable annotation to properties which requires being scanned its change.
• Get instance.
• Add PropertyChangeListener as Closure.

and then result of this script will be like as follows.





(For more detail, please refer Bindable and Vetoable transformation)

Applying @Vetoable to JavaFX

I want to apply this @Vetoable's interesting feature to JavaFX UI.

So we are going to make a simple application with a text field and labels whose text is affected by inputs of the text field.

Features

There are a text field and two labels.

If we input "mike" into the text field

• the left label shows the contents of the text field (i.e. "mike").
• the right label shows message from "mike" (here "Hello mike").

Designing View and Controller

With Scene Builder we are going to design the view and controller for the application.

1. Add Controller to AnchorPane.

2. Add an event method to a onKeyReleased event of the text field.

3. Add fx:ids to the text field and the labels.

4. Save it as fxml file.

Reading fxml file and @FXML annotation

JavaFX injects some objects and events into some fields and methods annotated with @FXML annotation in a Controller class, when reading fxml file created with Scene Builder.





And the model class is here.

About Controller class

JavaFX executes the method initialize after reading fxml file.

In this sample, initialize methods create an instance of the Person class with @Vetoable annotation, and then gave its vetoableChange an Closure which changes message field of the instance after the name fields is changed.

The method named keyReleased, which is called after user releases his key, changes the name field. And it changes the text of two labels from the Person instance.

Execute it!

Here we run this application.

Too simple view.

Let's input Japanese character "みけ".

Labels are changed successfully as the contents of text field are input.

What is an advantage to use Groovy @Vetoable annotation?

It is much testable with Groovy's @Vetoable annotation than without it.

Please look at the initialize method shown before.

This method provides ...

• creates an instance of Person class
• gave vetoableChange

But become more simple.

These code should be in Person class.





Then the controller class becomes more simple.





We can test its behavior without starting any JavaFX application.

We were bothered by the Thread of JavaFX, when we had thought of testing application.

But making JavaFX application with Groovy takes us more simplistic way to test JavaFX Application.

Conclusion

Let's use Groovy into JavaFX application!

Tomorrow we will read @rewtheblow's post.