Router and PageControl issues

How-to Discussions
1

Hi, Guys!
We need yours assistant.

There is an project which implemented via PageControl and screens with different routers.

Here is simple structure and small scheme (click here)

MainView.ux
<App>
 // tab bar here
 <PageControl Active="{tabbarActiveTab}">
  <ux:Include File="RouterA.ux" />
  <ux:Include File="RouterB.ux" />
 </PageControl>
</App>

RouterA.ux
<Page ux:Name="RouterA" Transition="None">
 <Router Name="router_a" />

 <Navigator DefaultTemplate="screenA1">
  <screenA1 ux:Template="screenA1" router="router_a" />
  <screenA2 ux:Template="screenDetailsA2" router="router_a" />
  <screenA3 ux:Template="screenDetailsA3" router="router_a" />
 </Navigator>
</Page>
RouterB.ux
<Page ux:Name="RouterB” Transition="None">
 <Router Name="router_b" />

 <Navigator DefaultTemplate="screenB1">
  <screenB1 ux:Template="screenB1" router="router_b" />
  <screenB2 ux:Template="screenDetailsB2" router="router_b" />
 </Navigator>
</Page>
screenA1.ux
<Page ux:Class="screenA1">
 <Router ux:Dependency="router" />

 <JavaScript>
  // fetch json
  module.exports = {
   details: function(param) {
    router.push("screenDetailsA2", param.data)
   },
  };
 </JavaScript>
</Page>
screenDetailsA2.ux
<Page ux:Class="screenDetailsA2">
 <Router ux:Dependency="router" />

 <JavaScript>
  module.exports = {
   back: function() {
    router.goBack()
   }
  }
 </JavaScript>
</Page>

Screens with router_b were made the same way as screenDetailsA2.ux

  1. If we navigate to RouterB, and click details we’ll get screenDetailsB2.
  2. Than click RouterA.ux via bottom tabbar, and than click details to reach screenDetailsA2
  3. And than back to RouterB.ux via bottom tabbar to prees back Clicked={"back»}
  4. At this point we getting an error (Unable to navigate to route: screenA1)

Questions:

  • Is able to switch off swiping between screens in PageControl (not transition animation)
  • Are we able to implement «SwipeToBack» inside internal pages? (screenDetailsA2, etc) Is there some features?
  • We have some errors at start, but all works fine:
InternalError: Can not navigate to 'screenA1', not found!
InternalError: Unable to navigate to route: screenA1
InternalError: Can not navigate to 'screenB1', not found!
InternalError: Unable to navigate to route: screenB

You are doing well, keep going!

2

Is able to switch off swiping between screens in PageControl (not transition animation)

3

Remi Pedersen wrote:

Is able to switch off swiping between screens in PageControl (not transition animation)

Fuse

Thanks Remi it works!

Do you know something about issue when project got 3 or more tabs and switching between first one and last going through all rest pages. What I exactly mean when we have got 3 tabs and I stay at first and click 3rd, second screen always blinking between switching.

4

Sergey wrote:

  1. If we navigate to RouterB, and click details we’ll get screenDetailsB2.
  2. Than click RouterA.ux via bottom tabbar, and than click details to reach screenDetailsA2
  3. And than back to RouterB.ux via bottom tabbar to prees back Clicked={"back»}
  4. At this point we getting an error (Unable to navigate to route: screenA1)

I have the same troubles with routers. Any suggestions?

5

Guys, we really need to resolve issues above. Is anybody here who met same problems?

6

It’s a bit difficult to debug this based only on a few pieces of your example. If you can upload a full repro case to https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK (only visible to Fuse employees), we’ll take a closer look.

7

Do you know something about issue when project got 3 or more tabs and switching between first one and last going through all rest pages. What I exactly mean when we have got 3 tabs and I stay at first and click 3rd, second screen always blinking between switching.

This happens because the PageControl is based on linear navigation where each page has a fixed position relative to the other pages. If you instead use direct navigation or hierarchical navigation (for instance in the way you’re already using Router / Navigator) then you can avoid this behavior.

8

Remi Pedersen wrote:

It’s a bit difficult to debug this based only on a few pieces of your example. If you can upload a full repro case to Dropbox (only visible to Fuse employees), we’ll take a closer look.

Hi there! fuse_movies.zip already uploaded! Check this out please!
Please help us with routers.

Contact email: azmotic@gmail.com

Thanks!

9

Sergey: I downloaded and started preview in your app, but can’t get it to crash. Do you have steps to reproduce?

Next time, when you have multiple issues, please split up into multiple threads, where you explain each issue/question in detail with test case, steps to reproduce and code for each issue. It is a bit confusing to understand what you need help with here, and what is most critical.

Very cool looking app btw :slight_smile:

10

The app seems to manifest a few weird performance issues too - creating an internal ticket to have this investigated. Thanks for the test case.

11

Anders Lassen wrote:

Sergey: I downloaded and started preview in your app, but can’t get it to crash. Do you have steps to reproduce?

Next time, when you have multiple issues, please split up into multiple threads, where you explain each issue/question in detail with test case, steps to reproduce and code for each issue. It is a bit confusing to understand what you need help with here, and what is most critical.

Very cool looking app btw :slight_smile:

There are few cases illustrated

https://yadi.sk/d/stnBDoMuvokgL

Thank you!

12

The peformance problems have been investigated: it turns out only to be a problem in desktop preview and builds (on mobile devices it runs fine), and those problems are gone in the next version of our text engine, soon to be merged. It was due to our old desktop text renderer dealing poorly with non-ascii characters.

Will investigate the crashes now.

13

Anders Lassen wrote:

The peformance problems have been investigated: it turns out only to be a problem in desktop preview and builds (on mobile devices it runs fine), and those problems are gone in the next version of our text engine, soon to be merged.

Will investigate the crashes now.

Thanks guys!

14

I can’t reproduce crashes here, but I do get this error message in the output:

InternalError: Can not navigate to 'ScreenDetailsNews', not found! in Fuse.Controls.Navigator<C:\Users\Anders\Documents\GitHub\Uno\lib\fuselibs\Source\Fuse.Controls.Navigation\Navigator.uno:195>
Error: Unable to navigate to route: ScreenDetailsNews?{"author":"??????.???????, Life.ru","description":"½???????-2016╗áù ?????????? ??????? ???????? ?á????? ??????, ??????? ???????? ?????? ?????? ?á??????????? ?????? ½?????? ?????╗ (????? ??á???????? ????? ½????????╗).","image":"","timestamp":"??????? ? 11:00","title":"½???????-2016╗ ?????? ???? ????? ???á???????? ??á???? ??????","url":"https://news.yandex.ru/yandsearch?cl4url=life.ru%2F909740"} in Fuse.Navigation.Router<C:\Users\Anders\Documents\GitHub\Uno\lib\fuselibs\Source\Fuse.Navigation\Router.uno:250>

App continues to run fine though?

15

The problem here is that you have multiple navigators in the same scope, so it doesn’t know what navigator is supposed to navigate to ScreenDetailsNews.

Your structure is basically:

<App>
    <Router />
    <DirectNavigation />
    <Page>
    		<Navigator>...
    </Page>
    <Page>
    		<Navigator>...
    </Page>
    <Page>
    		<Navigator>...
    </Page>

This structure is not allowed, as the Router will only see the first navigator.

For this to work, you have to use one router per navigator, or use a navigator instead of your DirectNavigation.

16

The above accounts for both of the reported problems, so considering this case closed until further nothice.

I reccommend removing DirectNavigation and going back to multi-level navigation with nested <Navigator>, looking at your commented-out sections this looks like your original design. If this change was done to avoid transition-problems, please re-post that as a separate issue and we’ll help out with that.