router + backbutton

How-to Discussions
1

Hi!

i don’t know if that’s a bug or i am doing something wrong:

my app looks more or less like this:

 <App>
      <StackPanel ux:Name="popup" Visibility="Collapsed">
        <Panel Height="25%" Background="#f0f">
        </Panel> 
        <Panel Height="25%" Background="#f0f">
            <Clicked Handler="{onCloseClicked}"/>
        </Panel> 
        
        <OnBackButton>
            <Clicked Handler="{hideSingleCardClicked}"/>
        </OnBackButton>

        <WhileTrue Value="{showPopup}">
            <Change popup.Visibility="Visible"/>
        </WhileTrue>
      </StackPanel>

      <Router ux:Name="router" BackButtonAction="None"/>
      <Navigator DefaultTemplate="login" >
           <Page1 ux:Template="p1" router="router" /> 
           <Page2 ux:Template="p2" router="router" /> 
      </Navigator>
</App>

I have a popup that is shown at some point and i want the back button on android to close it. When i run the app and i show the popup then if i click on the back button (CMD+B) nothing happens… then i click on the top panel (the one that don’t have the “clicked handler”) and then is when the action is handled.

Am i mixing something?

2

Hi!

To display a modal, use javascript and router.push("themodal"). Then the back-button will automatically work.

3

thnx… just as info:

  <OnBackButton Handler="{onHidePopupClicked}"/>

solved the problem… it seems that

    <OnBackButton>
        <Clicked Handler="{hideSingleCardClicked}"/>
    </OnBackButton>

is not correct :slight_smile: (as actually u don’t click… so it made sense that the action happened when i clicked)

4

btw:

what if i want the modal to return any info? as far as i know i can’t pass a function (callback) as a parameter to the modal. For example: a button that asks the user name:

  function askName() {
       router.push("modalInput", 
                {
                    callback: function(name){ console.log("ur name is: " + name) }
                }
       );
  }
5

Unfortunately, the router is not meant for this type of use. The core principle for the Router is that the router state must be possible to serialize so it can be restored later, and this will have put the app the app in a completely valid state. This means every page in the router must be self-contained and self-sufficient, able to reconstruct itself from the route parameter data alone.

This is an important principle that will enable a new generation of real-time development tools (we are currently building) where you can make changes to the app while it is running without loosing the data, state or context (which is the ultimate goal of Fuse).

If you pass in functions or have lingering routing state not encoded in the route this will not be possible, your app will be in a corrupt state if changes are made, and you’ll have to start over from the login screen of your app every time you make a change.

If you want to use use the router for “modals” that return values, you have to somehow encode what the modal is supposed to do when finished as plain data in the route. Typically you use some global module to contain your app model, and the modal interacts with that.

We currently don’t have a system in Fuse specifically designed to deal with data-returning modals, but it is on the list of things we will explore going forward.