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

我是新来Vaadin并试图了解它是否能满足一个webapp项目迁移我的需求。其实我已经失去一个简单的目标，我的时间：有固定的页眉和页脚，并在中间的滚动内容的布局。我做了我想要的一个非常基本的小提琴： jsfiddle Vaadin基本布局：固定页眉和页脚+滚动内容

这里是我想出了主要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); 
}

}

显示的页面是在启动时确定，但当我向下滚动时，页脚也滚动（它不是固定的）。

在启动时： startup

当滚动：

scrolled down

我浏览了很多关于这个话题的页面，但我从来没有看到任何正确的答案。这在Vaadin中似乎相当复杂，尽管它在HTML中非常简单; Vaadin可能不适合我的需求。无论如何，你知道我该如何实现这种行为？谢谢！

来源

2015-01-14 toni07

，如果你喜欢用HTML摆弄，那么也许一个CustomLayout将有助于（见http://stackoverflow.com/questions/9563406/how-to -use-HTML模板与 - vaadin＃9564654）。 – cfrick

嗨，谢谢你的回复，但实际上我不想为我的第一个要求去定制。 – toni07

可以使用Panel创建一个可滚动的中心内容区域。例如。（见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) 
    } 

}

（单独运行与spring run vaadin.groovy）

来源

2015-01-14 11:44:59 cfrick

谢谢！这必须被转换为Java（不难...），但它工作得很好！我看到这里的主要观点是将contentLayout封装到面板中，因为我尝试了与没有Panel的代码相同的代码，并且它不起作用。很奇怪，我无法在任何地方找到答案。 – toni07

。我在有趣的部分添加了一些评论。布局可能只会被重新计算，如果UI也有变化（有时取决于主题），他们可能会有奇怪的溢出行为。另一种选择是使用'CSSLayout'并处理CSS中的设置。面板很棒，如果你不喜欢浏览器端的话。 – cfrick

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

回答

相关问题