Vaadin - 用于组织布局的组件答案

【问题标题】：Vaadin - which components use to organize layoutVaadin - 用于组织布局的组件
【发布时间】：2013-12-29 22:54:06
【问题描述】：

我对在 Vaadin 7 中布局组件的可能性感到困惑 - 直觉告诉我只使用布局 - 但是也有可用的面板或组件。

我需要创建具有静态左侧菜单和顶部栏的视图（恒定大小，在每个页面上可见）。唯一会改变内容的是中间组件——它应该是可滚动的。

因此我的设计是：

自定义组件，组装一切。 Is 具有顶部和左侧菜单的绝对大小。
左侧菜单垂直布局，上方菜单水平布局
中间组件的面板，因为面板应该支持滚动。

在面板内部，我放置了 CssLayout 的内容不适合页面。预期的行为是会有一个滚动条（最好在浏览器上，但我想它会在面板上）。但实际发生的情况是，只有适合屏幕的部分可见，其余部分被剪切。 CssLayout 是 sizeFull 和面板默认值，但我也尝试了其他组合，但没有任何帮助。

如何组合布局以使中间面板可滚动（如果需要）以及具有绝对大小的顶部和左侧？

非常感谢，

【问题讨论】：

“正确”和“良好”是什么意思？也许您应该将问题集中在您遇到的实际问题上。
谢谢，我编辑了这个问题，希望现在更合适。
你能解释一下你到底是什么问题吗？您还必须添加一些有关该问题的代码。
@maryjane MCVE

标签： layout vaadin vaadin7

【解决方案1】：

在 Vaadin 7 和 8 中，您通常使用 Layout 实现之一在 UI 子类中排列小部件。例如，VerticalLayout、HorizontalLayout 和 GridLayout。对于像素定位，请使用AbsoluteLayout。当然，这些可以嵌套在另一个中。但是不要对嵌套发疯，因为它可能会导致运行时的 HTML/CSS 过于复杂。

Panel 类与doc says 一样，是一个特殊的容器。它只包含一个组件，通常是另一个容器，例如Layout。 Panel 带有一个边框和一个显示其caption 属性的标题栏。这看起来像一个子窗口。

正如您所提到的，Panel 支持滚动。但请记住，任何使用Layout 定义的网页显然也支持滚动。

这是一个完整的示例应用程序，显示了 VerticalLayout 中的一组 TextField 小部件。

package com.basilbourque.example;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

import javax.servlet.annotation.WebServlet;
import java.time.Instant;

/**
 * This UI is the application entry point. A UI may either represent a browser window
 * (or tab) or some part of an HTML page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be
 * overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme ( "mytheme" )
public class MyUI extends UI {

    @Override
    protected void init ( VaadinRequest vaadinRequest ) {
        final VerticalLayout layout = new VerticalLayout();

        for ( int i = 1 ; i <= 100 ; i++ ) {
            TextField textField = new TextField( String.format( "%3d" , i ) );
            textField.setWidth( 17 , Unit.EM );  // Widen the field to fully display our contents.
            textField.setValue( Instant.now().toString() );
            layout.addComponents( textField );
        }

        setContent( layout );
    }

    @WebServlet ( urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true )
    @VaadinServletConfiguration ( ui = MyUI.class, productionMode = false )
    public static class MyUIServlet extends VaadinServlet {
    }
}

至于您对导航面板、按钮/工具栏等嵌套VerticalLayout 和HorizontalLayout 的想法……

Vaadin 7 和 8：绝对正确，而且是个好主意。有时GridLayout 也适用于此。
Vaadin 10：也可能是个好主意。或者您可能想探索使用新的 CSS3 功能 flexbox 和 Grid Layout。

至于CssLayout 在Panel 中的问题，我也很少使用。我怀疑问题在于没有正确定义CssLayout 的特定宽度和高度。您没有发布详细信息和代码，所以我们只能推测。

【讨论】：