Dolphin Platform: A Sneak Peek of the model API

Before I will talk the first time about the Dolphin Platform today at “Java Forum Nord” I will use the time to post the next preview. Today I will give a short overview about the model API of the Dolphin Platform. The last days I already gave a general overview and described how the controller API of Dolphin Platform is working.

The Model API

To describe the API that helps you to define presentation models in Dolphin Platform I will start with an example. Let’s say we have the following view that can be part of a photo library app:

In this view we have several elements that need a data model. If the data of this app is stored on a server the data model must be shared between the client and the server. When having a look at the screen we can see 3 different elements that need data from the data model to visualize itself or provide user interaction:

  • The title of the screen needs a String as its content. Here we can display the title of a photo album or an internationalized string
  • The slider that defines a value. Let’s imagine that the interaction with the slider changes the size of the pictures in the main area. Maybe the last value of the slider should be stored on the server to automatically save user preferences
  • All pictures in the main area. As you can see each card in this area contains an image and maybe a badge in the top right corner. A badge element in the top right corner visualizes if the photo is flagged.

Based on this definition we would create a presentation model that might look like this one:

When defining such a model in JavaFX you can use the cool property API and the observable collections that are part of JavaFX. Modern javaScript frameworks like AngularJS or Polymer provide a similar behavior and therefore we decided to offer the same benefits when defining model with the Dolphin Platform. Since Michael Heinrichs was the project lead of the property and bindings APIs of JavaFX at Oracle we had a lot of knowledge in this area that helped us creating the model API: In Dolphin Platform you work with properties and observable collections, too. Therefore it really easy to define a hierarchical model for your view. A model for the shown view might look like this:

All properties and collections in Dolphin Platform are observable and therefore it’s quite easy to observe them on the client and the server:

For all client APIs we support first class support for the Dolphin Platform properties. When working with JavaFX for example it’s quite easy and intuitive to bind a synchronized Dolphin Platform property to a JavaFX property:

On JavaScript clients the handling is even more elegant as you can bind the Dolphin Platform model directly in HTML.

The main benefit of this concept is that you can use the same model classes on the server and the client. Because the model will automatically be synchronized between the view and the server controller it feels like you work with the same instance. By doing so you can simply bind a string property to a textfield in the view and observe it’s value on the server. The change events will automatically be fired on the server when you start typing in the textfield.

There are a lot of more cool features in the model API but since this should only be a overview I need to stop here :) But there are only a few weeks left till JavaOne where we will release a whole preview with the source, documentation and several samples. As the next step I will post a preview of the view API the next days.

Dolphin Platform: A Sneak Peek of the controller API

Today I want to add the next sneak peek of the Dolphin Platform, a new open source project on that Michael Heinrich and I are currently working at Canoo. Yesterday I blogged about the general concept of the platform. Today I want to show server side controllers can be defined by using the Dolphin Platform.

The Controller API

As already said the controller are defined on the server. If you already used JSF you might know this concept. But don’t be afraid, I won’t compare Dolphin Platform with JSF 😉
Each controller must be annotated with the @DolphinController annotation and therefore the most simple controller might look like this:

Even if this class don’t make that much sense we created a complete runnable Dolphin Platform server application here. Once this is deployed the underlying platform (currently JavaEE or Spring) will automatically find your container and manage its lifecycle. This is done by the architecture of Dolphin Platform that provides a public API and specific bootstrap implementations for JavaEE and Spring. As a developer you will always code against the public API and only need to add the needed bootrap module as a dependency to your server application.
This means that the shown controller will work in any Spring or JavaEE 7 environment.

Since the controllers managed by the container you automatically get all the benefits that comes with it. This means that you can use @Inject or @PostContruct annotations, for example:

Next to this Dolphin Platform provides addition features for the controller API. Any method that is annotated by @DolphinAction can be called from the client view to trigger some actions on user interaction, for example.

By doing so it’s very easy to handle the business logic that will be triggered by a user action. Since the methods are defined on the server you benefit of security and transaction support, for example.

Next to the actions a main concept of the Dolphin Platform is the presentation model (or view model). Each view-controller-pair can define it’s own model that can simply be injected in the controller by using the @DolphinModel annotation. We will see later how such a model can be defined. When injecting a model to the controller its lifecycle is bound to the lifecycle of the controller and will be automatically managed by the underlying platform.

By doing so the model instance will automatically be created when a new controller instance will be created. If the controller will be destroyed by the container the model will be destroyed, too. In addition the model will automatically be synchronized between the server controller and the view on the client side. How the model can be accessed and handled on the client will part of a future post.

