Field

Field mixin for Vaadin 10+ components

Mixin interface that allows using any Vaadin 10+ component as a field that can be used with Binder.

To use, implement the Field interface and call one of the static init methods.

Sample code

/**
 * Example showing how to use an element property value as the field value.
 */
@Tag("input")
public class TextField extends Component implements Field<TextField, String> {
    private static final String DEFAULT_VALUE = "";
    private static final String PROPERTY_NAME = "value";

    public TextField() {
        Field.initSingleProperty(this, DEFAULT_VALUE, PROPERTY_NAME)
                /*
                 * Configure the DOM event that will be fired when the property
                 * value is changed. By default, the event name is
                 * <property-name>-changed, e.g. value-changed.
                 */
                .setSynchronizedEvent("change");
    }
}

/**
 * Example showing how to create a composite field out of multiple inner fields.
 */
public class CompositeDatePicker extends Composite<Div>
        implements Field<CompositeDatePicker, LocalDate> {
    private static final LocalDate DEFAULT_VALUE = null;

    private final NumberField yearField = new NumberField();
    private final NumberField monthField = new NumberField();
    private final NumberField dayField = new NumberField();

    public CompositeDatePicker() {
        Field.initCompositeValue(this, DEFAULT_VALUE,
                /*
                 * Combine field values into a single value. Automatically run
                 * when any of the bound fields has changed, but only if all
                 * non-optional fields have a value. If any non-optional fields
                 * is empty, the previous value is retained, unless the value
                 * mapper is configured to reset the value instead.
                 */
                () -> LocalDate.of(yearField.getValue(), monthField.getValue(),
                        dayField.getValue()))
                /*
                 * Bind each field to be updated based on a new value. If not
                 * configured to accept null, a null value will clear the field
                 * instead of running the callback.
                 */
                .bind(yearField, LocalDate::getYear)
                .bind(monthField, LocalDate::getMonthValue)
                .bind(dayField, LocalDate::getDayOfMonth);

        getContent().add(yearField, monthField, dayField);
    }
}

Links

• Github

Compatibility