Goto with cached page

How-to Discussions
1

Hi,

I’m trying to create tabbed page, but I don’t want to have any transition and just instance page switching when click the tab button. I have tried PageControl with no transition, but the result is not what I expect (seems it is actually scrolled to certain page but without transition but still takes a time, not instant).

Then I’ve tried with standard Page Navigator and with goto statement. But the problem with goto for each tab clicking is that I cannot reuse the page which causing additional time to instantiate some variables (especially for page with lot of variables) and trigger AddAnimation. I have tried router.push, the page loading behavior is as expected (reuse page instance) but the page switching is not always working (seems that it would not switch to page that already pushed). I have tried router.modify with replace and other option but still no luck.

Is there any alternative mechanism for this problem? In summary here is what I think the possible alternative but don’t know how to achieve

  • PageControl without transition and without page seeking
  • router.goto that could cache and reuse page instance
2

Hi Sahal,

to achieve this, you need to use a Navigator with custom transitions. In your case though, “no transition” means that you still need to add some kind of transition anyway. As an example, you could change the opacity on your pages to 0 upon deactivation, so that only the active page is visible.

Give that a go and let us know if you don’t manage to solve this. With a complete, minimal reproduction that we could copy-paste and run.

3

Hi,

Below is the minimal reproduction of my problem.

In this case, I use goto to switch between tab page, and it’s working fine, but the problem is whenever I switch the tab page, it’s always instantiate the page including executing AddingAnimation every time I switch page (I only want to execute the animation one time) and when the page has lot of variable to load, it will cause a noticeable time to load.

If I change the click handler from goto to push , the page switching behavior is not working as expected, but the page loading is as expected (seems it’s load the page from cache, hence no AddingAnimation executed or variable instantiation happening)

<App>
	<Router ux:Name="router" />
	<ClientPanel>
		<JavaScript>
			router.push('Home');
		</JavaScript>
		<DockPanel>
		    <TabBar router="router" Alignment="Bottom" Dock="Bottom"/>
		</DockPanel>
		<Navigator DefaultPath="Home" Transition="None">
	        <MyPage ux:Template="Home" Label="Home" router="router"/>
	        <MyPage ux:Template="Promo" Label="Promo" router="router" />
	        <MyPage ux:Template="Other" Label="Other" router="router" />
	    </Navigator>
	</ClientPanel>
</App>

<Panel ux:Class="TabBar" Height="55">
    <Router ux:Dependency="router" />
    <JavaScript>
       
        var Home = function(){
            //router.push('Home');
            router.goto('Home');
        }

        var Other = function(){
            //router.push('Other')
            router.goto('Other')
        }

        var Promo = function(){
            //router.push('Promo')
            router.goto('Promo')
        }

        module.exports = {
            Home, Other, Promo
        }

    </JavaScript>
	<Panel>
		<Grid ColumnCount="3">
            <Panel HitTestMode="LocalBoundsAndChildren">
    			<Text Value="Home" Alignment="Center"/>
                <Clicked Handler="{Home}"/>
            </Panel>
            <Panel HitTestMode="LocalBoundsAndChildren">
    			<Text Value="Promo" Alignment="Center"/>
                <Clicked Handler="{Promo}"/>
            </Panel>
            <Panel HitTestMode="LocalBoundsAndChildren">
    			<Text Value="Other" Alignment="Center" />
                 <Clicked Handler="{Other}"/>
            </Panel>
		</Grid>
	</Panel>
	<Rectangle Alignment="Default" Color="#fff">
		<Stroke Color="#bbb" Width=".5" />
	</Rectangle>
</Panel>

<Page ux:Class="MyPage" Color="#fff">
	<Router ux:Dependency="router" />
	<string ux:Property="Label" />
	<JavaScript>
		var label = this.Label;
		if (label != undefined)
			console.log("Page " + label.value + " Loaded");
	</JavaScript>
	<DockPanel>
		<Panel Height="100" Color="#56262E" Dock="Top" >
			<Text Value="{ReadProperty Label}" Color="#fff" Alignment="Center" FontSize="12"/>
		</Panel>
		<Panel Height="150" Width="150" Alignment="Center" Color="#ddd">
			<Text Value="{ReadProperty Label}" Color="#56262E" Alignment="Center" FontSize="12"/>
			<AddingAnimation>
		     	<Move Y="-1" RelativeTo="Size" Easing="BackIn" Duration=".3" />
		     </AddingAnimation>
		</Panel>
	</DockPanel>
</Page>
4

Hi,

It seems that the best solution for me for now is to use non-template page, All tabbed page will be loaded at once (no variable re-instantiation on tab switching), AddingAnimation only executed one time, no need router goto to switch the page, and page switching is instant. Perhaps the only downside is if the page and the tab become more complex then the first loading time will increase, but at least for now it will do the trick. Thanks for your quick response.

Below is my current solution

<Panel ux:Class="TabBar" Height="55">
    <string ux:Property="Selected" />
	<Panel>
		<Grid ColumnCount="3">
            <Panel HitTestMode="LocalBoundsAndChildren">
    			<Text Value="Home" Alignment="Center"/>
                <Clicked>
                    <Set this.Selected="Home" />
                </Clicked>
            </Panel>
            <Panel HitTestMode="LocalBoundsAndChildren">
    			<Text Value="Promo" Alignment="Center"/>
                <Clicked>
                    <Set this.Selected="Promo" />
                </Clicked>
            </Panel>
            <Panel HitTestMode="LocalBoundsAndChildren">
    			<Text Value="Other" Alignment="Center" />
                 <Clicked>
                    <Set this.Selected="Other" />
                </Clicked>
            </Panel>
		</Grid>
	</Panel>
	<Rectangle Alignment="Default" Color="#fff">
		<Stroke Color="#bbb" Width=".5" />
	</Rectangle>
</Panel>

<App>
	<Router ux:Name="router" />
	<ClientPanel>
		<JavaScript>
			const Observable = require("FuseJS/Observable");
			var selected = Observable("Home");
			module.exports = {
				selected
			}
		</JavaScript>

		<DockPanel>
		    <TabBar Alignment="Bottom" Dock="Bottom" Selected="{selected}"/>
		</DockPanel>
		<PageView DefaultPath="Home" >
	        <MyPage ux:Name="Home" Label="Home" router="router" Visibility="Hidden">
	        	<WhileTrue Value="{selected} == 'Home'">
	        		<Change Home.Visibility="Visible" />
	        	</WhileTrue>
	        </MyPage>
	        <MyPage ux:Name="Promo" Label="Promo" router="router" Visibility="Hidden">
	        	<WhileTrue Value="{selected} == 'Promo'">
	        		<Change Promo.Visibility="Visible" />
	        	</WhileTrue>
	        </MyPage>
	        <MyPage ux:Name="Other" Label="Other" router="router" Visibility="Hidden">
	        	<WhileTrue Value="{selected} == 'Other'">
	        		<Change Other.Visibility="Visible" />
	        	</WhileTrue>
	        </MyPage>
	    </PageView>
	</ClientPanel>
</App>