Creation of a UI with linkki

Manual Binding With @Bind

Due to special requirements or custom Fields it is sometimes not possible to use the automatic creation via @UISection. For this case linkki offers the option of 'only' using the data binding. This way, control over creation, arrangement and configuration (e.g. setNullRepresentation() or setConverter()) of the component is kept.

To activate the manual binding the component must be marked with the @Bind annotation. Both fields and methods can be annotated. Supported types are:

  • com.vaadin.ui.Field

  • com.vaadin.ui.Label

  • com.vaadin.ui.Button

Then, the data binding can be created via the Binder.

@Bind on Fields
public class AddressFields {

    @Bind(pmoProperty = "street")
    private final TextField streetTxt;

    @Bind(pmoProperty = "zip")
    private final TextField zipTxt;

    @Bind(pmoProperty = "city")
    private final TextField cityTxt;

    @Bind(pmoProperty = "country", availableValues = AvailableValuesType.DYNAMIC)
    private final ComboBox countryCb;

}
@Bind on Methods
    @Bind(pmoProperty = "street")
    public TextField getStreetTxt() {
        return streetTxt;
    }

    @Bind(pmoProperty = "zip")
    public TextField getZipTxt() {
        return zipTxt;
    }

    @Bind(pmoProperty = "city")
    public TextField getCityTxt() {
        return cityTxt;
    }

    @Bind(pmoProperty = "country", availableValues = AvailableValuesType.DYNAMIC)
    public ComboBox getCountryCb() {
        return countryCb;
    }
When the data binding of a Vaadin component of a third party library should be used by linkki, it can be activated via inheritance of 'delegate proxies' and @Bind on the methods.
Binding Activation
        new Binder(addressFields, addressPmo).setupBindings(context);

Here is a sample project with the different binding options.

Binding summary:

  • @UISection → simple and quick template with limited configuration options

  • manual binding → full control

linkki uses certain naming conventions. That way sources of errors and refactoring complexity are reduced.

The values used in the annotations for pmoProperty and modelAttribute should be defined as constants in the corresponding classes.