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

Question

我是 Vaadin 的新手，想知道它是否适合我的 webapp 项目迁移需求。实际上，我已经在一个简单的目标上浪费了时间：拥有固定页眉和页脚的布局，以及中间的可滚动内容。我用我想要的东西做了一个非常基本的 fiddle： jsfiddle

这是主要的 Vaadin class 我想出了：

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 独立运行）

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

Vaadin basic layout: fixed header and footer + scrollable content

java

layout

header

footer

vaadin