Creation of a UI with linkki

PresentationModelObject with @UISection

When a class is annotated with @UISection, linkki takes control over the creation and arrangement of the defined components. Using annotations for the UI elements, certain aspects can be defined or controlled. The sections are created via SectionFactories.

The UI elements are bound either to the 'properties' of a ModelObject or a PMO. A detailed description can be found in the chapter Data on Multiple Layers.

In all cases, if the ModelObject or PMO doesn’t have a corresponding setter, the field is readOnly.

In the first section the creation of a section for a 'standard' form is exemplified. In the second section the creation of a section with a table is detailed.

The annotation @UISection can be omitted. The SectionCreationContext created for a PMO class without that annotation treats that class as having a @UISection annotation with default values.

Binding of a Form

Binding with @ModelObject
@UISection
public class ContactSectionPmo implements PresentationModelObject {

    private Contact contact;
    @ModelObject
    public Contact getContact() {
        return contact;
    }

    @UITextField(position = 10, label = "Firstname", required = RequiredType.REQUIRED, modelAttribute = "firstname")
    public void firstname() {
        /* model binding only */ }

    @UITextField(position = 20, label = "Lastname", required = RequiredType.REQUIRED, modelAttribute = "lastname")
    public void lastname() {
        /* model binding only */ }

    @UIComboBox(position = 30, label = "Gender", content = AvailableValuesType.ENUM_VALUES_EXCL_NULL, itemCaptionProvider = ToStringCaptionProvider.class)
    public void gender() {
        /* model binding only */ }

    @UICheckBox(position = 40, caption = "Add to favorites")
    public void favorite() {
        /* model binding only */
    }

}
The definition of modelAttribute is optional if the property name in the ModelObject and the name of the annotated method are equal. But it is recommended to specify the modelAttribute to make it explicit. The value should be externalized to a constant in the target model object.

Binding of a Table

To create a section with a table the PMO class must implement org.linkki.core.ui.table.ContainerPmo<T>. The generic parameter T 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 T 'row PMOs'.

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

In the interface ContainerPmo<T> 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 as described in the first section. The only difference is that the UI elements may optionally be annotated with @UITableColumn.

    @UITableColumn(expandRatio = 0.25F)
    @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:

    @UITableColumn(expandRatio = 0.1F)
    @UIToolTip(text = "Edit")
    @UIButton(position = 30, icon = FontAwesome.EDIT, showIcon = true)
    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.ui.table.SimpleTablePmo<MO, ROW> which is described in chapter Tables in detail.