I think the biggest benefit in the shown concept is the perfect integration in a web container like it is provided by Spring or JavaEE. All your controller (and model) instances will be managed by the container and it’s no problem to inject a spring service in your controller, for example. By doing so you can use an API like Spring data and fill your view model directly with data from your persistence.

In the next preview I will show how a view model can be defined by using Dolphin Platform and how you can simply observe any view model on the server and client.

Dolphin Platform: A Sneak Peek

Today I want to give you a first overview of the Dolphin Platform, a new open source project on that Michael Heinrichs and I are currently working at Canoo.


The Dolphin Platform is a framework that implements the presentation model pattern and provides a modern way to create enterprise applications. As you might know there are several of this frameworks out there. So let me start this post by describing what makes the Dolphin Platform special and why we decided to create it.

Architecture overview

Since most of you know Michael and me as part of the JavaFX community, we don’t stop here when talking about the Dolphin Platform. The Platform will provide several client implementations. Currently it’s our main goal to provide a first preview at JavaOne with JavaFX, AngularJS and Polymer client support. Based on this you can simply create desktop, web or mobile clients with the Dolphin Platform. The client APIs are pure Java or JavaScript APIs and you don’t need to learn any new language to use them.

What we’ve started on the client side will be continued on the server. Here the Dolphin Platform provides an API to create server side controllers that will automatically be managed by the underlying platform. Therefore we create a Spring and JavaEE implementation of the public APIs on server side. As you will see later you can simply inject all your business services in a controller and don’t even think about any lifecycle because the web container will handle that for you. But before I go into the details I want to give a short overview about presentation models and the patterns that are implemented and provided by Dolphin Platform.

Synchronized Presentation Models

In the Dolphin Platform all models will automatically be synchronized between client and server. By doing so you don’t need to think about any specific endpoints or requests.
Based on this the Dolphin Platform defines server side controllers that contains all the controller logic for a specific view. The lifecycle of these controllers is automatically synchronized with the view lifecycle. By doing so you have a MVC group for each client view with a synchronized model and a managed controller.

Ok, I think this was enough description and I hope that you want to see some code 😉 I will post a preview of the controller API, the model API and the view API the next days.

Here are the links to additional DOlphin Platform sneak peeks:
I blogged about the Dolphin Platform controller API.
I blogged about the Dolphin Platform model API.

More fun with layered icons in javaFX

2 days ago I showed the first demo of my layered icon component for JavaFX that copies the visualization of the new AppleTV icons. Yesterday evening I created some cool new layered icons based on this technology and recorded a video of the examples (I describe the effects and some first techniques in the movie). Hopefully I find some time to describe the used technology in detail. Since this will be a longer post it sadly needs some time…

Layered images and icons with JavaFX

Maybe some of you have seen the presentation of the new AppleTV. Apple always creates awesome UIs and for the new AppleTV the introduced an unique way how icons can be displayed: Layered Images.
By layering images a 3D look is created. This looks very cool and I can’t wait to test this new feature.

Since I have to wait 1 more month I started to recreate the effect by using JavaFX today. With some math, transition, perspective transformation and shadows I created a JavaFX demo that copies this new icon visualization. I will blog later how this is done in detail. But I like my current results that much that I want to share them with you 😉

Here is a first preview (and yes I only used JavaFX to create this):

How to create a responsive layout in JavaFX

Some days ago I was asked at twitter about a responsive layout problem in JavaFX. Based on my work that I did with ResponsiveFX I was asked how I would create a specific responsive behavior.
In this special case a image and text should next to each other on a desktop. In a smaller (mobile) version the text should be placed under the image. You can find the question at stackoverflow, too.
I want to start with a first look how the solution should look like. The following picture shows the described layout on a big and on a small screen:
Let’s discuss several approaches that we can use to create this behavior.

Switch between HBox and VBox

One suggested solution is to switch between a HBox and a VBox at runtime. This means that on a big screen you will see the image and text wrapped in a HBox and when the size becomes smaller the HBox will be replaced by a VBox. By doing so we need to discuss if we want to reuse the text and image component in both layouts or create separate instance for each layout. Here I think that a recycling of the components is a good idea. If you use 2 instance you need to sync them. By using the JavaFX property API this isn’t as hard as it sounds in the first moment but it can still create some errors. So let’s have a look at a code snippet that creates the basic view:

When running this example the view will be shown with the text and image next to each other:
As a next step we want to refactor the code by using a VBox:

In this example the text will be displayed under the image as it should look on small devices:
As a last step we want to modify the code and create an application that will change it’s layout dynamically:

In this first try the mainPane contains the hBox or the vBox depending on the width of the scene. To do so a lister is attached to the width property. In addition the children of the vBox and hBox will be cleared and the text and image will be attached to the currently visible panel. As you can see in this video the view already behaves like it should:

