Register 2 different routes with the same class

Actually, two different routes cannot be visible at the same time. One UI (browser tab) can show only one route.
Not knowing the actual code, I can just make a guess: since the view class (DynamicPage) is the same for many routes, I assume that the class has some logic based on the current route path, and given that you always want a new instance, I guess the logic is in the constructor.

If this is the case, I agree with Christian, moving the logic into a BeforeEnter listener should be a good solution.

Even if you can’t show the code, maybe you can tell us more precisely how the reasons for having new instances and what the tab navigation is supposed to do in your application.

I normaly use to show different routes in the same tabsheet in the same browser page and it works well.
I’ve the problem in a “special” view “DynamicPage” which is contructed at runtime from data contained in db.
Only in this case I need to have different instances for every route because they are different depending on db data and more than one can be hown at same time .

I’m sorry, but I don’t understand. Are you saying that the contents of two different @Route annotated classes are shown at the same time in a single browser tab?
For example, in the previous screenshot it looks like to me that only the contents of the “Utente” tab are shown, not the ones of “Funzione virtuale”.
Am I missing something?

I’ve the problem in a “special” view “DynamicPage” which is contructed at runtime from data contained in db.

Given that the route class is instantiated by Flow, how is this view constructed? Is it everything done in the view constructor?

I apologize for asking so many questions, but I’m still trying to understand the use case.

For the first question the answer is YES.
The Utente is in a tab of a tabsheet and Funzione Virtuale in another and clicking the tab label I can switch Utente or Funzione Virtuale in the same browser tab.
The second answer is YES.
In the constructor I read db and construct the content of my page.
Tks for Your help

Ok, now it is a bit more clear. If clicking on the tab label triggers Flow navigation, the current route view is detached from the UI and the target view is attached. So you do not have two view instances active at the same time, but only the one you have navigated to.

In the constructor I read db and construct the content of my page.

In this case, I would make DynamicPage implement BeforeEnterObserver and move the construction logic in that method; from the event, you can get the route path, if your logic is based on that information (I guess it is). The method should first remove actual content and then add the new components.

I hope this can help you.

1 Like

Tks for Your kindly help.
However this is not a solution in my environment.
Every tab contains data and, in general, a status which can’t be lost every time I switch the tab.
Every tab contains its own data and informations which are usefull for the user : it should have its own life in an indipendent way.

If your tabs contain status, it doesn’t make sense to have them as Routes/views. You can still have a navigation observer that reacts to route parameters and opens the correct tab, but the container that contains the tabsheet should be the route, not the individual tabs.

2 Likes

Sorry but I don’t understand why.
Each page (view) is selected by a menubar, opened by a route, sits in a different tab of my page container and is independent : what’s wrong ?
In Vaadin 7 I used the same schema and worked perfectly.
In Vaadin 23 it still works except for DynamicPage.
How can I obtain the same representation in V23 ?
In the posted screeshot I showed what’s the wanted result.
Tks

No further help ?
It’s a quite huge problem for me.
Tks

I would try to move away from the idea that the contents of your tabsheets should be @Routes.
So you shouldn’t have a UtenteView with @Route annotation but a UtenteLayout that you instantiate yourself when making the tabsheets in the actual View. This way it can even be stateful, also when switching tabsheets.

1 Like