Hello, again!
Can someone help us to build an example with multi-level navigation with nested . Its seriously stuck our project.
Help us, mr60fps!
Have a look at https://www.fusetools.com/docs/navigation/navigation
if you continue to be stuck please take a look at my code, if you consider using it , please not that you can separate pages into different files , it help maintain order in the app
<App>
<Router ux:Name="router" />
<JavaScript>
var Observable = require("FuseJS/Observable");
var pages = Observable()
var data = Observable(
{name: "qsoiuzeoi"},
{name: "dsfsf"},
{name: "qslkj"}
)
var navigationData = Observable()
function NavigateTo(arg){
navigationData.value = arg.data
router.push("barB")
}
function goBack(){
router.goBack()
}
module.exports = {
data: data,
NavigateTo: NavigateTo,
goBack: goBack,
openRectangle: openRectangle,
setOpenTrue: setOpenTrue
}
</JavaScript>
<ClientPanel ux:Class="homepage">
<Router ux:Dependency="router" />
<DockPanel Dock="Top" Height="50" Color="Green">
</DockPanel>
<ScrollView>
<StackPanel>
<Each Items="{data}">
<Rectangle Height="50" Width="100%" Color="Black">
<Clicked Handler="{NavigateTo}"/>
</Rectangle>
</Each>
</StackPanel>
</ScrollView>
</ClientPanel>
<ClientPanel ux:Class="barBach">
<Router ux:Dependency="router" />
<DockPanel Height="50" Dock="Top" Color="Yellow">
<Clicked Handler="{goBack}"/>
</DockPanel>
<StackPanel>
<Text Value='{navigationData.name}' HitTestMode='LocalBounds'/>
<Rectangle Height="50" Width="140" CornerRadius="10" Color="#f15f5f" Margin="0,40,0,0">
<Text Value="Click" TextColor="White" TextAlignment="Center" Alignment="Center"/>
<Clicked Handler="{navigationData.setOpenTrue}">
<Scale Factor="0.96" Duration="0.5" Easing="QuadraticIn"/>
</Clicked>
</Rectangle>
</StackPanel>
<Rectangle Visibility="Collapsed" Opacity="0" ux:Name="lala" Dock="Bottom" Margin="0,0,0,10" CornerRadius="10" Height="60" Width="96%" Color="Red">
</Rectangle>
<WhileTrue Value="{navigationData.openRectangle}">
<Change lala.Visibility="Visible" Easing="QuadraticIn" Duration="0.6"/>
<Change lala.Opacity="1" Easing="QuadraticIn" Duration="0.6"/>
</WhileTrue>
</ClientPanel>
<Navigator DefaultTemplate="home">
<barBach ux:Template="barB" router="router"/>
<homepage ux:Template="home" router="router"/>
</Navigator>
</App>
Sergey: The documentation covers this: https://www.fusetools.com/docs/navigation/navigation
If you are still stuck please be more specific.
Anders Lassen wrote:
Sergey: The documentation covers this: Fuse
If you are still stuck please be more specific.
This is shorter version. At the bottom 2 variations of navigation: DirectNavigation and Navigator
-
With
DirectNavigationdont work second tab. -
With
Navigatordont work even first tab.
<App ClearColor="Black">
<Router Name="router" />
<Page ux:Class="MainPage">
<Router ux:Dependency="router" />
<JavaScript>
var o = require('FuseJS/Observable')
var tabbar = o(
{'label': 'Tab Item A', 'page': 'RouterA'},
{'label': 'Tab Item B', 'page': 'RouterB'}
)
var tabbarActiveTab = o(tabbar.getAt(0)['page'])
var tabbarController = tabbar.map(function (x, i) {
return {
element: x,
max_index: tabbar.length - 1,
index: i,
makeActive: function () {
tabbarActiveTab.value = tabbar.getAt(i)['page']
}
}
})
module.exports = {
tabbarController: tabbarController,
tabbarActiveTab: tabbarActiveTab,
goScreenA2: function(param) {
router.push('ScreenA2', param.data)
},
goScreenB2: function(param) {
router.push('ScreenB2', param.data)
},
goBack: function() {
router.goBack()
}
}
</JavaScript>
<!-- Buttons -->
<Rectangle ux:Class="GoBackButton" Color="Gray" Padding="20">
<Text Value="Back" Color="White" />
<WhilePressed>
<Scale Factor="0.9" Duration="0.1" DurationBack="0.2" />
</WhilePressed>
</Rectangle>
<Rectangle ux:Class="GoNextPage" Color="Red" Padding="20">
<string ux:Property="Value" />
<Text Value="{Property this.Value}" Color="White" />
<WhilePressed>
<Scale Factor="0.9" Duration="0.1" DurationBack="0.2" />
</WhilePressed>
</Rectangle>
<!-- Router A -->
<Page ux:Class="RouterA" Color="Black">
<Router ux:Dependency="router" />
<Text Value="RouterA" Color="Red" Alignment="TopCenter" />
<Navigator DefaultTemplate="ScreenA1">
<Page ux:Class="ScreenA1" Color="Black">
<Router ux:Dependency="router" />
<StackPanel Alignment="Center" ItemSpacing="10">
<Text Value="ScreenA1" Color="Red" Alignment="Center" />
<GoNextPage Value="Go To ScreenA2" Clicked="{goScreenA2}" />
</StackPanel>
</Page>
<Page ux:Class="ScreenA2" Color="Black">
<Router ux:Dependency="router" />
<StackPanel Alignment="Center" ItemSpacing="10">
<Text Value="ScreenA2" Color="Red" Alignment="Center" />
<GoBackButton Clicked="{goBack}" />
</StackPanel>
</Page>
<ScreenA1 ux:Template="ScreenA1" router="router" />
<ScreenA2 ux:Template="ScreenA2" router="router" />
</Navigator>
<ExitingAnimation>
<Move X="-1" RelativeTo="Size" Duration="0" />
</ExitingAnimation>
</Page>
<!-- Router B -->
<Page ux:Class="RouterB" Color="Black">
<Router ux:Dependency="router" />
<Text Value="RouterB" Color="Green" Alignment="TopCenter" />
<Navigator DefaultTemplate="ScreenB1">
<Page ux:Class="ScreenB1" Color="Black">
<Router ux:Dependency="router" />
<StackPanel Alignment="Center" ItemSpacing="10">
<Text Value="ScreenB1" Color="Green" Alignment="Center" />
<GoNextPage Value="Go To ScreenB2" Clicked="{goScreenB2}" />
</StackPanel>
</Page>
<Page ux:Class="ScreenB2" Color="Black">
<Router ux:Dependency="router" />
<StackPanel Alignment="Center" ItemSpacing="10">
<Text Value="ScreenB2" Color="Blue" Alignment="Center" />
<GoBackButton Clicked="{goBack}" />
</StackPanel>
</Page>
<ScreenB1 ux:Template="ScreenB1" router="router" />
<ScreenB2 ux:Template="ScreenB2" router="router" />
</Navigator>
<ExitingAnimation>
<Move X="-1" RelativeTo="Size" Duration="0" />
</ExitingAnimation>
</Page>
<!-- Tab bar -->
<DockPanel>
<MultiLayoutPanel ux:Name="_tabBar" Height="50" Dock="Bottom" LayoutElement="{tabbarActiveTab}" Visibility="Visible">
<Divider Alignment="Top" Margin="0,0,0,0" Offset="0,-1" />
<Placeholder ux:AutoBind="true">
<Rectangle ux:Name="_tabBarSlider" Height="2" Color="White" Alignment="TopCenter" Width="50%">
<LayoutAnimation>
<Move RelativeTo="LayoutChange" X="1" Duration="0.2" Easing="BackIn" />
</LayoutAnimation>
</Rectangle>
</Placeholder>
<Grid Columns="1*,1*">
<Each Items="{tabbarController}">
<Panel Name="{element.page}" Color="Black" Opacity="0.99" Clicked="{makeActive}">
<Placeholder Target="_tabBarSlider" />
<Text Value="{element.label}" Alignment="Center" />
</Panel>
</Each>
</Grid>
</MultiLayoutPanel>
</DockPanel>
<!-- Version with DirectNavigation -->
<DirectNavigation Active="{tabbarActiveTab}" />
<RouterA ux:Name="RouterA" router="router" />
<RouterB ux:Name="RouterB" router="router" />
<!-- Version with Navigator -->
<!--
<Navigator DefaultTemplate="{tabbarActiveTab}">
<RouterA ux:Template="RouterA" router="router" />
<RouterB ux:Template="RouterB" router="router" />
</Navigator>
-->
</Page>
<MainPage router="router" />
</App>
Hi again,
I don’t know what you mean by “doesn’t work”. If you follow the structure in the docs linked above, it works. Don’t use DirectNavigation here. Use a single router with multi-level navigation and read the docs carefully on how to structure the routes.
Also, don’t data-bind the DefaultTemplate property. Set it to a fixed template, and use the router to perform navigation.