Multi-Page Apps

Is there any substantial documentation on developing Multi-Page Apps? The UI.getCurrent().getPage().open(anInternalURL) does successfully open up a separate browser tab. But then, of course, you discover that vaadin won’t reuse instances, so you have to replace your UI singletons with prototypes (no shared MainLayout, for example). Nevertheless, you CAN get two working tabs on the “same app” for the “same logged-in user”.

But what do you really have going on? One UI instance or multiple? If multiple, you’ll need to invent some way for them to talk to each other on the server.

As for “why would you need a multi-page-app?”, well one page for the search form, another for the resulting grid, a third to view the selected row, etc. And one can dream about an app that lets the user start within a single page then “pull out” panels into a separate tab, or drag-and-drop them back into the main page.

Anyway, baby steps in the dark looking for enlightenment.

The two tabs have their own (two) instances of com.vaadin.flow.component.UI. These share the same VaadinSession. The attributes property on VaadinSession gives us a user-accessible HashMap. So that gives us a way to share information between two tabs. Running within the same VM (which they do), a search panel in one tab could push a Search object to the other tab to update the grid.

The next aspect is to make the changes in the target tab in that UI instance’s thread using the access(Command). And finally, need a @Push annotation somewhere to update the UI. I got it to work.

You have one UI per tab. If you are refreshing the tab a new UI is created.

Two tabs should always work ( for the same user) if the application is correctly implemented.

Can a Component instance actually be detached (removed) from one Tab and attached to another Tab? If so, how is it done? Simply remove it from its current parent, place it into some commonly accessible location, then add it to the new parent?

The answer to the above is that it is trivial to move an existing Component from one Tab to another, but you have to work around @VaadinSessionScope if you are using it.

I think in general, you’re describing a case that’s very rarely done with Vaadin. Vaadin’s a Single Page Application framework and while you have some opportunities to communicate between e.g. other browser tabs (through the session), that’s mostly just a consequence of being implemented on top of the Servlet specification

Sharing Components between different UIs (different browser tabs) is risky at best, because Components are not simply Java objects but also opaquely connected to a counterpart in the browser