Vaadin 7.3 Introduces New Valo Theme

A new minor release of the Vaadin Framework has been released. Besides a long list of bug fixes, there’s the one noteworthy and important new feature this version has to offer: the brand-new theme Valo.

The Valo theme

Valo, which is the Finnish word for light, is a fully customizable theme that consequently builds on the modular and configurable features of the SASS language. That is, you can fine-tune the general appearance of the theme (such as border roundness, colors, font types, bevels, shadows, etc.) just by tweaking the corresponding SASS variables. By that, you get a full-blown theme which supports a responsive design out of the box and which additionally lets you adapt the theme’s appearance to the specific needs of your own application. Have a look at the theme demo which lets you switch through different configurations of the same theme (note the theme switcher in the upper right corner of the demo).

Changing the theme during runtime

Another small but nice advancement for the framework is the resurrection of the setTheme() method. While it was possible in Vaadin 6 to switch the theme during runtime, this option has not been available in the current version of the framework. In Vaadin 7, the current theme had to be statically defined with the @Theme annotation (see An Overview of Vaadin 7 Annotations). Vaadin 7.3 now allows changing the current theme dynamically with UI.setTheme() without the need of a page reload. Again, check this out with the Valo theme demo.

How to use Valo

The Vaadin team has also been busy on the documentation parts. You can find a new section about Valo in the Book of Vaadin, a Wiki page about how to use Valo and how to switch the current theme on-the-fly. And of course there is the Valo intro page.

Short URL for this post:

About Roland Krüger

Software Engineer at Trivadis / Orientation in Objects GmbH. Follow me on Twitter.
This entry was posted in Java Web Frameworks and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *