Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Will Vaadin 7 be addressing layout issues?

Imran Ahmed
1 decade ago Feb 07, 2012 11:54pm

I was very excited to see Vaadin 7 alpha out of the door.

1. Will Vaadin 7 be addressing the serious layout issues that exist in 6?

2. Will Vaadin 7 be getting rid of the inline hard coding of heights and widths that plague the layouts? Will it allow developers to use relative(%) based sizing?

Leif Åstrand
1 decade ago Feb 08, 2012 10:07am
Danny Roest
1 decade ago Feb 08, 2012 10:36am
Leif Åstrand
1 decade ago Feb 08, 2012 12:25pm
Danny Roest
1 decade ago Feb 09, 2012 10:50am
Imran Ahmed
1 decade ago Feb 17, 2012 10:43pm
Leif Åstrand
1 decade ago Feb 20, 2012 9:10am
Mikael Simalango
1 decade ago Mar 20, 2012 6:23am
Jouni Koivuviita
1 decade ago Mar 20, 2012 10:07am
Leif Åstrand
1 decade ago Mar 20, 2012 11:09am

Mikael Fernandus Simalango: Removing unnecessary size calculation is such exciting news to me. It has been said that the new layout API will be available from alpha 2 release and onward. I don't really have a clear view as how the process is going on since I haven't fiddled with Vaadin 7 codebase. However, if some spoilers are worth telling about the distinct difference between version 6 and 7, it may have added more into the excitement.

We are steadily approaching something that it would be meaningful to release as alpha2. According to the initial plans, alpha2 should have been released several weeks ago. Along the way we did however realize that we needed to refactor additional parts of the client side API in order to provide a meaningful set of features that could make it all the way to a final Vaadin 7 release without extensive structural changes.

Regarding the layouts, the status is that we have a new framework in place which should enable most of the features that you and others in this thread have been hoping for, but those actual features are not yet fully implemented. We have not yet managed to produce any significant improvements to performance as we are first focusing on making a usable API and getting all core widgets to work as expected with the new framework. There is however potential for significant performance improvements once we start looking in that direction.

Among the things I want to know are how a series-of-boxes model (horizontal or vertical, nested or sibling-like) will be rendered in Vaadin 7. In Vaadin 6, the sizes of the boxes should be set explicitly which then come out as the inline styles of the generated divs. I wonder if explicit sizing is now optional in Vaadin 7.

The new framework enables making widgets what doesn't require on any inline styling at all as long as no explicit sizes are defined on the server. Instead it could get all dimensions from static CSS in combination with its own contents (e.g. Label width varying with text length and font size). For a row of horizontal or vertical boxes, there are essentially the same two options as in Vaadin 6; Horizontal/VerticalLayout or CssLayout.

For CssLayout, the new framework should eliminate most of the issues where e.g. nesting multiple CssLayouts might cause undesired effects. It should also be quite easy to change between horizontal and vertical layouting by changing between display: block and display: inline-block for the children. Furthermore, we are considering removing the extra wrapper levels from CssLayout for the theming changes for alpha3 but we haven't yet determined how to manage backwards compatibility.

With HoriztonalLayout and VerticalLayout, we are currently using two different client side implementations. The first is very simple and fully functional with support for all existing features without any custom tweaks but it is based on explicit calculations and absolute positioning. The other implementation lets the browser take care of the layouting whenever possible but we're still having issues with some of the features that are not easily implemented in the browser, e.g. some aspects of expansion rations and some alignment features. Alpha 2 will most likely ship with the simpler layout based on absolute positioning but we will hopefully replace it with the other implementation in some upcoming alpha release as it should give significantly better performance in most cases.

Additionally, I'd like to know whether the border and margin glitch in Vaadin 6 will have been resolved. The number of generated divs also adds into my curiousity, but since it's been told that reducing DOM tree is currently not a top priority, I try to draw my own conjecture regarding the improvement being worked on.

All problems with borders and margins should be fixed on the framework level, but there might still be glitches inside some components until they have all been properly migrated to benefit from the new layout framework.

There is still much unclear regarding the DOM tree depth. E.g. the HorizontalLayout and VerticalLayout implementations with absolute positioning only use one level of wrappers whereas the final DOM structure for the other implementation depends on what is required to get all features working in all supported browsers using minimal calculations and inline css.

Last updated on Mar, 20th 2012
Mikael Simalango
1 decade ago Mar 22, 2012 6:29am