Vaadin a VerticalLayout

VerticalLayout má ve výchozím nastavení šířku 100% a výšku nedefinovánu (undefined). To znamená, že na šířku se roztáhne do velikosti okna prohlížeče a výška se přizpůsobí velikosti komponent, které obsahuje. Pokud je výška větší než okno prohlížeče, objeví se posuvník.

final VerticalLayout layout = new VerticalLayout();
Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");

layout.addComponents(l1, l2, l3);

setContent(layout);

Pozicování komponent se provádí pomocí metody setComponentAlignment(). Tato metoda se volá až po přidání komponent do layoutu.

final VerticalLayout layout = new VerticalLayout();

Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");

layout.addComponents(l1, l2, l3);
layout.setComponentAlignment(l1, Alignment.MIDDLE_CENTER);
layout.setComponentAlignment(l2, Alignment.TOP_LEFT);
layout.setComponentAlignment(l3, Alignment.BOTTOM_RIGHT);

setContent(layout);

Na přechozím obrázku je vidět, že zarovnání na CENTER zabralo, ale umístění MIDDLE nemělo vliv. Pokud nastavíte vertical layoutu výšku na 100%, zabere celé okno prohlížeče a potom i MIDDLE bude mít význam.

final VerticalLayout layout = new VerticalLayout();
layout.setHeight(100, Unit.PERCENTAGE);

Label l1 = new Label("Ahoj");
Label l2 = new Label("Nazdar");
Label l3 = new Label("Čau");

layout.addComponents(l1, l2, l3);
layout.setComponentAlignment(l1, Alignment.MIDDLE_CENTER);
layout.setComponentAlignment(l2, Alignment.TOP_LEFT);
layout.setComponentAlignment(l3, Alignment.BOTTOM_RIGHT);

setContent(layout);

Problém je ale v tom, že pokud budou komponenty zabírat více místa, neobjeví se posuvník a komponenty se budou překrývat.