Dolphin Platform: A Sneak Peek of the view API

The last days I blogged about the different APIs of the Dolphin Platform. The Dolphin Platform is a new Open Source Framework by Canoo that will be released the next weeks. But one part is still missing: the view. Therefore I will show how you can create JavaFX based clients by using the Dolphin Platform. As already mentioned the Dolphin Platform will provide support for several client platforms like JavaFX, AngularJS or Polymer.
In this post I will focus on the JavaFX support. Other client libraries and APIs will be described in future posts.

The View API

Last but not least I will show how a view will be coded based on the Dolphin Platform. Here the client specific APIs differs in some points because we want to support the core concepts of the underlying UI toolkit. One of the most important points is that a developer can use the concepts he already knows and therefore we decided to not provide the exact same API for all client types. But when having a deeper look at the Dolphin Platform client libraries you will see that the core and low level APIs are the same on all platforms. In this first overview I will give a short sample how a view can be coded in JavaFX.

When creating a JavaFX client you will normally use FXML to create your view. Next to the FXML file you will have a view controller to bind all the properties of the view and attach action handlers.
When talking about the dolphin Platform this view controller is the perfect point to bind the view to the synchronized model and the server side controller. Therefore we call this class the “Binder”. There are several ways how you can define such a binding but the most easy one is to use extend the AbstractBinder class that is part of the Dolphin Platform JavaFX library. This class already implements the complete lifecycle of the view and you can simply bind the synchronized presentation model to your view properties. Here is a small example for a view that contains only one textfield and a button:

Once the view binder is instantiated the server controller and the model will automatically be created on the server. Since the model will be synchronized all the time between client and server you don’t need to create it on the client. After this initialization is done the onInit() method of the binder will called. Here we bind the the name property that is part of the synchronized model to the text property of the textfield. In addition we define an action handler for the button. When the button is pressed a action in the server side controller should be called. Top do so the abstract binder provides the invoke(String name) method that triggers actions on the server controller. In this specific case the server controller might look like this:

As you can see we never send any data to the server. Since the model will be automatically synchronized we can directly store the name string in the model to the database. The Dolphin Platform guarantee that the model will be the same as it’s on the client when pressing the button.

Another nice benefit that you might notice is that even if we have communication between the server and the client we don’t need to handle several threads. The Dolphin Platform handles all the concurrency and handles all actions in the right thread. By doing so the binding between JavaFX properties and Dolphin properties will automatically be handled on the JavaFX application thread.

I hope this post gives a first overview how a client can be created. As already said the Dolphin Platform will provide support for several client platforms like JavaFX, AngularJS or Polymer. I will blog about the specific client APIs in future posts.

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.
I blogged about the Dolphin Platform view 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):

Creating an interactive application with Polymer (Part 1)

Some time ago I created my first post about web components and today I want to continue this series. In the last month I played a lot with this new technology since at Canoo we think that this will be very important for web development in the future. Therefore Michael Heinrichs and I will give a university session at Devoxx this year and plan to offer web component and Polymer training at Canoo.

In this blog post I will create an interactive web application based on Google Polymer 1.0 to show how data binding can be used and how a basic Polymer application might look like. In this case I don’t want to dive deep into the creation of custom components using Polymer but give a first introduction how you can design applications by using the Polymer paper elements.

What is Polymer?

Google Polymer is an open source toolkit that is build based on the web component specification and provides some additional features. In addition Polymer provides it’s own UI component suite that is based on the Material Design style by Google.

Based on Polymer and web components it’s very easy to create a web application that is based on custom components instead falling in the

hell. Here is a short example that shows how a Google maps web component can be integrated in any web page:


Polymer provides an element catalog with documentation and many examples of all components that are part of the lib.

Project setup

Let’s start with a first project that uses Polymer and the Polymer paper components to create an application. This project only needs 2 file:

  • a index.html that contains our application
  • a bower.json that defines all external dependencies

Our final application should be a picture viewer that support some user interaction. I want to change the size of all images by using a slider. Here is a first sketch:

To use the Polymer paper components we only need 1 dependency to PolymerElements/paper-elements in the bower file. If you are not familiar with Bower you can find a short introduction here.
Once you have added the dependency your bower.json file like look like this:

After calling bower install all dependencies are downloaded to the bower_components folder. This includes:

  • webcomponentsjs – A polyfill that provides the features of the web components spec for browser version that doesn’t support native support for the features
  • polymer – the basic api of polymer.
  • paper-* – all Polymer paper components like controls and layouts
  • iron-* – basic web components like an icon view. The Polymer paper components are based on this basic components

Once this is done we can create the initial index.html file. Here we will start to provide the functionality of the web components spec by adding the polypill. To do so we include the script in our page:

Now we can start using the new features. We want to start with the import. In our example we need the Polymer API and some paper components. Therefore we add imports to all these dependencies:

The paper elements already depends on the Polymer API and therefore we don’t need to add it explicitly.

Starting with Polymer

Since Polymer is a framework for web components we will create a component that wraps our complete application view. To do so we need a html template and some JavaScript for the Polymer boostrap / configuration. A first simple example of such a component looks like this:

This code snippet defines a Polymer based web component that can be added to a html page by using the <app-view> tag (as defined in the polymer id). This web component only contains the static text “Content”. Let’s add this code snippet and the custom tag to our index.html:

Here is a pic of the current state in chrome:

As a Java developer I simply use IntelliJ to test my app. By opening the page from IntelliJ the IDE starts automatically a web server to provide the web app.

If you don’t use IntelliJ there are several other ways how you can test your app.

Let’s add some first Polymer paper elements. Here I want to start with a paper-header-panel that defines a header and a content area. The header area is always on top and you can use it perfectly to display a toolbar. The content are will fill the rest of the page size and is scrollable by default.

In this header panel we want to add a toolbar with a title and a slider. For all these components Polymer paper offers ready to use web components. How this components can be used is documented in the Polymer elements catalog. Once this is done our code look like this:

In chrome we can already see the toolbar but the layout doesn’t look that perfect:

Polymer provides a flexbox based layout that can be simply modified by using custom attributes that are provided by Polymer. I don’t want to dive deep here in flexbox and Polymer layout (since this post is already very long) and simply show the final code:


Ok, as a next step I want to add some static images. Therefore I will use that is a perfect service to get some random images. After adding some images to the content as shown in the following code snippet our application already look like some kind of image viewer:

with images

Thanks to the flex box layout that is used in Polymer the images are aligned in a responsive grid. When resizing the browser windows the column count in each row will fit to the width of the browser. In addition a scrollbar automatically appears if all images can’t be shown on screen.

As a next step I want to finalize the styling of our application by adding some CSS. Here is the final html file:


Ok, this will be enough for today :)
In the next post I will show how the Polymer properties and data binding can be used to create the needed interaction.

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: