locked
UI Rendering issue RRS feed

  • Question

  • I use Java script. There is no problem for showing the UI in the beginning. Then I add a timer for triggering a task to download files. This causes my metro app all white. No controls, no background even after 10 seconds(my timer is 10 seconds below).

        //the code above shows a listview    

        WinJS.UI.processAll();

        setTimeout(downloadFiles, 10000);    <<<------- When I add this line, my metro app UI won't show up.

    Another odd thing is when I set breakpoint in the line of setTimeout(), this breakpoint is hit and press 'F5', the App is working fine and all UI can show correctly and in time.


    Great Wall

    Monday, October 22, 2012 4:21 AM

Answers

  • Hi Greatwall,

    I've performed a quick test with the similar code logic as you mentioned, it seems adding window.setTimeout call will not cause UI into problem. I think the problem you encounter is likely due to other code logic in the downloadFiles function (and the UI elements it will manipulate). Below is the main js code of my test app (created from a Blank windows store js project):

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        WinJS.Binding.optimizeBindingReferences = true;
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                    
                }
                args.setPromise(
                    WinJS.UI.processAll().then(processAllCompleteHandler, processAllErrorHandler)
                    );
               
                // Use js timer
                MainUtils.showMessage("before setTimeout...");
                window.setTimeout(simpleTimeoutHandler, 10000);
    
               }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
    
      
    
    
        function processAllCompleteHandler(val) {
    
            MainUtils.showMessage("ProcessAll complete...");
        }
    
        function processAllErrorHandler(err) {
    
        }
    
        function simpleTimeoutHandler() {
    
            MainUtils.showMessage("simpleTimeoutHandler is called...");
            console.log("simpleTimeoutHandler is executed.");
        }
    
        
        WinJS.Namespace.define("MainUtils",
            {
                showMessage: function (msg) {
    
                    MSApp.execUnsafeLocalFunction(function () {
                        var div = document.getElementById('divMessage');
                        div.innerHTML += "<br/>" + msg;
                    });
                }
            }
            );
    
    
        app.start();
    })();
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Friday, November 9, 2012 6:20 AM
    Wednesday, October 24, 2012 9:50 AM
    Moderator

All replies

  • Hi,

    Please have a try with Promise.timeout method.

    http://msdn.microsoft.com/en-us/library/windows/apps/br229729.aspx


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    Monday, October 22, 2012 7:53 AM
  • Hi Greatwall,

    I've performed a quick test with the similar code logic as you mentioned, it seems adding window.setTimeout call will not cause UI into problem. I think the problem you encounter is likely due to other code logic in the downloadFiles function (and the UI elements it will manipulate). Below is the main js code of my test app (created from a Blank windows store js project):

    // For an introduction to the Blank template, see the following documentation:
    // http://go.microsoft.com/fwlink/?LinkId=232509
    (function () {
        "use strict";
    
        WinJS.Binding.optimizeBindingReferences = true;
    
        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;
    
        app.onactivated = function (args) {
            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: This application has been newly launched. Initialize
                    // your application here.
                } else {
                    // TODO: This application has been reactivated from suspension.
                    // Restore application state here.
    
                    
                }
                args.setPromise(
                    WinJS.UI.processAll().then(processAllCompleteHandler, processAllErrorHandler)
                    );
               
                // Use js timer
                MainUtils.showMessage("before setTimeout...");
                window.setTimeout(simpleTimeoutHandler, 10000);
    
               }
        };
    
        app.oncheckpoint = function (args) {
            // TODO: This application is about to be suspended. Save any state
            // that needs to persist across suspensions here. You might use the
            // WinJS.Application.sessionState object, which is automatically
            // saved and restored across suspension. If you need to complete an
            // asynchronous operation before your application is suspended, call
            // args.setPromise().
        };
    
    
      
    
    
        function processAllCompleteHandler(val) {
    
            MainUtils.showMessage("ProcessAll complete...");
        }
    
        function processAllErrorHandler(err) {
    
        }
    
        function simpleTimeoutHandler() {
    
            MainUtils.showMessage("simpleTimeoutHandler is called...");
            console.log("simpleTimeoutHandler is executed.");
        }
    
        
        WinJS.Namespace.define("MainUtils",
            {
                showMessage: function (msg) {
    
                    MSApp.execUnsafeLocalFunction(function () {
                        var div = document.getElementById('divMessage');
                        div.innerHTML += "<br/>" + msg;
                    });
                }
            }
            );
    
    
        app.start();
    })();
    


    Please remember to mark the replies as answers if they help and unmark them if they provide no help. Putting communities in your palms. Launch the browser on your phone now, type aka.ms/msforums and get connected!

    • Marked as answer by Song Tian Friday, November 9, 2012 6:20 AM
    Wednesday, October 24, 2012 9:50 AM
    Moderator
  • yes, it is my code's problem. Thanks

    Great Wall

    Sunday, October 28, 2012 6:29 PM