Community Spotlight - November 2015

Spotlight, featured image

It’s been a busy autumn for all of us, but the awesome Vaadin community has found some time to squeeze out quite a lot of cool stuff. Let’s cover some of that.


Many developers have been busy participating in Vaadin Challenge. In this competition, organized together with IBM, you can learn a lot about tools, such as Cloud Foundry, Maven, Vaadin, Bluemix, and compete for some awesome prizes.

The answers have been amazing in both quality and innovativity. We’ll most likely cover some of the best parts after the competition. There are still a couple of days left, so if you have a free weekend, it is still not too late to aim for a brand new Apple Watch.

Article picks: an introduction and lots of Domino + Vaadin material

There have been too many nice articles published lately to list them all here. A really nice Vaadin introduction was written by Sing Li. It’s a really good article to link to your friends who still haven’t found Vaadin into their toolbox.

My other article picks also come from the world of big blue. It looks like Domino developers are finding Vaadin as their tool of choice for building UIs. Paul Withers, a well known Domino developer, recently wrote about Vaadin and plans to publish some examples soon. Rene Winkelmeyer wrote about getting the widgetset compilation working with the Domino development setup and the Vaadin Eclipse plugin. And via Rene’s article, I spotted a complete series of articles about getting started with Vaadin + Domino by Sven Hasselbach.

New add-ons

Although we just covered add-ons extensively in the latest Community Spotlight and Vaangular was specially featured in our blog just a week ago, I just cannot avoid listing some new add-ons (or new for Vaadin 7), lately published in the Directory:

  • Html2Canvas Screenshot is an add-on that makes taking screenshots of your clients’ UIs extremely easy with no Java applet or other plugins required.

  • GridStack Add-on provides drag’n drop multi-column grid layouts for Vaadin applications. Good basis for “workspace” like Vaadin UI.

  • brTextField contains lots of helpers to input specifically Brazilian localized values.

  • Extended Token Field is a UI field displaying and inputting tokens.

  • IndeterminateCheckBox A CheckBox with 3 states, now has a Vaadin 7 compatible version.

  • JSClipboard Add-on is a wrapper for a JavaScript tool that allows to copy any text to user clipboard without the need to use an old fashioned Flash integration.

  • MultiRangePicker is a component for selecting multiple fragments from a range of integer values divided into fixed intervals. Selection is possible by clicking individual cells or by dragging the mouse cursor over several at once.

  • LocationTextField is an add-on that geocodes addresses using a configurable geocoder. Now this add-on is also supported in Vaadin 7.

  • LazyTooltip Add-on can replace a standard Vaadin component tooltip with one that can be lazily loaded and asynchronously updated.

  • Waypoints Add-on is an add-on for Vaadin providing a wrapper for the JavaScript library 'Waypoints'.

BTW. If you have an awesome add-on, new or a more mature one, and would like to feature it in more detail in our blog, like we featured Vaangular last week, feel free to contact me and propose an article about it.

Free certification week

The free certification week is on!

This week you can become a certified Vaadin developer and join 500 others for free! A Vaadin certificate shows that you’ve understood how Vaadin works and are able to create applications with it. As we realize this might come quickly, you’ll have until Sunday night to take the exam and then add it to your LinkedIn. The passed exam will also automatically show up on the forums next to your name. But most importantly, you’ll have proof for yourself that you know Vaadin. Just log in and head over to You have one try, so make sure you have the Book of Vaadin next to you while taking the exam.

Coincidentally this is also the last week and chance for you to join the IBM Vaadin Challenge. In it you’ll build a Vaadin application step-by-step and learn how Vaadin works plus have the chance to win an Apple Watch, an iPad or a GoPro camera. You can even think of this as a first step towards your certification.

And as an added bonus, all Vaadin trainings are at a 20% discount for the entire week. We’ve added all classes for the spring of 2016 so now’s your time to book a slot for you and your team at (and note that there are both onsite and online trainings available).

Take the online certification exam

Vaadin and AngularJS - happy together

You certainly read and hear a lot about JS frameworks, foremost AngularJS, and as a Vaadin developer you might just wonder what to make of it: ignore it? (Would be a shame, there is great stuff out there.) Jump ship altogether? (Would be a shame, too - you’d loose Vaadin.) But fortunately, it’s not really Vaadin or AngularJS - it’s rather Vaadin AND AngularJS.

There is an add-on available that lets you combine the best of Vaadin and AngularJS: Vaangular

Some reasons why you might want to do that:

  • mix and match skill within your team
  • increase responsiveness with bad network connection (by doing client-side logic)
  • reuse existing AngularJS-based assets
  • have an alternative to custom GWT development

And: you don’t have to do any GWT development (and no REST-backend-HTTP-calls either - because you have Vaadin for that, haven’t you?).

Here’s an example that uses Vaangular to increase responsiveness. Imagine you want to provide a weather forecast with a slider to select the time and get some more details: 

Slider with clock times and temperature for each time - i.e. a weather forecast

For a maximal user experience, even for users with slow network connection, you'll want to minize the server roundtrips. This would be a perfect task for your client side developer, but he/she is probably more keen to use AngularJS than GWT.

To include an AngularJS-based slider view into a Vaadin UI, you have to include the Vaangular add-on and follow these steps (we have the full code available on Github)

First: create an HTML fragment with AngularJS bindings:

<div ng-controller="WeatherController">
    <div ng-bind-html="content()"></div>
    <input type="range" min="0" max="{{userState.times.length-1}}" 
            step="1" ng-model="sliderPos" />
        <div ng-repeat="t in userState.times" 

Second: create a matching AngularJS controller (and a unit test, please! – you can download ours) 

angular.module('weatherModule', ['ngSanitize'])
.controller('WeatherController', function($scope, $connector, $sce) {
    $scope.sliderPos = 0;
    $scope.content = function() {
        var res = $scope.userState.entries[$scope.sliderPos];
        return $sce.trustAsHtml(res);
    $scope.moveSlider = function(val) {
        $scope.sliderPos = val;

You’re almost there. All what’s left is to write a Vaadin component that’s derived from or You can set weather data like this: 

public void setData(int[] times, String[] entries) {
    validateParameters(times, entries);
    this.times = times;
    this.entries = entries;
    setUserState("times", times);
    setUserState("entries", entries);

Everything put in via setUserState is forwarded to AngularJS. 

Add your component to the UI, fire off the server – and enjoy.

Of course, you can also submit data from the client to the server (both immediate and deferred) and call methods on the server. You can also apply Vaadin style classes to HTML generated by AngularJS – it’s all up to you

See more detailed instructions and more extensive examples

(also available in German)

Oliver Damm, Axel Meier, Sebastian Rothbucher
Oliver Damm, Axel Meier and Sebastian Rothbucher are Vaadin & Web developers and trainers working for akquinet AG in Hamburg, Germany. When not watching FC St. Pauli play or chilling at Lake Alster they craft business web applications – with Vaadin, of course.