Directory

← Back

Field

Field mixin for Vaadin 10+ components

Author

Rating

Popularity

<100

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

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Remove redundant non-https repository definitions

Released
2021-08-27
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Browser
Browser Independent

Field - Vaadin Add-on Directory

Field mixin for Vaadin 10+ components Field - Vaadin Add-on Directory
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.
Online