1

我只是在探索 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 重叠的窗口。当我调整窗口大小时，内容拉伸并且布局变得正常，但是我认为窗口应该自动适应内容大小，不是吗？

好的，决赛时间到了

问题

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

谢谢

4

1 回答 1

3

在这种特殊情况下，不需要单独的 Window - 在 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要求您指定组件的位置。对于简单的垂直布局（即按钮上方的 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;
  }

}

对我来说，呈现如下： 示例图像

于 2013-05-07T08:33:37.233 回答