CODEWITHSUNDEEP
javascripthtmlwindows-8windows-runtimeappbar
Thomas Jørgensen
Thomas Jørgensen

Reputation: 1122

winjs appbar.wincontrol is null

I am creating a Windows 8 HTML5 app, and implementing an app bar. When I access the appbar.winControl it is always null. So if for example I write appbar.winControl.show() I get an exception claiming that winControl is null.

What I did was create a fixed layout app. Without doing anything else, I added the following markup in the document body:

<body>
<div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar">
    <button id="btnBoardSizeUp" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Larger', icon:'zoomout', section:'global', tooltip:'Increase the board size'}" />
    <button id="btnBoardSizeDown" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Smaller', icon:'zoomin', section:'global', tooltip:'Decrease the board size'}" />
    <button id="btnAbortGame" data-win-control="WinJS.UI.AppBarCommand" data-win-options="{label:'Abort', icon:'cancel', section:'selection', tooltip:'Abort the current game'}" />
</div>

<script type="text/javascript">
    var appbar = document.getElementById("appbar");
    var winControl = appbar.winControl;
    winControl.show();
</script>

The line winControl.show() produces the following error:

0x800a138f - JavaScript runtime error: Unable to get property 'show' of undefined or null reference

As far as I can see I have implemented the appbar correctly on the page, so it should work. Any idea what is going wrong?

Upvotes: 2

Views: 1130

Answers (2)

Yashwanth Kata
Yashwanth Kata

Reputation: 877

Whenever you use a winjs control (div with data-win-control attribute) to specify the control you want. You must also call the WinJS.UI.processAll function in your JavaScript code. WinJS.UI.processAll parses your markup and instantiates any Windows Library for JavaScript controls it finds.

  1. If you aren't using the Blank Application template or if you're
    adding the control to a page that you created yourself, you might
    need to add a call to WinJS.UI.processAll.
  2. If you added the control to your app's home page (which is usually the default.html file), add a call to WinJS.UI.processAll in your onactivated event handler, as shown in the previous example
  3. If you added the control to a Page control, you don't need to add a call to WinJS.UI.processAll because the Page control does that for you automatically.
  4. If you added the control to another page that is not your app's home page, handle the DOMContentLoaded event and use the handler to call WinJS.UI.processAll.

function initialize() {

WinJS.UI.processAll();

}

document.addEventListener("DOMContentLoaded", initialize(), false);

Upvotes: 1

Sushil
Sushil

Reputation: 5535

Page Controls are not initialized yet and script is executing before that.

There is two place this code can be placed. either in 

// if the app bar is part of default.html, appbar show can be put in default.js
// default.js already have a call to WinJS.UI.processAll under activated event handler
WinJS.UI.processAll().then(function ()
{
    appbar.winControl.show();
});

or 

// if the appbar is part of mypage.html, need to have code like this in mypage.js
WinJS.UI.Pages.define('/pages/mypage/mypage.html',
    {
         ready: function onready(element, options)
         {
             appbar.winControl.show();
         }
    }

Upvotes: 3

Related Questions