Поля ввода Vaadin со встроенными кнопками значков для помощи / информации, проверки и помощников по вводу

Мне нужно найти надежный способ в Vaadin 8 (или новее) добавлять кнопки значков в поля, текстовые области и даже флажки и, возможно, метки.

Есть ли уже встроенная поддержка, которую я мог бы использовать? Я заметил, например, как Ваадин показывает ошибки компонентов с красным восклицательным знаком, который появляется рядом с полем - этот механизм каким-то образом доступен и расширяем?

Вы реализовали нечто подобное? Не могли бы вы поделиться некоторыми общими стратегическими советами, как этого добиться?

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

Они будут использоваться, чтобы показать:

  • кнопка справки, которая вызывает справку
  • кнопка проверки (предупреждение или ошибка), которая показывает информацию проверки
  • вспомогательная кнопка ввода, помогающая выбрать ввод (например, всплывающее окно календаря или другого диалогового окна выбора объекта)
  • кнопка очистки для очистки ввода

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


person Reto Höhener    schedule 26.08.2017    source источник
comment
... icons would show inside the field, I could live with them being shown next to the input. Вы пробовали добавлять стандартные кнопки рядом с входами? С помощью CSS вы можете объединить их в один макет: посмотрите этот ответ на пару примеров: stackoverflow.com/questions/44007835/   -  person default locale    schedule 26.08.2017


Ответы (2)


В своем вопросе вы указали "... значки кнопок для полей, текстовых областей ...".

Для полей лучше использовать com.vaadin.ui.CustomField вместо Composite или CustomComponent.

person rmuller    schedule 28.08.2017
comment
Спасибо, я не знал об этом классе. Я взгляну. - person Reto Höhener; 28.08.2017

Я решил создавать собственные компоненты, используя Composite или CustomComponent.

Корнем пользовательского компонента является HorizontalLayout, где я помещаю нужные кнопки рядом с полем ввода.

Этот подход также позволит мне обернуть Label, ComboBox, CheckBox, DateField, PasswordField и т. Д.

Его также можно расширить, если я решу добавить дополнительные маркеры, например, грязный / измененный маркер или требуемый маркер ввода.

person Reto Höhener    schedule 28.08.2017