Creation of a UI with linkki

Manual Section Creation

If you do not use a standard layout annotation you should consider writing a custom layout annotation.

Even if you might need to have more control over this custom layout, you may still use the same mechanisms to read UI annotations, create and bind UI components by way of the UiCreator.

In the following example, the UI elements of a PMO are directly added to a Vaadin FormLayout. In this case, the possibly existing annotation of the PMO class is ignored, only annotations on methods are respected.

public class FormLayoutCreator {

    public static FormLayout create(Object pmo, BindingContext bindingContext) {
        FormLayout formLayout = new FormLayout();
        UiCreator.createUiElements(pmo, bindingContext,
                                   c -> new CaptionComponentWrapper("", (Component)c,
                .forEach(cw -> formLayout.addComponent(cw.getComponent()));
        return formLayout;


The created FormLayout can simply be used with other UI components:

        content.addComponent(FormLayoutCreator.create(pmo, bindingContext));
If the layout is as simple as in this example it would be much more convenient to write a custom layout annotation. Only use this approach to get more control over special cases of the layout.

Filtering of Components

When using the UiCreator you can choose to create all UI elements from a PMO object (via the createUiElements(Object, BindingContext, Function<C, W>) method) or choose the elements you want to display yourself, for example by reading additional annotations (like @SectionHeader), by way of the method createUiElement(AnnotatedElement, Object, BindingContext, Function<C, W>) which takes a single annotated element as an additional argument and creates only the UI elements from that annotated element. You can obtain all annotated elements from ComponentAnnotationReader#getComponentDefinitionMethods(Class<?>).