Creation of a UI with linkki

Create a layout from a PMO

An annotated PMO that is annotated as a layout can be turned into a UI component using UiCreator#createComponent. The created component also contains all UI elements that are declared in the PMO. For convenience, VaadinUiCreator can be used instead to obtain a Vaadin Component instead of an Object.

        Component component = VaadinUiCreator.createComponent(new PartnerSectionPmo(new Partner()), bindingContext);

Creating a table

To create a table, the PMO class must implement org.linkki.core.defaults.columnbased.pmo.ContainerPmo<ROW>. The generic parameter ROW represents the type of the PMO to create a row in this table.

public class ContactTablePmo implements ContainerPmo<ContactRowPmo> {

The method getItems() returns the rows of the table in the form of the previously defined ROW 'row PMOs'.

    @Override
    public List<ContactRowPmo> getItems() {
        return items.get();
    }

In the interface ContainerPmo<ROW> additional default methods are defined. A detailed description can be found in the section about ContainerPmo.

The so called 'Row PMO' is a regular PMO. The only difference is that the UI elements may optionally be annotated with @UITableColumn.

    @UITableColumn(flexGrow = 10)
    @UILabel(position = 10, label = "Name")
    public String getName() {
        return contact.getName();
    }

All UI elements can be used in tables. The binding of a @UIButton looks as follows:

    @BindTooltip("Edit")
    @UIButton(position = 30,
            icon = VaadinIcon.EDIT,
            showIcon = true,
            caption = "",
            variants = ButtonVariant.LUMO_TERTIARY_INLINE)
    public void edit() {
        editAction.accept(contact);
    }
In our example the elements of the table shall be presented as read-only. Therefore no direct binding of the ModelObject via the @ModelObject annotation is done. If the items of your table are provided from a model object you may consider to use org.linkki.core.defaults.columnbased.pmo.SimpleTablePmo<MO, ROW> which is described in chapter Tables in detail.

The table can then be created using GridComponentCreator.

If the table PMO is annotated with @UISection, UiCreator can also be used to create a section containing the table.