ons-navigator

[jokorivai]

@Fran-Diox sorry to ask this: Is there any way to prevent application from exiting when user click back-button (hardware) and no more page exists in page stack?

Scenario:

1. Navigating: MainPage>pushPage>pushPage
2. Hardware Backbutton: popPage>popPage>exit app

Is there a way to prevent exit app, just stay on the MainPage?

[munsterlander]

Yes you can and this is done via something like this:

 if (navigator.notification.confirm("Are you sure to close the app?",
    function(index) {
      if (index === 1) { // OK button
        navigator.app.exitApp(); // Close the app
      }
    }
  ));

More information is found here: https://onsen.io/guide/overview.html#HandlingBackButton

You might also want to check out these answers here: http://stackoverflow.com/questions/34333774/handling-android-backbutton-in-onsenui-cordova

[Fran Diox]

@jokorivai Yep, if you check the section right after the one that @munsterlander linked, Overriding default component handler, you can find the exact answer to your question. Notice that when it says navigator it means your ons-navigator, not window.navigator.

[claudioc]

Is it expected that every pushPage (or bringPageTop) will fire a init event, even if the page has been put on the stack already?

[claudioc]

Oh, I figured it out that every time I use the “Back” button (ons-back-button), the page is popped from the stack and removed from the DOM.

Now, the problem is that I am building a “multistep” signup form, so the user should be able to go back and forth of these steps.

Maybe the Navigator is not the ideal component for that? Should I use a carousel maybe?

[munsterlander]

@claudioc You could use a carousel or you could use localStorage to temp store the data. I gave an example of this here: https://community.onsen.io/topic/246/walktrough/6

[Fran Diox]

@claudioc Navigator is better. You can save your data on destroy (or hide) event and put it back on init event :thumbsup:

[claudioc]

@Fran-Diox yeah, at the end I am doing exactly that. I was almost OK also with the carousel though. My findings (should some else have the same ideas):

• Carousel can be embedded in a page, which means that the “header” stays put when you change from on item to the other. With a page, the toolbar moves with it
• Carousel can only use the slide animation (or none). Cannot use the lift which I need for a couple of interactions in the form (“Read Terms and Conditions”, for example)
• I find the Carousel API a bit nicer (I’d like to have the next and prev method on the navigation stack, for example). Navigation API are a bit confusing

Anyway, it’s amazing how one can be productive with OnsenUI guys. I am so happy to have started to use it. Thanks!

[habib]

I have 2 tab bar and first tab bar have a list in page and i want to click the list for display the list detail in detail-list page with form tab bar , Can I ? Please help me !

[sahizbadafahad1]

I am using ons-sliding menu i want to use one-navigator inside the ons-sliding menu, i want to push page from ons-sliding menu, but when i push the page the page is push but the menu remain open
how can i fix it ?

[Fran Diox]

@sahizbadafahad1 Just call myNavigator.pushPage(...); myMenu.closeMenu(); together. You have an example with splitter here.

[sahizbadafahad1]

@Fran-Diox Thank you for reply
Yes its working thank you, but it navigate me the two pages, the one where i stay and the another which i put in push page

[sahizbadafahad1]

How to set the animation speed of ons-navigator when we push the page ?

[Fran Diox]

@sahizbadafahad1 The docs for the navigator in Onsen UI 2 are here. You can check options.animationOptions for what you ask.

[sahizbadafahad1]

@Fran-Diox Thanks you its working