Navigation via Router API creates new instance of destination layout

Flow
1

Hello,

I am currently experimenting with VAADIN Flow and am focusing on using the Router API for navigation. I have a parent layout that extends AbstractAppRouterLayout and several dummy layouts attached to it. Following example code from the Bakery Application demo I have a menu bar with items that navigate to the various dummy layouts when the items are clicked. However, I noticed that on navigating back to a previously displayed layout by clicking on a menu item a new instance of the layout is constructed. This means any user input will be lost, such as filters or search field text, and is undesirable. Is there a way to avoid this but still use the Router API ?

Cheers,
Martin.

2

Hi Martin,

I had the same issue whereby I wanted users to be able to navigate between routes without them loosing their changes.

I save all the components into a map, then when the view is loaded, if the map is not empty I add all the components back into the page/view. Otherwise it creates a fresh page.

I put that into the beforeEnter method of BeforeEnterObserver;

@Override
	public void beforeEnter(BeforeEnterEvent event) {
		this.removeAll();
		if (manager.getAttribute(tabPrefix + reference) == null) {  // Check if the page has already been built, if not buildFresh page
			manager.registerPage(this);
			buildFresh();
			manager.setAttribute(tabPrefix + reference, this.getChildren().collect(Collectors.toList())); // save the components just built
		} else {
			@SuppressWarnings("unchecked")
			List<Component> components = (List<Component>) manager.getAttribute(tabPrefix + reference);
			components.forEach(this::add);
		}
		this.setSizeFull();
	}

The ‘manager’ mentioned in the code is just my class that manages the Map of components.

Hope this helps,

Stuart.

3

Thanks Stuart.

I have abandoned using the Router API and have just handled switching between layouts manually, with caching previously visited layouts.

Cheers,
Martin.

4

I’m implementing a similar app where multiple pages share the same root layout.
There is one instance of the root layout created per session as expected.

However if i’m on Page1 and then call UI.getCurrent().navigate(“Page2”) to navigate to Page2
Vaadin will create a new instance of Page2
Same, if i’m on Page2 and UI.getCurrent().navigate(“Page1”);
Vaadin will create a new instance of Page1
The beforeEnter() is called after the page has been created.

I thought the UI.getCurrent().navigate(“Page1”) would figure out that this is the same previously created instance of Page1

So how do we navigate between routes from the server side ?
Is UI.getCurrent().navigate the proper way ?

5

Actually, the behavior is even more extreme than just re-instantiating your view class when routing. The UI object representing all the content of the web browser window/tab is also being re-instantiated or at least re-initialized.

See:

So it does seem that the routing feature is useless, even detrimental. Perhaps someone can post example code for the old-fashioned approach, launching your Vaadin app with your own subclass of UI? I started a [thread asking for that]
(https://vaadin.com/forum/thread/17811597).

6

Ouch, I read your link with regard to UI …

I’m moving from vaadin 7, where i was using com.vaadin.navigator.Navigator

My app has one root layout and a half dozen top level components that use that layout.
Once my root layout is instanciated, it owns a left side bar menu, which when clicked will swap the root layout content with one of the top level components.
It is a similar work around to what Martin suggested earlier.

To prevent circular retain cycles, I cache my top level components into a VaadinSession.getCurrent()
https://stackoverflow.com/questions/48148680/vaadin-session-management-how-does-it-work

I would love to hear from the Vaadin experts as to the recommended way of dealing with apps that have more than one page.