FormLayout：2 个字段的 1 个标题

Question

我有一个包含 FormLayout 的视图。

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

我的问题是我的输入之一是日期和时间。我必须在一行中显示这 2 个字段，并带有一个标题。

我可以通过将两个组件都放在 HorizontalLayout 中并在布局上设置标题来轻松地并排设置两个组件和一个标题。但这不是在标题上而是在每个输入字段上设置所需的指示符。

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) 的对比图：

我可以通过在这些字段上设置自定义验证器来获得我想要的东西，检查它们的值是否为空并在标题上设置样式，但我想知道是否有更多 "standard" 方法来做到这一点.

Answer 1

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

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

Answer 2

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

FormLayout bloc = new FormLayout();

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

Answer 3

注意：如果可以将Vaadin升级到v7+，使用大图隆德回答。

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

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;
}

FormLayout：2 个字段的 1 个标题

FormLayout: 1 caption for 2 fields

java

vaadin

vaadin6