Round images with JavaFX

In modern UI you can often find round avatar images like shown in this image:

Creating this special UI nodes with JavaFX isn’t that hard. The most important JavaFX features to create such a rounded image is clipping. By using clipping you can define the area in that a control can draw it’s content. A clip can be any shape and you only need to set the shape property of a JavaFX Node instance to define its clipping. You can find an additional clipping description here.

Let’s start creating the component. As a first step we will define a Circle shape as a clip and define it for an ImageView instance:


In addition a border should be added to the component. To do so we add one (or several) Circle shapes on top of the ImageView:


In the JavaFX code you can simply bind the bounds of the image to the bounds of the clip and the circle instances that are used as a border.

Styling a JavaFX Scrollbar

Styling a scrollbar in JavaFX isn’t that easy since it it composed of several internal nodes. Thanks to CSS all the internal nodes can be styled by using the defined style classes of the nodes.
When adding a scrollbar to a scene it will contain the following internal / private nodes:

  • A StackPane that defines the background of the track area that can be styled by using the track-background style class
  • A Button that defines the increment button of the scrollbar. The button can be styled by using the increment-button style class
  • The increment arrow is a subnode of the button and it’s defined as Region. It can be styled by using the increment-arrow style class
  • A Button that defines the decrement button of the scrollbar. The button can be styled by using the decrement-button style class
  • The decrement arrow is a subnode of the button and it’s defined as Region. It can be styled by using the decrement-arrow style class
  • A StackPane that defines the track area of the scrollbar. It that can be styled by using the track style class
  • A StackPane that defines the thumb of the scrollbar. It that can be styled by using the thumb style class

In addition the scrollbar supports 2 pseudo classes that can be used to define specific styles for a vertical and horizontal scrollbar. This pseudo classes are named “vertical” and “horizontal”.
If you want to use a scrollpane there is this empty little area in the bottom right corner. You can style that area by using the corner style class.

JavaOne After Event with some cool talks

The JUG Switzerland has announced an event with some talks of the JavaOne 2015. You can find all information here. I’m happy that 2 of the 5 talks are JavaFX / UI related. If you haven‚Äôt had the change to attend JavaOne and live near Zurich you should visit this event.

Dolphin Platform in 15 minutes @ Nighthacking

Michael and I were interviewed at Devoxx about the Dolphin Platform. In the interview we explain the benefits of the framework and show some code. The video was uploaded some minutes ago and you can find it here:

Dolphin Platform & KumuluzEE: JavaEE Microservices with dynamic and rich frontends

Have you heard of KumuluzEE that is one of the 2015 Java Duke’s Choice Award winners? Well, if you haven’t heard about this cool project you should have a look. KumuluzEE is a JavaEE based framework to create microservices and JavaEE based applications that can start on their own without deploying them to a monster application server. If you know Spring Boot the description is quite easy: KumuluzEE is Spring Boot for the JavaEE framework. In this post I will show how you combine kumuluzEE with Dolphin Platform to create lightweight microservices with a dynamic frontend.

KumuluzEE overview

When using KumuluzEE you can work with all the JavaEE specs that you already know. Let’s say you want to create an application that provides some REST endpoints and uses CDI internally. To do so you need to add the following dependencies to your project:

Let’s have a deeper look what this dependencies define and add to your project:

  • The kumuluzee-core dependencies is the basic dependency of KumuluzEE and must be added to each project
  • The kumuluzee-servlet-jetty dependencies adds an embedded jetty. This includes the implementation of the servlet API. If you only want to code based on servlets you are done now.
  • The kumuluzee-cdi dependencies adds CDI support to you application. Once this dependency is on your class path you can use CDI in your server application.
  • The kumuluzee-jax-rs dependencies adds support for JAX-RS. By adding this dependency you can add REST endpoints to your application

Once this is done you can create your (microservice) JavaEE application. You can use all the defaults of the specs that are added as dependencies. The following code shows how a REST endpoint might look like:

To start your app kumuluzEE adds the class that contains a default main method. By starting the application your endpoints will be up faster than you can spell “weblogic”.

KumuluzEE and Dolphin Platform

Since KumuluzEE supports all the JavaEE specs that are needed for the Dolphin Platform it’s quite easy to create a Dolphin Platform application based on KumuluzEE. To do so you only need to add the following dependencies to your application:

Please notice that the feature is still in development and will be part of Dolphin Platform 0.7.0 ūüėČ

Once this is done you can start to create your Dolphin Controllers that will automatically be managed by JavaEE and support features like CDI.


Thanks to KumuluzEE you can create lightweight Dolphin Platform applications by using the enterprise framework APIs that you might now and like since years. The best: Since you don’t use specific JavaEE or Spring code in your Dolphin Platform controllers they will work in both Spring and JavaEE. Just add the right dependency and your controllers will be automatically managed by the container. In my last tests both implementations bootstrapped in under 7 seconds :)

Building modern web UIs with Web Components University @ Devoxx

