java - 布局可以成为 Vaadin Window 中的根组件吗？

Question

我只是在探索 Vaadin 7，一开始就遇到墙让我有点沮丧。有 Swing 经验的我很高兴发现 Vaadin 布局非常简单，它们就像其他组件一样(根据类层次结构，它们实际上是组件)。但是，我在构建我的第一个窗口时遇到了问题。假设我有一个这样组成的 CustomComponent:

VerticalLayout
|
--TextArea
|
--Button

代码中的内容如下所示:

public class SOComplicatedComponent extends CustomComponent {

    private VerticalLayout mainLayout;
    private TextArea textArea;
    private Button button;

    public SOComplicatedComponent() {
        buildMainLayout();
        setCompositionRoot(mainLayout);
    }

    private VerticalLayout buildMainLayout() {
        // common part: create layout
        mainLayout = new VerticalLayout();
        mainLayout.setWidth("100%");
        mainLayout.setHeight("100%");

        // top-level component properties
        setWidth("100.0%");
        setHeight("100.0%");

        // textArea
        textArea = new TextArea();
        textArea.setValue("hey, this button is supposed to be under me!");
        textArea.setSizeUndefined();
        mainLayout.addComponent(textArea);

        //button
        button = new Button("Ooops");
        button.setSizeUndefined();
        mainLayout.addComponent(button);

        return mainLayout;
    }

}

然后我按以下方式构造一个窗口:

public class MyUI extends UI{

    @Override
    protected void init(VaadinRequest request) {
        ...
        Window window = new Window("Help me SO", new SOComplicatedComponent());
        addWindow();
    }
}

结果，我得到了一个 TextArea 和 Button 重叠的窗口。当我调整窗口大小时，内容拉伸(stretch)并且布局变得正常，但是我认为窗口应该自动适应内容大小，不是吗？

好的，是时候进行 final 了

问题

我希望按钮位于我的窗口中的 TextArea 下方，并使窗口大小自动适合其内容。在 Vaadin 7 中实现该目标的最合适方法是什么？

谢谢

Answer 1

在此特定实例中，不需要单独的窗口 - 在 Vaadin 7 中，窗口实际上是主 UI 的子窗口；根据您的意见，您确实想要一个 float 窗口。这很酷——但是 UI 确实应该有一些内容，即使它是空的(否则渲染看起来有点奇怪)。所以，你应该能够做到

public class MyUI extends UI {

  @Override
  protected void init(VaadinRequest request) {
    // You need to have some content on the UI, even if it's empty - otherwise it looks odd
    // Here, I'm just adding an empty layout
    VerticalLayout content = new VerticalLayout();
    content.setSizeFull();
    setContent(content);

    // Adding a child window, and centering it for kicks
    Window window = new Window("Help me SO", new SOComplicatedComponent());
    window.center();
    addWindow(window);

  }
}

AbsoluteLayout要求您指定组件的位置。对于简单的垂直布局(即 Button 上方的 TextField)，您通常会使用 VerticalLayout

另外，setSizeFull 的意思是“让这个组件占用它容器允许的所有空间”——当您希望父组件使子组件尽可能大而不是更大时，这会有点困惑。我认为您真的也想对 CustomComponent 使用“setSizeUndefined”。所以，将所有这些放在一起应该会给你这个:

public class SOComplicatedComponent extends CustomComponent {

  private VerticalLayout mainLayout;
  private TextArea textArea;
  private Button button;

  public SOComplicatedComponent() {
    buildMainLayout();
    setCompositionRoot(mainLayout);
  }

  private VerticalLayout buildMainLayout() {
    // common part: create layout
    mainLayout = new VerticalLayout();
    mainLayout.setSpacing(true);
    mainLayout.setMargin(true);

    // top-level component properties
    /* CSA : SizeUndefined means "take as much space as my content needs" */
    setSizeUndefined();

    // textArea
    textArea = new TextArea();
    textArea.setValue("hey, this button is supposed to be under me!");
    textArea.setSizeUndefined();
    mainLayout.addComponent(textArea);

    //button
    button = new Button("Ooops");
    button.setSizeUndefined();
    mainLayout.addComponent(button);

    return mainLayout;
  }

}

对我来说，呈现如下: