Vaadin基本布局：固定页眉和页脚+可滚动内容 [英] Vaadin basic layout: fixed header and footer + scrollable content

问题描述

我是Vaadin的新手，并试图了解它是否能满足我对webapp项目迁移的需求。
实际上，我已经为了一个简单的目标而放弃了我的时间：拥有固定页眉和页脚的布局，以及中间的可滚动内容。
我用我想要的做了一个非常基本的小提琴：
jsfiddle

以下是我提出的主要Vaadin课程：

  public类MyVaadinUI扩展UI {
 
 //属性
 
 @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请求）{
 
 buildMainLayout（）; 
 
 
 private void buildMainLayout（）{
 
 final VerticalLayout mainLayout = new VerticalLayout（）; 
 mainLayout.setSizeFull（）; 
 
 // HEADER 
 final VerticalLayout headerLayout = new VerticalLayout（）; 
最终资源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）; 
} 
  

}

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

启动时：

当滚动：

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

解决方案

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

要使面板工作，组件层次结构中的所有内容必须为 setSizeFull ），并且面板的内容不得（例如 mainLayout 和 contentPanel ）为100％，但<$ c


$ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $' 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 {content Layout.addComponent（new Button（TEST $ it））}
// XXX：将中央布局放置在一个面板中，该面板允许滚动条
final contentPanel = new Panel（contentLayout）
contentPanel.setSizeFull（）

// XXX：添加面板而不是布局
final mainLayout = new VerticalLayout（headerLayout，contentPanel，footerLayout）
mainLayout.setSizeFull（）
mainLayout.setExpandRatio（contentPanel，1）
setContent（mainLayout）
}

}

（与> spring run vaadin.groovy >独立运行）

I am new to Vaadin and trying to know if it can suit my needs for a webapp project migration. Actually I'm already loosing my time on a simple goal: to have a layout with fixed headers and footers, and a scrollable content in the middle. I made a very basic fiddle with what I want: jsfiddle

Here is the main Vaadin class I came up with:

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

}

The displayed page is OK on startup, but when I scroll down, the footer also scrolls (it is not fixed).

On startup:

When scrolled:

I browsed a lot of pages on this topic, but I did never see any correct answer. This seems to be rather complicated in Vaadin, although it is very simple in HTML; Vaadin may not suit my needs. Anyway, do you know how can I achieve this behaviour? Thanks!

解决方案

You can use a Panel to create a scrollable center content area. See the example below.

For the panel to work, everything in the component hierarchy must be setSizeFull (or equivalent) and the content of the panel must not (in the example mainLayout and contentPanel are 100%, but contentLayout is not (implicit))

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

}

(runs standalone with spring run vaadin.groovy)

这篇关于Vaadin基本布局：固定页眉和页脚+可滚动内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！