There are still some ugly parts in the code. As you might have noticed the listener will be called for each repaint of our stage. therefore nodes will be replaced and added to the scene graph all the time. Here we can use the JavaFX binding API to create a more performant binding. Here is the code snippet that shows the changed code:

Now the scene graph will only be changed if the size will become greater or smaller than 600 pixel.

I think this is a valid solution for the given problem and we can create a responsive behavior this way. But I think that it’s not the perfect solution and therefore I will show another and easier approach the next days.

Material Design in JavaFX

The last weeks I worked on a prototype to create a Material Design like UI with JavaFX. Google provides an awesome documentation about the Material Design and its guidelines. You can find an example here.

I tried to recreate some of the Material Design layouts and components in JavaFX. Here I don’t won’t to recreate everything but create a theme that is inspired by material design. By doing so I can feel free to change any point of the Material Design definition. I think the project is at a point were I can show it to you to receive some feedback and maybe contribution. Here are some pictures of a demo application that is based on the theme:


The source of the project can be found at GitHub. Currently this project provides more than the theme (and the name will change in future). The complete demo application is build without using any specific or complex layouts. By doing so it’s very easy for a developer that isn’t that good in layout and UI related stuff to create a cool looking application. How this can be done will be discussed in a future post.

The entry point of the demo application can be found at com.guigarage.sdk.demos.SimpleViewAppDemo1 and by starting this application you can play with the first demo. An overview of this application can be found in this video:

A quick overview to the DataFX MVC and Flow API

This is a short overview of the controller and flow API of DataFX that I have written for the JSR377 mailing list. If you want to discuss the architecture in general please add a reply to the mailing list.

DataFX provides a MVC approach that adds a lot of API sugar to the FXML API of JavaFX. As a first example you can find a simple controller here:

DataFX Controllers supports a lot of standard annotations like @PostConstruct. In addition the @ViewNode and @ViewController Annotation can be used to provide a link to the view. @ViewNode does mainly the same as @FXML but provides additional functionalities. Actions can be defined by an unique id. Therefore you can use Annotations to bind controls to actions. If you want a action to be called in a background thread you only need to add the @Async Annotation to the method.

Next to this there are some special annotations to inject DataFX related Objects like an exception handler or the DataFX concurrency toolkit. Here is an example:

On top of the MVC API is the Flow API. By using this API you can define flows in your application. By doing so you can define links between views or actions that will open a specific view. A Flow can easily defined by using the controller classes:

When using a flow you can define actions as global actions for the flow or actions that are view specific.

Next to this the Flow API adds a lot of new annotations. By adding the @BackAction annotation to a node like a button the flow will navigate back to the last view once the button is clicked. Instead of defining the links in the flow definition you can use the @LinkAction(NextViewController.class) annotation.

In addition the Flow API provides CDI by using @Inject. To do so 4 different scopes are defined:

  • application scope (singleton)
  • flow scope (same instance will be injected in every controller / view / model of the flow)
  • view scope (same instance will be injected in the controller / model of the view)
  • dependend (always inject a new instance)

In addition DataFX provides a event system. This can be used to handle events between 2 separated flows, for example. Each event type is defined by a unique id. The following code snippet defines two controllers that can be used in complete different parts of the application and don’t know each other. By using the event system the first controller can send events to the second one by clicking the button:

If you want the async events you only need to add the @Async annotation to the producer or / and receiver. By doing so you can create events on a background thread that will be received on the platform thread.

DataFX provides a PlugIn API that can be used to define additional components / plugins that will be managed by DataFX. Therefore you can define two types of Annotations: A injection annotation that can be used to inject specific objects or a handler annotation that can be use to do some stuff with objects. Here are two examples:

Example A
DataFX provides a plugin for feature driven development. By doing so you can define nodes in your controller like this:

Now you can use the togglz API to define feature toggles and change them at runtime. If you for example disable the PLAY_FEATURE the playButton will become hidden. This is en example for a plugin that provides handler annotations.

Example B
DataFX provides a Plugin for remote EJBs. By using the plugin you can inject a Remote-EJB-Proxy in your controller:

In this case the EJB Wrapper / Proxy will be injected by using the custom / plugin annotation

If you want to now more you should have a look at the DataFX tutorials or ask me :)

JSR377 got green light to continue!

Today the Review Ballot Results for JSR377 (Desktop|Embedded Application API) were published. As you can see the JSR was well received:

votesSpec lead Andres Almiray published the official web page for the JSR today.
If you want to know more about JSR377 you should read this introduction or have a look at the mailing list.