Question

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

我需要创建一个视图，它将具有静态左侧菜单和顶部栏（常量，每页都可见）。唯一会改变内容的是中间组件 - 它应该是可滚动的。

我的设计是：

自定义组件，它汇集了所有内容。是否具有顶部和左侧菜单的绝对大小。
左侧菜单的垂直布局和上级菜单的水平布局
中间组件的面板，因为Panel应该支持滚动。

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

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

非常感谢，

Answer 1

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

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

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

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

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的特定宽度和高度。您没有发布详细信息和代码，因此我们只能推测。

Vaadin - 哪些组件用于组织布局

1 个答案: