Diseño básico de Vaadin: encabezado y pie de página fijos + contenido desplazable
Soy nuevo en Vaadin e intento saber si puede satisfacer mis necesidades de migración de un proyecto de aplicación web. En realidad, ya estoy perdiendo mi tiempo en un objetivo simple: tener un diseño con encabezados y pies de página fijos, y un contenido desplazable en el medio. Hice un violín muy básico con lo que quiero:jsfiddle
Aquí está la clase principal de Vaadin que se me ocurrió:
public class MyVaadinUI extends UI {
// attributes
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "testvaadin.aep.com.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}
@Override
protected void init(VaadinRequest request) {
buildMainLayout();
}
private void buildMainLayout() {
final VerticalLayout mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
//HEADER
final VerticalLayout headerLayout = new VerticalLayout();
final Resource res = new ThemeResource("img/logo.png");
final Image image = new Image(null, res);
headerLayout.addComponent(image);
//CONTENT
final VerticalLayout contentLayout = new VerticalLayout();
for(int i=0; i<80; i++){
contentLayout.addComponent(new Button("TEST " + i));
}
//FOOTER
final VerticalLayout footerLayout = new VerticalLayout();
footerLayout.addComponent(new Label("--------------------------- footer --------------------------"));
mainLayout.addComponent(headerLayout);
mainLayout.addComponent(contentLayout);
mainLayout.addComponent(footerLayout);
mainLayout.setExpandRatio(contentLayout, 1);
setContent(mainLayout);
}
}
La página que se muestra está bien al inicio, pero cuando me desplazo hacia abajo, el pie de página también se desplaza (no está arreglado).
En el arranque:
Cuando se desplaza:
Hojeé muchas páginas sobre este tema, pero nunca vi una respuesta correcta. Esto parece ser bastante complicado en Vaadin, aunque es muy simple en HTML; Vaadin puede no satisfacer mis necesidades. De todos modos, ¿sabes cómo puedo lograr este comportamiento? ¡Gracias!