如何像 vaadin 6 中的表单一样在 vaadin 7 中布局 FormLayout？答案

【问题标题】：How to layout a FormLayout in vaadin 7 like a Form in vaadin 6?如何像 vaadin 6 中的表单一样在 vaadin 7 中布局 FormLayout？
【发布时间】：2013-04-08 17:02:17
【问题描述】：

我正在尝试将应用程序从 vaadin 6.8 迁移到 vaadin 7。由于 Form 类在 vaadin 7 中已被弃用，因此我尝试使用 FieldGroup 构建我的表单并使用 FormLayout 呈现它们。建筑不是问题，但布局不是那么顺利。现在我有两个问题。

如何在整个表单的顶部显示表单描述？我希望它的宽度完全相同，既不宽也不只在第二列中。
如何添加按钮（确定和取消），使它们彼此相邻，而不仅仅是在第二列？就像旧 Form 类中的页脚一样。

这可以通过 FormLayout 实现还是我使用了其他布局？

谢谢
拉斐尔

【问题讨论】：

标签： layout vaadin

【解决方案1】：

注意：我实际上是在上周才开始调查 V7，所以请谨慎回复...

这两个问题都源于 FormLayout 从未提供页眉和页脚这一事实 - Form 类提供了。

我建议创建您自己的具有页眉布局、FormLayout 和页脚布局的 Form 等价物，例如（没试过，mainLaout可能需要使用GridLayout而不是VerticalLayout）

public class FormComponent extends CustomComponent {
  private Layout mainLayout;

  protected Layout header;
  protected Layout central;
  protected Layout footer;

  public FormComponent() {
    init(new HorizontalLayout(), new FormLayout(), new HorizontalLayout());
  }

  protected void init(Layout header, Layout central, Layout footer) {
    this.footer = footer;
    this.header = header;
    this.central = central;

    mainLayout = new VerticalLayout();
    mainLayout.addComponent(header);
    mainLayout.addComponent(central);
    mainLayout.addComponent(footer);

    setCompositionRoot(mainLayout);
    setSizeUndefined();
  }

  public Layout getHeader() {
    return header;
  }

  public Layout getCentral() {
    return central;
  }

  public Layout getFooter() {
    return footer;
  }
}

【讨论】：

谢谢。我已经用这种方式教过一些东西，但希望有一个内置的解决方案。如果真的没有开箱即用的东西，我会再等一会儿，我会接受你的回答。

【解决方案2】：

在 Vaadin 7 中，没有与 Vaadin 6 Form 组件等效的内置组件。因此，您必须创建自己的。
创建新的 HorizontalLayout 并在其中添加 OK 和 Cancel 按钮。然后将该 HorizontalLayout 添加到您的 FormLayout。

【讨论】：