java - logo - menu fijo al hacer scroll css

Diseño básico de Vaadin: encabezado fijo y pie de página+contenido desplazable

Question

Soy nuevo en Vaadin e intento saber si puede satisfacer mis necesidades para una migración de proyecto de aplicaciones 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 es correcta al inicio, pero cuando me desplazo hacia abajo, el pie de página también se desplaza (no está fijo).

En el arranque:

Cuando se desplaza:

Busqué en 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!

Answer 1

Puede usar un Panel para crear un área de contenido del centro desplazable. Ej. (Ver XXX )

@Grapes([
        @Grab(''org.vaadin.spring:spring-boot-vaadin:0.0.3''),
        @Grab(''com.vaadin:vaadin-client-compiled:7.4.0.beta1''),
        @Grab(''com.vaadin:vaadin-themes:7.4.0.beta1''),
       ])
import com.vaadin.ui.*

@org.vaadin.spring.VaadinUI
class MyUI extends UI {

    protected void init(com.vaadin.server.VaadinRequest request) {
        final headerLayout = new VerticalLayout(new Label(''HEADER''))
        final footerLayout = new VerticalLayout(new Label(''FOOTER''))

        final contentLayout = new VerticalLayout()
        80.times{ contentLayout.addComponent(new Button("TEST $it")) }
        // XXX: place the center layout into a panel, which allows scrollbars
        final contentPanel = new Panel(contentLayout)
        contentPanel.setSizeFull()

        // XXX: add the panel instead of the layout
        final mainLayout = new VerticalLayout(headerLayout, contentPanel, footerLayout)
        mainLayout.setSizeFull()
        mainLayout.setExpandRatio(contentPanel, 1)
        setContent(mainLayout)
    }

}

(funciona de forma independiente con la spring run vaadin.groovy )