1

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

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

因此，我的设计是：

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

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

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

非常感谢，

4

1 回答 1

0

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

Panel正如文档所说，该类是一个特殊的容器。它只包含一个组件，通常是另一个容器，例如Layout. 其Panel自身带有一个边框和一个显示其caption属性的标题栏。这看起来像一个子窗口。

正如您所提到的， aPanel支持滚动。但请记住，任何用 a 定义的网页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：绝对正确，而且是个好主意。有时 aGridLayout也很有意义。
  • Vaadin 10：也可能是个好主意。或者您可能想探索使用新的 CSS3 功能flexbox和Grid Layout。

至于你的CssLayoutinside a问题Panel，我也很少使用。我怀疑问题在于没有正确定义CssLayout. 您没有发布详细信息和代码，因此我们只能推测。

于 2018-08-05T18:42:54.260 回答