How can I clean up/remove the content in AppLayout in Vaadin 14?

Question

How can I show a static component in Vaadin 14? Every time I update the page, I get the error.

In this case, startStopYOLO, cameras, darknet, configuration, weights, thresholds, realTimeCameraImage, layout are all static

// Content
if(layout == null) {
    layout = new VerticalLayout();
    layout.add(new FormLayout(startStopYOLO, cameras, darknet, configuration, weights, thresholds));
    layout.add(realTimeCameraImage);
    layout.setAlignItems(Alignment.CENTER);
}
setContent(layout); // Here I get the error:

The error is:

Can't move a node from one state tree to another. If this is intentional, first remove the node from its current state tree by calling removeFromTree

So I need to clean up the content first. How can I do that in Vaadin 14?

Answer 1

The error already states the problem to some extend: Can't move a node from one state tree to another

Or rather: you can not share elements over different UIs. So no static, no singletons, ... - you have to create fresh elements.

Elements becoming part of the scene graph for one UI (the state tree from the error message) once they get attached. At this point the Vaadin internals make sure, the element is not already attached to a different UI (root) (it's OK to move elements inside one UI, which also works by adding it to a different parent of the same UI).

If you have shared state over e.g. the server, you will have to create elements for each UI and then sync this state with @Push and UI.access or alike.