WinJS -- default.js not refactorable to true AMD style: onactivated event does not fire

WinJS -- default.js not refactorable to true AMD style: onactivated event does not fire by PaulChristopher

Resolved

as External Help for as External

Type:	Bug
ID:	773996
Opened:	12/11/2012 12:10:04 AM
Access Restriction:	Public

Workaround(s)

view

User(s) can reproduce this bug

It is often mentioned in official Microsoft talks or books, that WinJS can be used together with an AMD loader. However if you refactor default.js to true AMD style, it does not work (see test case below): Of course the loader defers the application startup and app.start is called when all modules have been loaded. But this seems to be to late for WinJS: The only event that gets fired, is a "loaded event". The activated event is completely lost.

Details (expand)

Visual Studio 2012

- Grap Dojo Toolkit 1.8.1 from http://dojotoolkit.org/download/ and place it in the js folder

- Replace default.js with this code:
require([
    "dojo/ready",
    "dojo/parser",
    "dijit/registry",
    "dojo/dom",
    // non referenced includes
    "dijit/form/Button",
    "dijit/form/ValidationTextBox"
], function (ready, parser, registry, dom) {

        WinJS.Binding.optimizeBindingReferences = true;

        var app = WinJS.Application;
        var activation = Windows.ApplicationModel.Activation;

        app.onactivated = function (args) {

            console.log('app.onactivated');

            if (args.detail.kind === activation.ActivationKind.launch) {
                if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                    // TODO: Diese Anwendung wurde neu eingeführt. Die Anwendung
                    // hier initialisieren.
                } else {
                    // TODO: Diese Anwendung war angehalten und wurde reaktiviert.
                    // Anwendungszustand hier wiederherstellen.
                }

                /*registry.byId('myButton').on('click', function () {
                    dom.byId('greetingOutput').innerHTML = 'Hello ' + registry.byId('myInput').get('value') + ' !';
                });*/

            }
        };

        app.oncheckpoint = function (args) {
            // TODO: Diese Anwendung wird gleich angehalten. Jeden Zustand,
            // der über Anhaltevorgänge hinweg beibehalten muss, hier speichern. Dazu kann das
            // WinJS.Application.sessionState-Objekt verwendet werden, das automatisch
            // über ein Anhalten hinweg gespeichert und wiederhergestellt wird. Wenn ein asynchroner
            // Vorgang vor dem Anhalten der Anwendung abgeschlossen werden muss,
            // args.setPromise() aufrufen.
            console.log('app.oncheckpoint');
        };

        app.onloaded = function () {
            console.log('app.onloaded');
        };

        app.onready = function () {
            console.log('app.onready');
        };

        app.onerror = function () {
            console.log('app.onerror');
        };

        app.onsettings = function () {
            console.log('app.onsettings');
        };

        app.onunload = function () {
            console.log('app.onunload');
        };

        console.log('app.start');
        app.start();
});

- Replace default.html with this code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>HelloWorld</title>

    
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    
    <link rel="stylesheet" href="css/default.css">
    <link rel="stylesheet" href="js/dijit/themes/claro/claro.css">
    <script src="js/dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en'"></script>
    <script src="js/default.js"></script>
</head>
<body class="claro">
    <h1>Hello, world!</h1>
    <p>What's your name?</p>
    <input id="myInput" type="text" data-dojo-type="dijit/form/ValidationTextBox" />
    <button id="myButton" type="button" data-dojo-type="dijit/form/Button">Say "Hello"</button>
    <div id="greetingOutput"></div>
</body>
</html>

German

Windows 8

German

Console output is only: app.start app.onloaded. No onactivated event is fired.

Console output should be: app.start app.onactivated app.onloaded, i.e. events should be queued and fired in the appropriate order if the startup is deferred by an AMD loader (or other third party libs).

File Name	Submitted By	Submitted On	File Size
TestAMD.zip	PaulChristopher	1/16/2013	5.6 MB

Posted by Microsoft on 1/18/2013 at 9:45 AM

I was able to repro the issue. It looks like the initialization code run by the dijit library yields and subsequently we miss the app.activated event and don’t re-raise it. I’ve opened a bug for WinJS to examine if we can fix the issue in the next version.

In the meantime, there’s a reasonable workaround here (http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/2790d838-ccd9-42b1-ba08-d72d4f10858e) that involves moving your require declaration into the ready handler. While it doesn’t match the common AMD pattern, I hope this workaround will work for you for now.

Much thanks for reporting this; we want to ensure WinJS works well with other libraries, including Dojo.

Posted by PaulChristopher on 1/16/2013 at 12:21 AM

phuff, thank you for your feedback. Alas, the problem still exists for me. As you suggested: I have mailed you a zipped project file. Hopefully you can reproduce the issue. I am using Microsoft Visual Studio Express 2012 for Win8 Version 11.0.51106.01 Update 1 (Mircosoft .Net Framework Version 4.5.50709), Dojo 1.8.1.

Posted by Microsoft on 1/11/2013 at 2:13 PM

Thank you for reporting this issue, PaulChristopher. We tried to reproduce this issue with the code you provided, but we see all the events raised, including activated. If you are still seeing this issue, please mail a zipped project file that reproduces the bug to phuff -at- Microsoft -dot- com and we’ll investigate your repro directly.

Posted by PaulChristopher on 12/13/2012 at 2:36 AM

Closing this ticket without any comment and declaring it as "not our problem" is not very helpful. Apparently the onactivated event is not correctly queued if the app's startup is delayed by a third party library, in this case: an AMD loader.

This Microsoft book mentions that you can use Dojo Toolkit and AMD loaders: http://blogs.msdn.com/b/microsoft_press/archive/2012/08/20/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-second-preview.aspx.

Has this been thoroughly tested?

Please give some feedback on how this issue can be resolved and what needs to be changed in the third party library.

Posted by Microsoft on 12/11/2012 at 1:53 AM

Thanks for your feedback.

We are rerouting this issue to the appropriate group within the Visual Studio Product Team for triage and resolution. These specialized experts will follow-up with your issue.

Posted by Microsoft on 12/11/2012 at 12:50 AM

Thank you for your feedback, we are currently reviewing the issue you have submitted. If this issue is urgent, please contact support directly(http://support.microsoft.com)