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.

Lots of new Vaadin + Liferay material available

The Liferay portal has always been a popular basis for Vaadin applications, so for this year’s Liferay Symposium we wanted to publish some fresh learning material - especially for new Vaadin developers. We created a full-stack example portlet, published a couple of smaller tricks for Liferay developers and created a new web page to act as a hub for essential Liferay + Vaadin information - for both new and existing Vaadin developers.

Liferay + Spring Data + Vaadin

Instead of just small code examples and “hello world” style getting started apps, we wanted to show a new inspiring full stack recipe to create Vaadin portlets. Full stack examples are often a bit opinionated, but we believe this is one of the best ways to build modern portlets for your business. And if it doesn’t suit your requirements as such, it can be a source of inspiration for your perfect stack.

On the persistency layer we rely on JPA entities, repository pattern and an awesome tool called Spring Data JPA that helps us create the data access code in a snap.

The example project and a related article also show how you can use the recently introduced Vaadin Spring to make your Vaadin UI objects Spring managed beans. This naturally helps you to integrate with things like Spring Data repositories, but it may also greatly improve your UI code quality, if you master all IoC tricks that Spring core allows you to apply.

In the example, we are using the User object provided by Liferay’s sign-in functionality and show how you can do loose coupling with the user data provided by Liferay and the separate Spring Data managed database.

Boost your productivity with Vaadin Designer

If you have visited lately, you must have seen the latest addition to Pro Tools called Vaadin Designer. With Vaadin Designer you’ll be able to create stunning user interfaces - faster. Vaadin Designer works out of the box with your Vaadin Liferay portlets, as long as you are using a modern 7.5 series version of Vaadin.

From the Spring Data based “Vaadin reference portlet” we also created a version that uses Vaadin Designer to create its most complex view. For Liferay developers, checking out this project and trying out Vaadin Designer is a new entry to the top of your todo list!

Liferay compatible Valo parameters

To complement our full-stack portlet example, we wanted to brag a bit with our Valo theme engine. With just a couple of parameters you can configure it to perfectly match with the latest Liferay 6.2 default theme. Even if you have customized your portal theme to fit into your company’s brand, the tutorial will help you to easily adapt your Vaadin apps to it, as well.

Visit our booth in Liferay Symposium

If you happen to be in Chicago this week, meet our experts at the Vaadin booth - they’ll be happy to help you more with Vaadin + Liferay development and give you a demonstration of the brand new Vaadin Designer.