Базовая раскладка Vaadin: фиксированный колонтитул + прокручиваемый контент
Я новичок в Vaadin и пытаюсь узнать, может ли он удовлетворить мои потребности в миграции проекта веб-приложения. На самом деле я уже теряю время на простую цель: создать макет с фиксированными верхними и нижними колонтитулами и прокручиваемым контентом в середине. Я сделал очень простую скрипку с тем, что я хочу:jsfiddle
Вот основной класс Vaadin, который я придумал:
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);
}
}
Отображаемая страница в порядке при запуске, но когда я прокручиваю вниз, нижний колонтитул также прокручивается (это не исправлено).
На старте:
Когда прокручивается:
Я просмотрел много страниц на эту тему, но так и не нашел правильного ответа. Это кажется довольно сложным в Vaadin, хотя это очень просто в HTML; Ваадин может не соответствовать моим потребностям. Во всяком случае, вы знаете, как я могу добиться такого поведения? Спасибо!