Documentation

Documentation versions (currently viewingVaadin 23)
New Acceleration Kits: Observability Kit, SSO Kit, and Swing Kit. Read the blog post.

Step 3 - Converting a UI when not using other frameworks

Note
This step is needed in case your Vaadin 7 or 8 application doesn’t use Spring Boot, CDI or Navigator. If it uses any of those, go back to the framework selection.

Converting UIs

When not using a Navigator, you can replace the UI class with a Flow component by changing init(VaadinRequest) to a constructor and have UI.setContent to be add(new LegacyWrapper(content)) instead.

Also remember to register Route for the class.

For example, this code:

@Theme("valo")
public class AddressbookUI extends UI {
    private HorizontalLayout content = new HorizontalLayout();

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        content.setSizeFull();
        setContent(content);
    }
}

Should be converted to this:

@Route("")
public class AddressbookLayout extends Div {
    private HorizontalLayout content = new HorizontalLayout();

    public AddressbookLayout() {
        content.setSizeFull();
        add(new LegacyWrapper(content));
    }
}
Note
Annotations in the UI, such as @Theme and @Title and so on, are dealt with later on in the tutorial. Most of them have similar counterpart in either Flow or MPR.

To make the code look less busy you can also implement the HasLegacyComponents interface so you don’t need to use new LegacyWrapper.

@Route("")
public class AddressbookLayout extends Div implements HasLegacyComponents {
    private HorizontalLayout content = new HorizontalLayout();

    public AddressbookLayout() {
        content.setSizeFull();
        add(content);
    }
}

Next step

C698E0D5-A213-4856-BDDC-C52C6940B729