FormLayout: 1 подпись для 2 полей - PullRequest
Новая
       13

FormLayout: 1 подпись для 2 полей

0 голосов
/ 02 июля 2018

У меня есть представление, содержащее FormLayout.

Я хочу, чтобы этот макет содержал 2 столбца: один с заголовками, а второй - с полями ввода. Все мои поля помечены как обязательные, поэтому на всех заголовках справа есть маленький красный индикатор (а в полях ввода нет индикатора).

Моя проблема в том, что одним из моих входных данных является дата и время. Я должен отобразить эти 2 поля в одной строке с одним заголовком.

Я могу легко установить 2 компонента рядом с надписью, поместив их в горизонтальный макет и установив заголовок на макете. Но при этом требуемый индикатор устанавливается не на заголовке, а на каждом поле ввода. 

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):

enter image description here

Я мог бы получить то, что хотел, установив пользовательский валидатор для этих полей, проверив, является ли их значение пустым, и установив стиль для заголовка, но мне интересно, есть ли более «стандартный» способ сделать это.

Ответы [ 3 ]

0 голосов
/ 03 июля 2018

Вы можете создать один объект компонента типа 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");
0 голосов
/ 26 июля 2018

Примечание: если вы можете обновить Vaadin до v7 +, используйте ответ Tatu Lund.

Я решил свою проблему, установив собственный стиль для внутреннего макета, чтобы индикатор отображался в заголовке и скрывал все необходимые индикаторы в форме содержимого. 

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;
}
0 голосов
/ 02 июля 2018

Поскольку вам нужен только один обязательный индикатор (красная звездочка), это означает, что вы хотите, чтобы в каждой строке было только одно поле.

Это означает, что вы должны создать CustomField, который объединит PopupDateField и TextField в одно.

...