On Monday Michael and did a 3 hour university about Web Components and Polymer at Devoxx. Today the Devoxx team announced that all Devoxx talks will be published to YouTube. This are awesome news :)

Next to this the Devoxx team is really fast with the video post production and therefore or talk is already online:

Dolphin Platform has been released

We planed to release the Dolphin Platform before JavaOne but the preparation of the JavaOne Voting Machines took more time then expected and we can’t finish all the todos that we had to fully open source the Dolphin Platform. Since JavaOne is over for more than a week we found some time to finish all the steps and I’m proud to announce the first Dolphin Platform release :)

As a first step we uploaded the Dolphin Platform website and added some descriptions and information about the framework. In addition we created a first tutorial and a “getting started” guide. All the Java sources (client and server) are uploaded to Github, a first release has been created and was uploaded to Maven Central / JCenter.
If you want to try Dolphin Platform you can create your first application by simply adding the following dependencies:

For a Spring Boot based server you only need to add the following dependency:

For a JavaFX based client you need to add the following dependency:

If you are new to Dolphin Platform you can find some post about the API in my blog. In addition we spend some time to create the JavaDoc of the public API. If you have any questions please leave a comment or ask us on twitter. For news about Dolphin Platform you should follow the official twitter account @DolphinPlatform.

Java Script client libraries

As I mentioned before Dolphin Platform supports several client technologies. Next to the JavaFX library we hosted the sources for the basic JavaScript client library and the Polymer client library on github. We will add releases of the libraries this week. Once this is done I will blog how you can simply add Dolphin Platform to your web project by using bower.


Here is an overview of all important links:

Dolphin Platform Web Frontends with Polymer

For the Dolphin Platform release we plan to offer several demos and tutorials as a starting point. Currently I’m working on a simple chat app that contains a JavaFX and a web frontend. The web frontend is done by using Google Polymer and web components. In this post I will give a preview how you can create web applications with¬†the Dolphin Platform by using Polymer.

All the main concepts are already described in the post about JavaFX clients and in this post I will show you that you can reuse all the concepts for a web application.

The following picture shows how the final application will look like:


To create a client that can communicate with the Dolphin Platform server a client context is needed. In an web application this can simply be done by defining a global JavaScript value:

As we use web components when creating an application by using Polymer all view elements of our application are defined as components. In the chat example one chat view is defined as a Polymer based web component. For such a component the minimum code looks like this:

Once this is done you can simply use the component in your web application as a custom tag:

To create a web component that acts as a Dolphin Platform you only need to add one more line of code:

Polymer supports extending custom element prototypes with shared code modules called behaviors. The Dolphin Platform client API provides such a base behavior and therefore you can connect a web component with a Dolphin Platform controller by only adding one line of code. The ThreadViewController is the server side controller for this view. The code of this Java class looks like this:

I don’t want to discuss the Dolphin Platform controller API here and therefore all the methods of the controller are empty at the moment. Here it’s important to know that the controller instance and the view share one model that is defined by the ChatThreadBean class:

As you can see in the code the model contains a chat id, the typed text and a list of all chat messages that should be shown in the chat thread. Let’s have a look how we can use this model on the client.

By adding the Polymer behavior the Dolphin Platform model will automatically be injected in the component context. It is stored in the JavaScript model value. This means that the following JavaScript call will show a dialog that contains the current typed text:

In addition Polymer defines a binding API this is automatically used by the model. Thanks to this you can simply bind your model or parts of your model to HTML attributes in the web component template by using the mustache syntax. here you see how the typed text is bound to the input field in the chat view:

Easy, isn’t it?

Thanks to the modularity of web components you can even go deeper and use your model in sub components. In the chat example each message in the chat is defined by a web component. To do so we created the custom component chat-message that defines how one chat message should be visualized. Now we can define the complete chat by only 3 lines of HTML code:

The don-repeat elect is a special Polymer elect that add it’s content for each item in a given list. As we said earlier all the chat messages in our model are defined as a list. This list can easily be accessed by calling model.messages.

If you already read the post about JavaFX clients you might notice all the parallels. By using the Dolphin Platform API it’s really easy to create interactive and modern clients for several platforms without loosing the control of the UI.

A short preview of the JavaOne Voting Machine

Today I want to give a short preview of the JavaOne Voting Machine that is build for this year JavaOne as a cooperative project by Canoo and Oracle.


Voting Machine devices will be placed in every room at JavaOne. By doing so attendees can directly vote for each session and the voting results will be shown on a central leaderboard.


Currently Michael Heinrichs and I manufacture and test all the devices in Silicon Valley and hope to have all of them finished with the beginning of the next week :)


JavaFX 8 RefCard

Together with Michael Heinrichs and DZone I created a JavaFX 8 RefCard.


The RefCard gives an overview of the most important JavaFX APIs like CSS, Properties or Controls. Here are some snippets of the card:



If you want to learn JavaFX or just need a quick overview while coding this refCard is the perfect choose for you :)

You can download the RefCard as a PDF at DZone for free or order some printed copies.