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.

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:

An overview of the Web Component specifications

WebComponents are a new W3C standard that is defined by some new specification:

  • Element Template
  • Shadow DOM
  • Custom Elements
  • HTML Imports

An overview about this specs and how they can be used in HTML can be found in the presentation that I did with Michael Heinrichs at JFokus in detail. Therefore I only want a short overview here.

Element Template

By using the template tag you can define a reusable template of a HTML hierarchy that can be reused and added to your DOM. Let’s say you define the following template:
Once you have defined this template you can create a instance in JavaScript and add it to the DOM of the page:
By doing so you can reuse the defined template several times in your page.

Shadow DOM

Let’s say you have defined a template (or a web component as we will see later) and use it in your application. By doing so the DOM of your component will be added to the page DOM. If you than want to style your page by using CSS or access the page by JavaScript there are some pitfalls. As an example the following DOM is created and a component (green) is added to the regular DOM (blue). A node in the page and in the component uses the same ID or style class:
Maybe the component was created by a different developer or it is part of a 3rd party module. In this case you maybe don’t know about the internal IDs or style classes. When styling or modifying your application you would use the following code:

In both cases your code will affect the node in the regular DOM and in the component. But normally you don’t want to change the component. Therefore the Shadow DOM was introduced. By using the shadow DOM the nodes of the component are separated from the regular DOM:
Once this is done CSS or JavaScript changes won’t affect the component that is capsulated by the Shadow DOM. A component in a Shadow DOM can be created by using JavaScript:

Custom Elements

The Custom Elements spec makes use of templates and the shadow DOM. By doing so you can specify a component and add it to a page in a Shadow DOM. In addition the spec defines a lifecylce for components.
By using the Custom Elements spec you can define reusable tags for your components. Let’s say you want to define a activity stream like in Facebook or Twitter. To do so we want to create a custom element for the entries in this stream.
Normally you need to define a div hierarchy for any entry in the stream. This ends in a lot of boilerplate code like shown in the following snippet:

This don’t look readable and what we really want to do is something like this:

This can be done by using Custom Elements. To do so we first create a template:

Once this is done we need to write some JavaScript code to create a custom element that is based on this template:

Once this is done the activity-card tag can be used in our application. In the JavaScript code a method called createdCallback is defined. This method is part of the Custom Elements lifecycle and will be called once the component is created. Next to this method the following methods are defined in the lifecycle:

  • createdCallback
  • attachedCallback
  • detachedCallback
  • attributeChangedCallback(attrName, oldVal, newVal)

HTML Imports

When using the first 3 specs we can define reusable components in our HTML page. But all the code is still part of our HTML (or JavaScript) file. This is ok if we only want to create a single HTML page. But when creating a big application you will have several HTML files and you don’t want to define the reusable components on any page. Therefore the import can be used. By doing so you can specify a reusable component in a extracted HTML file that can be reused on any page. By doing so it’s even easy to create components that can be shared between several projects.
Using the import is easy. You only need to specify an import link that points to the file that contains the component specification:

Once this is done you can simply use the custom component in the page.


This is only a quick overview to the new specifications without going to much into details. If you want to learn more you should have a look at our slides or additional documentation on the web.

A god starting point is the page that contains a lot of documentation.

When trying to create your first own web component you will maybe see a big problem: Today most of the modern browsers don’t support this new specs.
As a workaround you can use the webcomponents.js polypill that will add the support of the shown specs to mostly all evergreen browsers. I plan to give an introduction to this polypill in a separate post.

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 :)

A short introduction to Bower

Some weeks ago I blogged about web components. Since that post I did a lot of research about this topic and had a talk about web components at JFokus. I really like this new technology and therefore I plan to blog about it more often in future. All the JavaFX lovers and readers of my blog shouldn’t be afraid. I will continue work with JavaFX 😉

Before going deep in the web components topic I want to introduce a tool that I think is needed when working with this new technology: bower.
Bower is an open source tool that is created by Twitter and helps you to manage the dependencies of a web application. By using bower you can define all the dependencies of your application and automatically download them.

Getting started with bower

Bower can be installed by using NPM and once it’s on your system you can create a bower configuration for your project by simply calling "bower init". By doing so you need to define some metadata for your project and bower will create a json file (bower.json) in your project folder. This file contains the definition of your project and might look like this:

Developers who are familiar with Maven might notice some parallels. Once the file is created you can add dependencies to your project by calling a bower command like "bower install --save webcomponentsjs" that installs the web components polyfill (I plan to blog later about that module). When looking at the bower file you will find a dependencies section that contains the added module. In addition a “bower_components” folder was created in your project that contains the defined dependency. Once this is done you can simply use any content of the “bower_components” folder in your application. But don’t forget to add the “bower_components” folder to .gitignore 😉 When checking out the project from git you only need to call “bower install” and the cool little tool will download all the defined dependencies for you and add them to the “bower_components” folder automatically. So from a Java developer point of view this is mostly what Maven does for my Java project.

Here is a quick overview about the commands that is part of my JFokus talk:

How to define dependencies

Some of you might ask yourself how you should know the definition or name of a dependency. Bower is more flexible that Maven in this case. When calling the "install" command there are different ways how a dependency can be specified. Here is a short overview that is taken from the bower web page:
bower install

In addition bower provides a search frontend (like the Maven central frontend) that can be used to search for modules and dependencies.