AfterburnerDolphin – Effective enterprise JavaFX development

Der folgende Post ist ein Cross-Post zum Canoo RIA Blog und daher auf englisch. Es geht um die Verknüpfung von OpenDolphin und Afterburner.fx – also um Java und Softwareentwicklung.

OpenDolphin

During the last JavaOne, Canoo announced the open sourcing of Dolphin.
OpenDolphin is a library that provides a remoting solution to bridge the world of Enterprise Java and Desktop Java or other client technologies (mobile, web).

Since then, a lot has happened around OpenDolphin and it keeps gaining more and more attention.
For me personally, it was from the first time I heard of it a very interesting project, but due to daily business and other projects I didn’t have the time to get into it.
Using JavaFx as the first client technology to be implemented was also a little hurdle as I haven’t done any serious work with JavaFX, yet.
(Besides, there is an JS implementation of OpenDolphin – it proves that OpenDolphin doesn’t tie you to a client UI technology.) But now, I’ve finally found some time to play with JavaFx and OpenDolphin ;-).

Afterburner.fx

As I attended to Adam Bien’s Airhacks Workshops in March, he introduced the Afterburner.fx mini-framework to the audience and released it a few days later.

Afterburner.fx is a minimalistic MVP framework for JavaFX that provides
“Zero-Configuration” dependency injection (DI) of models and services
and
Convention-based unification of presenter, view, FXML and css.

Thus it enables the usage of the JavaFX scene builder (a UI design tool) to implement a clear seperation of layout and logic (as the layout is encapsulted in the xml). In his talk “Enterprise JavaFX 8″ Adam describes it as an implementation of “inversion of control”.
The outcome is a very powerful set of lightweight technologies to build JavaFx applications.

The wiring between the UI XML and the code a pretty minimal. On the one hand, in XML, you just need to define the controller class:

<AnchorPane id="AnchorPane" ... fx:controller="de.mynethome.presentation.DemoPresenter">

And optionally, event handler methods can also be set via XML with

<Button ... fx:id="button" onAction="#buttonClicked"  />

In the code, the UI components get injected by the @FXML annotation and the name used as fx:id :

  @FXML
  Button button;

Combine the power

My idea on the moment I saw it was to bring those two projects together to benefit from the features of both projects:

• A clean and easy way to create the UI and build up the client
• a powerful and non the less easy to use library for client-server communication and clear speration between logic on the server-side and UI-related code on the client with open-dolphin.

AfterburnerDolphin

You can find the outcome of this idea at my AfterburnerDolphin project at github.

It demonstrates the things mentioned above:

In the client module, you can find a clearly structured app, the design and layout clearly seperated (as extracted to xml and css files) from the logic (look at the App class and the DemoPresenter).

It’s all tied together via DI and convention-based confguration of afterburner.fx .

The client creates a PresentationModel and binds the button text value to the value of that model.
(DemoPresenter, Line 43)

  public void initialize(URL location, ResourceBundle res){
    JFXBinder.bind(ATT_ATTR_ID).of(textAttributeModel).to("text").of(button);
  }

On a button click, the client communicates via OpenDolphin with the server (server module, ApplicationAction) where the command for a new value (current date) of the presentation model’s attribute is created and send as a response.

(ApplicationAction, Line 17)

actionRegistry.register(ApplicationConstants.COMMAND_ID, new CommandHandler<Command>() {
            public void handleCommand(Command command, List<Command> response) {
              ValueChangedCommand valueChangedCommand = new ValueChangedCommand();
              long id = getServerDolphin().getAt(PM_APP).getAt(ATT_ATTR_ID).getId();
              valueChangedCommand.setAttributeId(id);
              valueChangedCommand.setNewValue(new Date());
              response.add(valueChangedCommand);
            }
        });

That demonstrates how easy this set of technologies lets you set up a well structured multi-tier application and implement a roundtrip between client and server.

Any business logic can be handled on the server, the client only need to implement the presentation. And the implementation and maintenance of the client UI is eased up by the clear structure implemented with the help of afterburner.fx .

The UI of this sample application is very simple, as you can see from the screen shot – before and after click on the button. The date used as die new button text is set on server side.

Conclusion

I think, the combination of AfterBurner.fx and OpenDolphin provides a very powerful featureset.
At first, it’s easy and quick to setup and design UI Layout with Scence Builder.
After that, AfterBurner.fx and OpenDolphin allow you to build an application with clear, distinct seperation between layers:

• UI layout (in XML)
• UI logic (in client code)
• Business Logic (and more) (in server code)

You can be up and running very quickly with a short time to initiate application development. With the clear seperation, I would expected the setup to provide the foundation for a very maintainable project.
And with OpenDolphin you protect your investment as you can very quickly provide an multi-channel application (providing an mobile app UI based on the already developed server code) or switch to another UI technology and reuse the business logic implemented on server side.

Further steps

Fork AfterburnerDolphin on github.

Find out more about Afterburner.fx, visit the Afterburner.fx Homepage.

Get more information on OpenDolphin with the OpenDolphin documentation.
Or look at the OpenDolphin videos on youtube.