Vaadin 7.4 Released: Grid Component and Declarative Layouts

With version 7.4 Vaadin have released the next minor update of their web framework. This release introduces two very powerful new features: a brand new table component named Grid and declarative layouts.

Grid Component

With Table being probably one of the most important UI component for any regular Vaadin application, over the course of time it became clear that this component is not as flexible and configurable as it should be. That is the reason why Vaadin decided to write a complete new table component that overcomes these limitations. With Vaadin 7.4 the long-awaited Grid component has been finished and can now be used as a replacement for Table. It features a long list of capabilities, with inline editing, single cell selection, multi-row headers and footers, hardware optimized scrolling, custom cell rendering, support for lazy-loading, and frozen columns being only a few of them.

If you want to try out this new component, you can do so in the Vaadin Sampler.

Another interesting feature about Grid is that you can use the client-side part of this component stand-alone as a table component in a GWT application.

Declarative Layouts

With declarative layouts, you can now arrange your UI components on a Vaadin application using HTML5 templates. Such a template can look like the following example:

<v-panel>
    <v-vertical-layout spacing margin>
        <v-label><h3>Sign In or die!</h3></v-label>
        <v-horizontal-layout spacing>
            <v-text-field caption="Email" />
            <v-password-field caption="Password" />
        </v-horizontal-layout>
        <v-button style-name="primary">Sign In</v-button>
    </v-vertical-layout>
</v-panel>

This helps you better separate UI from logic. For a brief roundup of declarative layouts with Vaadin read the blog post Vaadin Declarative 101.

What’s More

Besides these useful new features, a lot more small enhancements have been made:

Field components can be cleared with Field.clear()
New annotations @Viewport, @ViewportGeneratorClass, and NoLayout for responsive layouts and improved rendering speed
Component captions can be rendered with HTML
More standard converters, and converters can be used to convert item IDs into a presentation model
New implementation of the Container interface GeneratedPropertyContainer: allows generated properties
And a whole lot of more bug fixes