Vaadin基本布局：固定页眉和页脚+可滚动内容

我是Vaadin的新手，并试图了解它是否适​​合我对webapp项目迁移的需求。 实际上我已经在一个简单的目标上浪费了我的时间：拥有固定页眉和页脚的布局，以及中间的可滚动内容。 我用我想要的东西做了一个非常基本的小提琴： 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中非常简单; Vaadin可能不适合我的需要。 无论如何，你知道我怎么能实现这种行为？ 谢谢！

Answer 1

您可以使用Panel创建可滚动的中心内容区域。 请参阅下面的示例。

要使面板工作，组件层次结构中的所有内容必须是setSizeFull （或等效的），并且面板的内容不得（在示例中mainLayout和contentPanel为100％，但contentLayout不是（隐式））

 @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) } } 

（独立spring run vaadin.groovy ）