Question

我正在探索Vaadin 7，我在开始时面对一堵墙有点沮丧。在Swing方面经验我很高兴发现Vaadin布局非常简单，它们就像其他组件一样（根据类层次结构，它们实际上是组件）。但是，我在构建第一个Window时遇到了问题。所以我要说我有一个这样组成的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;
    }

}

然后我按照以下方式构建一个Window：

public class MyUI extends UI{

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

结果我得到一个TextArea和Button重叠的窗口。当我调整窗口大小时，内容拉伸和布局就好了，但我认为窗口应该自动适合内容大小，不是吗？

好的，最后的时间

问题

我希望Button位于我的Window中的TextArea下，并使Window大小自动适合其内容。在Vaadin 7中实现这一目标的最恰当的方法是什么？

由于

Answer 1

在这个特定的例子中，不需要单独的窗口 - 在Vaadin 7中，Windows实际上是主UI的子窗口;根据你的评论，你确实想要一个浮动窗口。这很酷 - 但是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;
  }

}

对我来说，这样呈现： Example Image

布局可以作为Vaadin窗口中的根组件吗？

1 个答案: