locked
how do you get the appBar reference in Javascript code

    Question

  • As per the thread http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/e55eff4b-8896-4bce-a64f-0acd27408dd4,

    I have created the app bar using following code:

    appBar1:

    <!DOCTYPE html>
    <html>
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title></title>
        </head>
        <body>
            <div id="appBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{section: 'global', label: 'New Item', icon: 'add'}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{section: 'global', label: 'Stores',
    icon: 'shop'}">
    </button>
    </div>
        </body>
    </html>

    In other page:

    <!-- import HTML fragments -->
    <div data-win-control="WinJS.UI.HtmlControl"
    data-win-options="{uri: '/html/appBar1.html'}"></div>
    <!-- end of HTML fragments -->
    <!-- template>

    Now the question is,

    1. How do you get the appBar reference in Javascript code? I tried document.getElementById("appBar").winControl, but it does not work.

    2. How do you install the event handlers on appbar commands here? I can not get the button reference in my javascript code.


    • Edited by John Rick Tuesday, October 09, 2012 3:19 PM
    Tuesday, October 09, 2012 2:58 PM

All replies

  • var appBar = document.querySelector("#appbar").winControl; appBar.getCommandById("shop").onclick = function() { //do something };

    You need to give each command an id in the data-win-options, that is how you reference it.

    data-win-options="{section: 'global', label: 'Stores', icon: 'shop', id: 'shop'}"

    Wednesday, October 10, 2012 5:50 PM
  • 1. 

    appBar.winControl;

    2.

    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',label:'Add',icon:'add',section:'global',tooltip:'Add item'}"></button> 

    Once you have specified an id you can get that command from js, and then:

    document.getElementById('cmdAdd').addEventListener("click", doClickAdd, false);
    
    function doClickAdd(){
    
    }
    Here you have a complete sample.


    Brian.

    Saturday, October 13, 2012 2:56 PM
  • It does not answer my question.

    See again the code code, I used to insert appBar. The app bar is not there in the current page, it resides in a separate page control. There is no documentation on how to get an element from aWinJS.UI.HtmlControl.

    Could someone help?

    Friday, October 19, 2012 4:39 PM
  • Well, the control is either available in the markup or it's not.  Doesn't matter which page control it is in.  If the app bar is showing up on the screen, use the DOM Explorer to figure out the ID and get a reference that way.  You can get references to anything in the UI from pretty much anywhere in the javascript if you know the ID, although you should always check if you have a valid reference before trying to do anything with it.
    Monday, October 22, 2012 4:20 PM