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", modelAttribute = Address.PROPERTY_STREET)
    private final TextField streetTxt;

    /* uses the field's name as pmoProperty and modelAttribute */
    private final TextField city;

    /* name of pmoProperty is different from the field name */
    @Bind(pmoProperty = "country", availableValues = AvailableValuesType.DYNAMIC, modelAttribute = Address.PROPERTY_COUNTRY)
    private final ComboBox countryCb;

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

    /* uses the pmoProperty and modelAttribute "city" derived from the method name */
    public TextField getCity() {
        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(bindingContext);

You can find a sample project with the different binding options on GitHub.

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.