Page control: constructors and life cycle


  • Hello guys.

    I've added a new Page control to my project and I'm curious about the constructor returned by WinJS.UI.Pages.define method parameters. For instance, suppose I've got the following control:

    (function () {
        "use strict";
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        var _picker = null;
        var _data = null;
        function ready(element, options) {
            _picker = document.getElementById("datepicker").winControl;
        function getData() {
            return _picker.current;
        function setData(data) {
            _picker.current = data;
        function updateLayout(element, viewState) {
            // TODO: Respond to changes in viewState.
        var ctr = WinJS.UI.Pages.define("/pages/pagina1.html", {
            ready: ready,
            updateLayout: updateLayout,
            data: {
                get: getData,
                set: setData
        WinJS.Namespace.define("Livro", { Pagina1: ctr });    

    According to intellisense, Livro.Pagina1 is a function which expects 4 parameters: HTML element, options object, complete function and a parent promise. Now, the question: shouldn't the complete function be called only after the control life cycle is over? My tests show that the handler is called before the control's ready function and that means that my data property is still not ready to get called...

    Luis Abreu

    Monday, March 12, 2012 2:07 PM


All replies

  • Hi Luis,

    When in doubt hit up the documentation:http://msdn.microsoft.com/en-us/library/windows/apps/hh770590.aspx

    Your control will be ready for use only when ready is called:

    Called after all initialization and rendering is complete. At this time, the element is ready for use.


    Jeff Sanders (MSFT)

    Monday, March 12, 2012 2:57 PM
  • Hello again Jeff.

    Well, that's not what I'm asking about here. I already have a reasonable understanding about the life cycle  of the Page control. The question is about the handler that gets passed as the 3rd parameter to  the control's constructor (the one that is returned from WinJS.UI.Pages.define). Intellisense calls its 3rd parameter completed. If it's called completed, it's only normal to assume that it will be called when the control is ready to be used. And in my tests, that function will be called *before* the control's ready function is called. In other words, when I write this code:

    var ctl = new Livro.Pagina1(document.getElementBydId("..."), null, doSomething);

    I expect doSomething to be called after the control has rendered itself. But that doesn't happen and I'm seeing it called before the control's ready function. And that's what I'm asking about: is this correct? Shouldn't doSomething be called after the control has rendered itself?

    Btw, I have found no documents that explain the parameters used by the constructor function returned from the WinJS.UI.Pages.define method, so all these are assumptions based on the names of the parameters and on my limited knowledge about the Metro WinJS library.

    Luis Abreu

    Monday, March 12, 2012 3:31 PM
  • Hi Luis,

    The completed parameter is part of the standard promise architecture, it simply means that promise is completed.  You need to use ready.

    Jeff Sanders (MSFT)

    Monday, March 12, 2012 3:50 PM
  • Hello again Jeff.

    hum...well, can you at least tell me when should that completed parameter I'm talking about  be called? I mean, what does it do? Btw, I've taken a quick peak at the code in define and it really looks like it should only fire after everything is ready (ie, way after ready has fired), but I might have got lost with all those then calls :)

    Luis Abreu

    Monday, March 12, 2012 9:11 PM
  • hi Luis, there is a listView in default.html as follow

    <div id="backupPictures"
                    data-win-options="{layout: {type: WinJS.UI.ListLayout}}"></div>

    but ,when i do this :

    listView = document.getElementById("backupPictures").winControl;

    the listView will be undefined,but if i use 

    listView = document.getElementById("backupPictures");

    listView will be ok.

    Cound you tell me why it happens?? why I get a undefined value if i use .winControl??


    Thursday, May 24, 2012 1:44 AM
  • Hello.

    Well, document.getElementById("backupPictures") will return a reference to the HTML div element. When you use the document.getElementById("backupPictures").winControl, you'll end up with the WinJS control. If it's returning null, then there's probably something wrong in the markup. The best way to see what's wrong is to pass an error handler to the process(All) method:

      .then(function(){ /*normal code here*/ },
                function(err){ /*check error during markup processing here. for instance, put a variable and add a breakpoint or something like that*/});

    Luis Abreu

    Thursday, May 24, 2012 7:34 AM