I hope you can help me out here, because I am really doubtful about how I am structuring my navigation.
What I am trying to build:
I am starting my app, which is starting with 2 different pages.
A login and a registration page.
After a successfull login/registration I get redirected to the “main part” of my app.
Here I want to have 2 (and later more) different pages (lets call them map.ux and overview.ux) and a PageIndicator with is always visible at the bottom (only visible in my main part, not in the login/registration).
From one of the two pages (overview.ux) I can enter a third page (details.ux), which is not accessible via the bottom PageIndicator.
(I fetch a data list on the page and want to redirect to the third page, showing detailed information about the selected data field on the previous page).
Right now I am starting my Main.ux with a Router and a Navigator.
This navigator only contains three pages (login, registration and my “loggedin-page”).
Both pages (login & registration) can redirect me to my loggedin-page.
This loggedin-page contains a PageControl with the two mentioned pages and a PageIndicator at the bottom.
Is this the right way to handle this?
I am currently struggeling in redirecting from my overview.ux to the details.ux page.
I am fetching data and each them in a StackPanel:
The gotoDetail-Function should lead me to the details page (which, somehow, should still contain my fetched data and the information about which information I have picked).
But I don’t know how to continue here.
Having layers of navigation is a common pattern, and what you describe sounds much like what I do on my sample projects. I have an outer Navigator to handle general states. One of them has a PageControl, with an action bar. Some of those pages in turn may have another navigator to get to sub-pages.
Alternately, if the sub-pages should hide the action-bar I might place them back in the outer navigation. This makes it easier to get the UI right to hide the action bar.
Rest assured that nesting is fully supported, and we expect it in typical applications.
Thank you for your reply!
But I don’t know how to get my PageControl to a Sub-Page, which is not visible in my PageIndicator.
But at the same time, I don’t want to lose my PageIndicator when I am on that Sub-Page.
The Indicator should be still visible, but the Sub-Page shouldn’t be included in that Indicator.
Where TabbedPanel contains your PageControl and PageIndicator. In this panel, when the user navigates to a logical sub-page you can call router.push( 'sub' ) for a top-level change. The entire TabbedPanel will be shifted away to go to the TabSubPage.
The user doesn’t see these path names, and it’ll behave to them as a page transition from the PageControl.
I’ve done some layouts with more layers involved, but they resolve around this same concept. Just keep in mind that the logical sub-page doesn’t have to be an actual sub-page in the UI-tree.
Each page is an individual .ux file.
This is all working fine, but now I need to navigate from my ListPage to another page. Let’s call them InfoPage.
On that InfoPage, the PageIndicator should still be visible.
But the InfoPage should not be available from the PageIndicator.
I understood your mentioned structure but I am not sure how to implement this in my case.
Can u help me here?
I have one last question to that case.
After I switched to the Detailpage with router.pushRelative the specific PageIndicator Button is also always leading me to the DetailsPage then.
Is it possible that this Button is always leading me to my ListPage, no matter if I pushed a Relative on that page?