Vaadin 7.4 released

Welcome to the next 7-series release. Even though this is called a "minor release", Vaadin 7.4 includes some enhancements which are actually making it a huge step forward.

The Grid - for all your data

First things first. The Table component has been one of the most prominent components in Vaadin Framework. There is virtually no business application that does not present a list of tabular data somehow, somewhere.

<style>
 #grid {
 	background-color: white;
 	height: 300px;
 	width: 636px;
 }
 .char, .index {
 	font-size: 12px; 	
 	text-overflow: clip;
 }
 .v-grid-cell {
 	font-size: 12px; 	
 }
 a, a:visited {
 	text-decoration: none !important;
 	color: #00b4f0 !important;
 }
 a.button, a.button:visited {
 	text-decoration: none !important;
 	color: #fff !important;
 }
</style>

Vaadin Grid is the next generation of the Table component, using fast and hardware optimized scrolling to present a lot of data in grid format. Combine with inline editing, filters, sorting, custom cell rendering and style it using the Valo theme engine for your needs.

One of the interesting differences to Table is that Grid can also be used solely on the client side. Not only for offline Vaadin applications, but also separately in pure GWT applications. This is what you actually see in above sample: a client-side Vaadin Grid rendering without a backend.

Learn more about the brand new Grid at vaadin.com/grid

Declarative UI syntax

The default way to build layouts and component hierarchies in Vaadin has been programmatically, in Java. The component encapsulation brings reusability, but if you wish to have more logical encapsulation (opposed to simple layout structure encapsulation), you can easily end up in rather deep layout structures within a single Java file.

If you are a very strict programmer, you can be declarative in your layouts in pure Java language, but if you are  like me, “real” declarative UI means something like XML layout specifications. And that is exactly what Vaadin 7.4 brings us: HTML-based layout syntax

for Vaadin components.

<v-vertical-layout width="100%" spacing>
   <v-text-field caption="Name" width="100%" />
   <v-text-field caption="Email" width="100%" />
   <v-button caption="Save" />
</v-vertical-layout>

One obvious benefit is that now you can see the layout structure. Whether you have a complicated form or a fixed positioned component, this really helps you to better see what is the structure and why your layout expands like it does.

The second benefit is that declarative user interfaces are by nature more static and it is usually a good idea to keep buttons, lists and other components in the same place. It helps us to focus more on the content and less on how to use the UI.

To learn more of how to use this approach in your application, see the walk-through ‘Declarative 101’ blogpost.

Get Vaadin 7.4

If you are a Vaadin 7.3 user already, there should be no reason not to start using Vaadin 7.4 as well. Whether you try out the new declarative Design or Grid, there are a lot of other things as well, like:

• HTML support in all component captions.

• Field.clear() to simply clear a field value.

• @Viewport and @ViewportGeneratorClass annotations to easily configure UIs for different browsers and screen sizes.

• @NoLayout for RPC method or state property to avoid unnecessary layout calculations in components.