Vaadin 7 alpha2 - Redesigned Client Side Component Layouting

Vaadin 7 alpha2 contains significant changes in how the layout of components is done on the client side.

Layouts are managed by the LayoutManager

In Vaadin 6, each component was on its own when sizing and positioning its own content and its child components. There were some helper methods that took care of common patterns and most aspects of the interaction between components but the initiative was still in the hands of individual components. Vaadin 7 introduces a LayoutManager that orchestrates the layouting of different components, asking each component to run its own logic when necessary.

Not supporting antique browsers means less workarounds

Without the burden of older browsers, we have been able to utilize some newer (i.e. introduced about 5 - 10 years ago) CSS features that make positioning and sizing easier. Making all components use box-sizing: border-box (including prefixed versions for some browsers) means that e.g. height: 100% can be used directly without workarounds to compensate for space used by paddings and borders. Being able to use display: inline-block combined with white-space: nowrap instead of float: left allows widgets to position elements on a line without requiring carefully defining the width of the container element.

Explicit pixel conversions have been dropped

The client side layouting in Vaadin 6 required all sizes to be converted to pixels. This meant that all component containers had to be queried for the amount of pixels allocated to each child. It also meant that sizes were always locked with inline styles with no room for adjustments from static CSS files. Another side effect of this was that most components needed to separately track whether its sizing was undefined, fixed or relative. Vaadin 7 instead lets the heights and widths defined in the application code go all the way to the DOM. Relative and undefined sizes are thus managed by the browser, better utilizing optimizations in the browser’s native code.

Vertical and Horizontal Layout Performance Improvements

Reducing the number of reflows

One factor that in some cases significantly hurt performance is when the web browser must do a reflow, updating the positioning and sizing of the entire DOM tree. This happens whenever sizing information is accessed after certain styles have been changed. In Vaadin 7 alpha 2, the LayoutManager attempts to reduce the number of reflows required by reading and caching sizing information separately from updating styles. For optimal efficiency, this requires the components to not do any measuring of their own, but instead using sizing information provided by the LayoutManager.

Three levels of doing layouts

The LayoutManager provides three different ways of layouting content and child components. The simplest way is to just let the browser take care of everything, instructed by static CSS and essentially no inline styling at all. If this is not enough, the LayoutManager lets the component add ElementResizeListeners to DOM elements. The component can then adjust its own inline styling when needed but still let the browser to take care of everything else. The most heavyweight way of layouting is the ManagedLayout which explicitly calculates all aspects of its sizing and positioning. The LayoutManager helps ManagedLayouts by determining in which order to invoke different ManagedLayout to avoid redoing calculations.

For short examples on how to use the new features, check out the Vaadin 7 mini tutorials:

For information on how to migrate from Vaadin 6 to Vaadin 7, see

This is an alpha release so we expect there to be bugs and still expect changes will be made to the API and functionality before the final 7.0.0 release. All your comments on the new features are welcome. Please post all Vaadin 7 related comments in the Vaadin 7 category of the forum.