Использование Element API

В этом разделе демонстрируется, как создать компонент, используя Element API и единственный DOM-элемент.

import com.vaadin.flow.component.AbstractSinglePropertyField;
import com.vaadin.flow.component.Synchronize;
import com.vaadin.flow.component.Tag;

@Tag("input") (1)
public class ColorPicker extends AbstractSinglePropertyField<ColorPicker, String> { (2)

    public ColorPicker() {
        super("value", "", false); (3)

        getElement().setAttribute("type", "color"); (4)

        setSynchronizedEvent("change"); (5)
    }

}
1 Определяет корневой элемент, который создается автоматически классом Component и к которому можно получить доступ с помощью метода getElement().
2 В качестве базового класса используется AbstractSinglePropertyField, который подходит для создания компонентов на основе одного свойства элемента.
3 Передача имени свойства элемента, которое ссылается на значение.
4 Установка значения атрибута type.
5 По умолчанию AbstractSinglePropertyField слушает событие value-changed, но <input type=color> запускает change.

После того как компонент реализован, его можно использовать в экранах, например:

@Autowired
private Notifications notifications;

@Subscribe
public void onInit(final InitEvent event) {
    ColorPicker colorPicker = new ColorPicker();
    getContent().add(colorPicker);

    colorPicker.addValueChangeListener(e ->
            notifications.show("Color: " + e.getValue()));
}
color picker