Vaadin 7.3 has arrived. It has been a long run starting from the development of a new Java-based Sass compiler, but today you can enjoy the results.
Valo - theme above all others
Valo is the name of the new visual theme in Vaadin 7.3.0. The Finnish word “valo” stands for “light” and the name reflects the attitude we had when building the new visual language – from loading at the speed of light to customizability and to the new bright color scheme.
While very good-looking in itself, Valo is mainly designed to be configured using a number of predefined variables. You have full control of changing and fine tuning everything you see on the screen and see a coherent result where everything from spacing to color scheme is well thought through.
CSS for Java developers
What is the fuss about Sass? What is it anyway, and how does it help me as a Java developer? Let’s take a look.
Sass stands for “syntactically awesome stylesheets” and it is a precompiler to CSS3, natively supported by web browsers. It makes CSS more “awesome” by adding features like mixins, variables and functions. From a Vaadin developer’s point-of-view, it makes everything more modular and aligned with the component framework itself.
In practice you can more easily separate the visual stuff into SCSS files and leave your Java files clean of anything else but application logic. In addition, Sass code is much much more compact than barebone CSS.
Take, for example, the most basic element in your application: the Button component.
Most of the things you can simply change by modifying the Valo variables. And if that is not enough, you can always add a few lines of SCSS to make it even more like your brand.
Learn more about the new possibilities at vaadin.com/valo
On-the-fly theme switching
The default theme is still “reindeer” because we didn’t want to break your application, when you upgrade to Vaadin 7.3. But it is easy to upgrade to Valo.
In Vaadin you have specified the theme for your UI using the annotation:
@Theme("my-awesome-theme") or set the theme in the UI initialization, like
setTheme("my-awesome-theme"); As a new thing in 7.3 you can now change the theme on-the-fly - no page reload needed!
This opens up more possibilities for building customer experience for multitenant applications or even letting all your users switch between different themes.
New Eclipse plugin
The Vaadin plugin for Eclipse has also been updated to reflect the changes. If you want to create a new theme, just use the Valo-template as a starting point for your own custom theme.
Go to marketplace.eclipse.org/content/vaadin-plugin-eclipse or drag the following "Install" button directly to your Eclipse toolbar.
For others Vaadin 7.3.0 is available in Maven (for existing projects update the property to <vaadin.version>7.3.0</vaadin.version>), but you also find the download and IDE specific instructions here. The source code is available in GitHub.