locked
unable to localize windows app bar command button strings like"add" , "remove".

    Question

  • i am using an app bar in my html & js app like this

    <div data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand"

    data-win-res="{winControl: {label:'font'}}"

      data-win-options="{icon:'add',label:'font',id:'plus', section:'global'}">

    </button>

    now when i started my multi-lingual app tool kit & rebuilding the solution , all the strings are converted except strings of app bar such as label:'font' , i have already implemented the  WinJS.Resources.processAll(); function in default.js file , do i have to add any extra code exclusively for loading of app bar string resources?? , if so please explain me how? (please don't provide microsoft links , i understood nothing from it)

     
    Saturday, August 03, 2013 11:53 AM

Answers

  • Hi,

    The thing is, to localize an App bar, you have to create the buttons on the Javascript side, not on the HTML side.

    Let's say your HTML has the App bar with an ID of "myAppBar", clear all the buttons on the HTML.

    Now, if this is a Global App Bar (used in your whole App) you probably have your functions declared on the "default.js" file, if not, if its local to some Page Control, go to that Page Control's js file.

    On the  "ready" handler of the Page Control (or the "activated" handler of your default.js file, depending where is the AppBar used and the functions declared), you will do something like:

    var appbar = document.getElementById("myAppBar").winControl;
    
    var commands = [{ id: 'cmdAdd', label: WinJS.Resources.getString('add_resource').value, icon: 'add', section: 'global', tooltip: WinJS.Resources.getString('add_resource').value },
                    { id: 'cmdRemove', label: WinJS.Resources.getString('remove_resource').value, icon: 'remove', section: 'selection', tooltip: WinJS.Resources.getString('remove_resource').value },
                    { id: 'cmdModify', label: WinJS.Resources.getString('modify_resource').value, icon: 'edit', section: 'selection', tooltip: WinJS.Resources.getString('modify_resource').value }];
    appbar.commands = commands;

    I declared 3 buttons as an example, and the resources names' are "add_resource", "remove_resource" and "modify_resource" as examples, you can use whichever you want.

    This is the same as declaring the buttons on the HTML side, but you can use the localized resources.

    Finally, to hook the functions that will be called for each button just do:

    appbar.getCommandById("cmdAdd").addEventListener("click", function () {
    //function called for the Add button
    });
    appbar.getCommandById("cmdRemove").addEventListener("click", function () {
    //function called for the Remove button
    });
    appbar.getCommandById("cmdModify").addEventListener("click", function () {
    //function called for the Modify button
    });
    You can declare any button you want, just remember to set the correct "id" attribute on the button declaration and use the same "id" on the "appbar.getCommandById" call.

    Monday, August 05, 2013 3:02 PM

All replies

  • Hi,

    The thing is, to localize an App bar, you have to create the buttons on the Javascript side, not on the HTML side.

    Let's say your HTML has the App bar with an ID of "myAppBar", clear all the buttons on the HTML.

    Now, if this is a Global App Bar (used in your whole App) you probably have your functions declared on the "default.js" file, if not, if its local to some Page Control, go to that Page Control's js file.

    On the  "ready" handler of the Page Control (or the "activated" handler of your default.js file, depending where is the AppBar used and the functions declared), you will do something like:

    var appbar = document.getElementById("myAppBar").winControl;
    
    var commands = [{ id: 'cmdAdd', label: WinJS.Resources.getString('add_resource').value, icon: 'add', section: 'global', tooltip: WinJS.Resources.getString('add_resource').value },
                    { id: 'cmdRemove', label: WinJS.Resources.getString('remove_resource').value, icon: 'remove', section: 'selection', tooltip: WinJS.Resources.getString('remove_resource').value },
                    { id: 'cmdModify', label: WinJS.Resources.getString('modify_resource').value, icon: 'edit', section: 'selection', tooltip: WinJS.Resources.getString('modify_resource').value }];
    appbar.commands = commands;

    I declared 3 buttons as an example, and the resources names' are "add_resource", "remove_resource" and "modify_resource" as examples, you can use whichever you want.

    This is the same as declaring the buttons on the HTML side, but you can use the localized resources.

    Finally, to hook the functions that will be called for each button just do:

    appbar.getCommandById("cmdAdd").addEventListener("click", function () {
    //function called for the Add button
    });
    appbar.getCommandById("cmdRemove").addEventListener("click", function () {
    //function called for the Remove button
    });
    appbar.getCommandById("cmdModify").addEventListener("click", function () {
    //function called for the Modify button
    });
    You can declare any button you want, just remember to set the correct "id" attribute on the button declaration and use the same "id" on the "appbar.getCommandById" call.

    Monday, August 05, 2013 3:02 PM
  • thanx a lot ealsur
    Monday, August 05, 2013 3:13 PM
  • as you said i have done like this 

    1) on my default.html page i did 

    <div data-win-control="WinJS.UI.AppBar" id="mybar">
    </div>

    like this to create global app bar

    2)then i declared somewhere on default.js page  like this

    var appbar = document.getElementById("mybar").winControl;

     var commands = [{ id: 'add', label: WinJS.Resources.getString('add').value, icon: 'add', section: 'global', tooltip: WinJS.Resources.getString('add').value },
                        { id: 'remove', label: WinJS.Resources.getString('remove').value, icon: 'remove', section: 'selection', tooltip: WinJS.Resources.getString('remove').value }];
        appbar.commands = commands;

    but still my app failed , please see & tell me if i had done any mistake 

    Tuesday, August 06, 2013 6:27 AM
  • Did you declare the resources "add" and "remove" in your resource files? Are you writing that code after the WinJS.processAll() call? What is the error you are obtaining?

    I tried putting that code in a simple project and it worked.

    Tuesday, August 06, 2013 6:47 PM
  • yes i declared the resources "add" & "remove" in my resource file , yes i am writing the code in default.js after WinJS.processAll() call , i am getting error like this : JavaScript runtime error:Unable to get property 'winControl' of undefined or null reference.
    Wednesday, August 07, 2013 3:48 PM
  • That means the <div> of the AppBar can't be found on the default.html with that Id or that the control hasn't been processed yet. It could also happend if there are 2 controls with the same Id ("mybar").
    Wednesday, August 07, 2013 6:24 PM
  • i have declared <div> of the app bar in default.html & given it an id "mybar", & no other control have this id , so please tell me how can i make the control to be processed.
    Thursday, August 08, 2013 1:10 AM
  • How to do this in XAML/C# Store app ?
    Friday, October 11, 2013 7:14 PM
  • Hi Vinayak,

    Please post a new thread with your specific question in the Building Windows Store apps with C# or VB .

    --Rob

    Friday, October 11, 2013 7:29 PM
    Owner