Griffon: i18n FXML content on the fly

Saw earlier on twitter a post by Thomas Bolz (@TeaBeeOh) pertaining a particular issue he's currently facing: updating i18n content defined on an FXML file without restarting. Sadly for him the short answer is that it can't be done with what FXML and the JavaFX 2.0 APIs provide out of the box, that is, setting a ResourceBundle and changing the application's Locale as a minimum.

This task ought to be simple with Griffon, and as it turns out it is . The first step is to create a sample application using the JavaFX archetype
griffon create-app simple --archetype=javafx
Next fire up SceneBuilder and create a simple layout with one label and 2 buttons. Each component should have their id property set. Here's the FXML file I came up with
<?xml version="1.0" encoding="UTF-8"?> <?import java.lang.*?> <?import java.util.*?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <?import javafx.scene.paint.*?> <AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="83.0" prefWidth="269.0" xmlns:fx="http://javafx.com/fxml"> <children> <VBox layoutX="14.0" layoutY="14.0" prefHeight="56.0" prefWidth="248.0"> <children> <Label fx:id="msgLabel" minHeight="13.999908447265625" prefHeight="34.0" prefWidth="248.0" /> <HBox minHeight="20.0" prefHeight="20.0" prefWidth="248.0"> <children> <Button fx:id="enButton" mnemonicParsing="false" prefWidth="128.0" text="English" /> <Button fx:id="esButton" mnemonicParsing="false" prefWidth="120.0" text="Spanish" /> </children> </HBox> </children> </VBox> </children> </AnchorPane>
Name it simple.fxml and place it under griffon-app/resources. Next open up griffon-app/views/simple/SimpleView.groovy and tweak the code so that it looks like the following snippet
package simple application(title: 'Simple', sizeToScene: true, centerOnScreen: true) { scene(fill: WHITE) { fxml(app.getResourceAsURL('simple.fxml').text) { msgLabel.textProperty().bind(model.messageProperty()) enButton.onAction(controller.english) esButton.onAction(controller.spanish) } } }
The fxml node has been configured to read the FXML file. Make a special note of the children nodes used within fxml, these are the controls created in SceneBuilder! Here we are setting up a property binding to the Model and adding a pair of EventHandlers, one to each button. What's going to happen next is setting up the Model (griffon-app/models/simple/SimpleModel.groovy)
package simple import groovyx.javafx.beans.FXBindable import java.beans.PropertyChangeListener class SimpleModel { @FXBindable String message void mvcGroupInit(Map args) { app.addPropertyChangeListener('locale', { updateMsgLabel() } as PropertyChangeListener) updateMsgLabel() } private void updateMsgLabel() { execInsideUIAsync { message = app.getMessage('label.message', app.locale) } } }
And the Controller (griffon-app/controllers/simple/SimpleController.groovy)
package simple import griffon.transform.Threading class SimpleController { def model @Threading(Threading.Policy.SKIP) def english = { app.localeAsString = 'en' } @Threading(Threading.Policy.SKIP) def spanish = { app.localeAsString = 'es' } }
Great. All that's left to do is write the i18n resource files, one for English and another for Spanish. We'll need a file named messages.properties and another named messages_es.properties, both located inside griffon-app/i18n.
// messages.properties label.message = Hello JavaFX World! // messages_es.properties label.message = Hola Mundo JavaFX!

Launching the application results in the following screen

Keep on Groovying!