locked
How to use WinJS.Navigation.navigate ?

    Question

  • I started with the navigation app template.  My idea is in the home template to check if the user has provided any settings (username and pass) and if he is send him to the next page of the app

    When my app starts I want to check the settings and see if the user has provided username and pass. If he hasn't I'll show the settingsFlyout and ask him to add the data. If he has I want to send him to another view/page.

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                // TODO: Initialize the page here.
                
    // go to another page
                WinJS.Navigation.navigate('/pages/transactions/transactions.html', null);
            }
        });
    
        
    })();
    

    Now the thing is - I'm getting an exception and the app is being terminated. I'm landing in this code:

    var terminateAppHandler = function (data, e) {
            // This is the unhandled exception handler in WinJS. This handler is invoked whenever a promise
            // has an exception occur that is not handled (via an error handler passed to then() or a call to done()).
            //
            // To see the original exception stack, look at data.stack.
            // For more information on debugging and exception handling go to http://go.microsoft.com/fwlink/p/?LinkId=253583.
            debugger;
            MSApp.terminateApp(data);
        };

    From the comment I'm guessing that I need some kind of handler, but I cannot figure out for what? Any ideas?

    Sunday, January 13, 2013 10:51 PM

Answers


  • Hi compojoom,

    As No.18 mentioned, the code you added in the "ready" event of the "Home" page is executed during the init stage of the Home page control, if you call WinJS.Navigation.navigate to navigate from it, it might cause some problem due to the implementation of the auto-generated (by the project template) navigator. You can consider moving the checking and redirecting (choose the page to navigate) code logic into the default.html page's js code (such as during the activated event). If you fear that the detecting code take too long time (since activated time should not be too long), you can consider using the technique like extended splash screen so as to add more intialize code logic at start-up time (also you can customize the splash screen to include your own initialize UI).

    #Splash screen sample
    http://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78

    If you still want to do the detecting action in Home page's "ready" period, it is also ok. However, instead of using WinJS.Navigation.navigate method, you can consider just display a custom screen (such as a <div> element which occupy the entire screen)  which hide the home page UI. And you can put what ever UI element on the custom screen such as asking for credentials or other necessary input data or just show progressing UI for downloading some bootstrapper data. And whenever everything needed is obtained, simply hide the custom screen. I think the WinJS flyout control is also suitable for such custom screen.

     


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, January 21, 2013 9:20 AM
    Wednesday, January 16, 2013 9:55 AM
    Moderator

All replies

  • Hi 

    sample code Navigation and navigation history sample

    I think the navigation action ,that should be in default.html ,not in home.html


    軟體開發領域裡區區一個迷途工程師
    MyBlog: http://www.dotblogs.com.tw/ian/
    開發ASP.NET您要瞭解的基楚

    Monday, January 14, 2013 3:44 AM
  • Hi compojoom,

    You need to define a handler function for the event to navigate to the link target. In your scenario, you can check both the username and password info first in your defined click event handler, if they are avaliable then redirect.

    (function () {
        "use strict";
    
        WinJS.UI.Pages.define("/pages/home/home.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {            
    
                WinJS.Utilities.query("a").listen("click", this.linkClickEventHandler, false);
    
            }
        });
       
    
        function linkClickEventHandler(eventInfo) {
            eventInfo.preventDefault();
            //check if username and password avalidable here
            var link = eventInfo.target;
            WinJS.Navigation.navigate(link.href,null);
        }
    
    
    })();
    a simple demo you can refer http://msdn.microsoft.com/en-us/library/windows/apps/jj663505.aspx

    Hope this helps, thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, January 16, 2013 9:21 AM
    Moderator

  • Hi compojoom,

    As No.18 mentioned, the code you added in the "ready" event of the "Home" page is executed during the init stage of the Home page control, if you call WinJS.Navigation.navigate to navigate from it, it might cause some problem due to the implementation of the auto-generated (by the project template) navigator. You can consider moving the checking and redirecting (choose the page to navigate) code logic into the default.html page's js code (such as during the activated event). If you fear that the detecting code take too long time (since activated time should not be too long), you can consider using the technique like extended splash screen so as to add more intialize code logic at start-up time (also you can customize the splash screen to include your own initialize UI).

    #Splash screen sample
    http://code.msdn.microsoft.com/windowsapps/Splash-screen-sample-89c1dc78

    If you still want to do the detecting action in Home page's "ready" period, it is also ok. However, instead of using WinJS.Navigation.navigate method, you can consider just display a custom screen (such as a <div> element which occupy the entire screen)  which hide the home page UI. And you can put what ever UI element on the custom screen such as asking for credentials or other necessary input data or just show progressing UI for downloading some bootstrapper data. And whenever everything needed is obtained, simply hide the custom screen. I think the WinJS flyout control is also suitable for such custom screen.

     


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Monday, January 21, 2013 9:20 AM
    Wednesday, January 16, 2013 9:55 AM
    Moderator
  • Hi, I have the same problem.

    My solution is to put the call to the naviagate in a defered lambda:

    setTimeout(fuction(){

      WinJS.Navigation.navigate('/pages/transactions/transactions.html', null);
    },0);

    The 0ms is enough to make sure that the method will be called after the current call stack finishes exectuion, and in particular calling navigate will be safe again.

    Wednesday, February 06, 2013 6:46 PM