Navigation and Nested PageControl

How-to Discussions
1

file
CbyBDBYWWoMu-image-1485422957207.jpg600×600

Above is a sample of what i am trying to achieve with fuse. When a user clicks a feed item, the app navigates to the next page and shows the content of the item clicked. However, swiping to other feed item screens should be possible. I hope the design above explains better.
Thanks

2

You could do it like this:

  • Place a Navigator with 2 pages at the top level: one page for the menu and another that contains a PageControl.
  • Inside the PageControl you keep the different subpages (your feeds).
  • When a button is clicked in the menu you use JS to set the correct subpage inside the PageControl and then you navigate from the menu page to the PageControl.

Then you should be able to swipe between the subpages and use a backbutton to go back to the menu.

3

Something like this:

<App>
	<ClientPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");
			var itemlist = Observable({pId: "p1"}, {pId: "p2"}, {pId: "p3"} );
			function gosub(arg){
				pc.seekToPath(arg.data.pId);
				router.push("itemroot");
			}
			module.exports = {gosub,itemlist}
		</JavaScript>
		<Router ux:Name="router"/>

		<Navigator DefaultPath="menu">
			<DockPanel ux:Name="menu">
				<StackPanel>
					<Each Items="{itemlist}">
						<Panel Color="#ddf" Margin="10" Padding="10" Clicked="{gosub}">
							<Text Value="{pId}"/>
						</Panel>
					</Each>
				</StackPanel>
			</DockPanel>

			<DockPanel ux:Name="itemroot">
				<PageControl ux:Name="pc" >
					<Page ux:Name="p1" Color="Red"/>
					<Page ux:Name="p2" Color="Blue"/>
					<Page ux:Name="p3" Color="Green"/>
				</PageControl>
			</DockPanel>
		</Navigator>
	</ClientPanel>
</App>

Notice that we use seekToPath() to set the correct subpage without triggering the transition animations in the PageControl.

4

Working as expected. Thank you

5

Hi Remi, on trying to implement this, I realize that it’s close to what I’m trying to achieve.
But my challenge is that the pageControl pages are dynamic( populated from the DB).
After clicking the router.push
Is there a wait to stall it from executing until the PageControl is updated?