DeepLinker doesn't work smooth with tabbed pages yet #9183
Description
I started using DeepLinker since RC.0 and now working on it with RC.2 for an web application (so not native yet).
I got it to work fine with most of the pages; navigating to a specific page using an URL works fine and while navigating the correct URL is shown in the browsers address bar.
But somehow I can't get it to work with a tabbed page correctly.
To quickly describe my situation; a part of the application has the following page structure:
Home/Root (/)
|-- Program (/program)
| |- Program Detail page (tabbed) (/program/:id)
| |- Info (tab) (/program/:id/info)
| |- Map (tab) (/program/:id/map)
|-- Performers
| |- Performer Detail page (tabbed) (/performers)
| |- Info (tab) (/performers/:id/info)
| |- Performances (tab) (/performers/:id/shows)
To have the tabbed page controlling its own navigation and being able to assign URL segments to it is a nice feature. For my use-case not a required one but nice to have IF it would work correctly. Right now this is only causing trouble.
Expected behaviour
I would expect to be able to define this structure as followed:
{segment: 'program', component: ProgramPage, name: 'Program'},
{segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
{segment: 'program/:id/info', component: ProgramInfoTab, name: 'ProgramDetailInfo'},
{segment: 'program/:id/map', component: ProgramMapTab, name: 'ProgramDetailMap'},
{segment: 'performers', component: PerformersPage, name: 'Performers'},
{segment: 'performers/:id', component: PerformerDetailPage, name: 'PerformerDetail'},
{segment: 'performers/:id/info', component: PerformerInfoTab, name: 'PerformerDetailInfo'},
{segment: 'performers/:id/shows', component: PerformerShowsTab, name: 'PerformerDetailShows'},
and be done with it.
(or: omit the tabs in the DeepLinker config. I don't really need to be able to navigate to a specific tab, I want to navigate to the tabbed page itself and just have the first tab open. But then again; I can image for some project this might be a nice thing to have).
But this gives me strange results. When I navigate from the Program overview page to a ProgramDetail page I get /program/427274/tab-0/program/:id/info as the URL.
The tab-0 I could fix by defining the tabUrlPath in my template code, and I could set it to 'info' so the URL would be /program/427274/info/program/:id/info.
The first three segments of the URL are correct, but probably the DeepLinker config thinks it is not enough and appends the same segments at the end of the URL.
So, one way for me to fix this was to leave the segment in the DeepLinker config empty, so it would become:
{segment: 'program', component: ProgramPage, name: 'Program'},
{segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
{segment: '', component: ProgramInfoTab, name: 'ProgramDetailInfo'},
{segment: '', component: ProgramMapTab, name: 'ProgramDetailMap'},
{segment: 'performers', component: PerformersPage, name: 'Performers'},
{segment: 'performers/:id', component: PerformerDetailPage, name: 'PerformerDetail'},
{segment: '', component: PerformerInfoTab, name: 'PerformerDetailInfo'},
{segment: '', component: PerformerShowsTab, name: 'PerformerDetailShows'},
And this works fine to a certain extent: If I open the app from /program and then navigate to one of the detail pages, the URLs are working fine.
However, specifying empty segments will cause one of the tab pages to be loaded when I open up the root of the application (/). So this is still not the final solution for me.
Since the Tabs API provides an tabUrlPath, the way I would expect this to work is by not defining the Tabs itself in the DeepLinker config, but have the NavController of the Tabs append the correct url segment to the already existing URL.
So ideally this configuration should be enough to get the configuration right:
{segment: 'program', component: ProgramPage, name: 'Program'},
{segment: 'program/:id', component: ProgramDetailPage, name: 'ProgramDetail'},
{segment: 'performers', component: PerformersPage, name: 'Performers'},
{segment: 'performers/:id', component: PerformerDetailPage, name: 'PerformerDetail'},
And with tabUrlPath set to either 'info' or 'map', the Tabs can append this to program/:id so that it becomes program/:id/info
Two reasons why I think this way of configuration would be ideal:
- Since Tabs has its own NavController, the way users should navigate through it (and the URL segment that comes with it) should be configured solely in the Tabs itself (and yes, the
tabUrlPathis perfect for that) - You don't have to clutter your main DeepLinker config with all the tab pages. Just focus on the main application structure
I either missed something important which isn't documented yet, or the internals of DeepLinker should be adjusted a bit more.