Setting content of my `UI` subclass in Vaadin Flow web app

Question

In Vaadin Flow, writing a subclass of UI class is no longer necessary. Yet the page of the manual on Differences Between V10 and V8 Applications suggests we are free to do so.

The problem: The UI class in Flow has no UI::setContent method.

This usual line of code in our UI::init method fails in Flow:

this.setContent( layout );  // <--- No method `setContent` found in Flow

➥ How do we set the content to be displayed within our UI subclass at runtime?

Here is my code, with the line of setContent that fails.

package com.acme;

import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.server.VaadinRequest;
import com.vaadin.flow.server.VaadinServlet;
import com.vaadin.flow.server.VaadinServletConfiguration;

import javax.servlet.annotation.WebServlet;

public class MyUI extends UI {
    protected void init ( VaadinRequest request ) {
        VerticalLayout layout = new VerticalLayout();
        this.setContent( layout );
    }

    @WebServlet (
        urlPatterns = "/*",
        name = "myservlet",
        asyncSupported = true
    )
    // The UI configuration is optional
    @VaadinServletConfiguration (
        ui = MyUI.class,
        productionMode = false
    )
    public class MyServlet extends VaadinServlet {
    }
}

Answer 1

The UI is a component itself and implements HasComponents . Hence, you can simply call add(Component...) method to fill it with components.