FormLayout：2个字段的1个标题

Question

我有一个包含FormLayout的视图。

我希望此布局包含2列：一列带有标题，第二列带有输入字段。 我的字段均已标记为必填项，因此所有标题在右侧显示红色的小指示符（输入字段中没有指示符）。

我的问题是我输入的内容之一是日期和时间。我必须将这两个字段显示在一行上，并带有单个标题。

通过将两个组件同时放置在Horizo​​ntalLayout中并在布局上设置标题，可以轻松地将两个组件与标题并排设置。但这不是在标题上而是在每个输入字段上设置了所需的指示器。

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");

form.addComponent(blocDateTime);

这是我得到的（A）与我想要的（B）的图片：

我可以通过在这些字段上设置自定义验证器，检查其值是否为空并在标题上设置样式来获得所需的内容，但是我想知道是否还有更“标准”的方式来做到这一点。

Answer 1

由于只需要一个必需的指示符（红色星号），因此指示您只希望每行只有一个字段。

这意味着您应该创建一个CustomField，将PopupDateField和TextField合并为一个。

Answer 2

您可以创建一个组件的跨度类型对象，然后将日期字段和时间字段添加到跨度对象中，然后将跨度对象添加到表单布局对象中。 您的代码将如下所示：

public bool ContainsMyCollection(object obj)
{
   foreach(var property in obj.GetType().GetProperties())
   {
      //  Idk how to accomplish that
      if(property isTypeof List<BaseClass>)
         return true;
   }
   return false
}

Answer 3

注意：如果可以将Vaadin升级到v7 +，请使用Tatu Lund答案。

我通过在内部布局中设置自定义样式以在标题上显示指示器并在contentcell表单中隐藏所有必需的指示器，解决了我的问题。

FormLayout form = new FormLayout();
HorizontalLayout blocDateTime = new HorizontalLayout();

PopupDateField dateField = new PopupDateField();
TextField timeField =  new TextField();
dateField.setRequired(true);
timeField.setRequired(true);
blocDateTime.addComponent(dateField);
blocDateTime.addComponent(timeField);
blocDateTime.setCaption("caption.dateTime");
blocDateTime.addStyleName("customrequired");

form.addComponent(blocDateTime);

css：

.v-formlayout-captioncell .v-caption-customrequired:after {
  content: "*";
  padding-left: 2px;
  color: red;
}
.v-formlayout-contentcell .v-required-field-indicator {
  display: none;
}