locked
Lose focuse while navigation with appbar commands

    Question

  •  Hi 

    we deal with a problem to have focus after returning back to home page via appbar commands,

    we use this html code for the appbar

    <div id="upperAppBar" data-win-control="WinJS.UI.AppBar"  data-win-options="{layout:'custom',placement:'top'}">
            <div class="appbar">
                    <button id="cmdBack"  data-win-control="WinJS.UI.AppBarCommand" data-win-                                  
            </div>

    We add a listner for the "cmdBack" button:

    WinJS.Navigation.navigate(Application.navigator.home);

    Its indeed return back to home page but in order to use it we need to click on some point in 

    the screen.the intersteing issue is that the same code is working and focusing if the button

    is not within the appbar.

    its imoprtant to mention that document.body.focus() didn't help for us

    Thanks 



    • Edited by TomerBanin Tuesday, October 2, 2012 2:34 PM
    Tuesday, October 2, 2012 2:33 PM

Answers

  • Hi, TomerBanin,

    Problably you are working with "WinJS.UI.Pages.define", for each page. So, when you define the pages, you have the "ready" function, for example, that is called everytime your page is loaded. The same happen to the "unload" function, that is called when your page is about to be unloaded. In my opinion, is a good practice, when you are navigating between pages using appbar, to add a code like bellow:

    unload: function () {
       var appbar = document.querySelector("#appbar").winControl;
       appbar.hide();
    }

    This way, you are saying to the appbar hide everytime you navigate a page to another.

    Thanks

    • Marked as answer by Song Tian Thursday, October 18, 2012 7:01 AM
    Thursday, October 4, 2012 4:21 PM

All replies

  • Hi, TomerBanin,

    Could you please give more details,

    I understood that you are using the navigator.js, so, your app bar is placed in a "default.html' that load the other fragments, correct?

    When you navigate home, the app bar is still in a "show" state?

    When you say that you lose the focus, this mean that you have to click twice on the body area to do some actions over there?

    Thanks

    Wednesday, October 3, 2012 12:17 PM
  • Hi 

    thanks for your replay.

    I understood that you are using the navigator.js, so, your app bar is placed in a "default.html' that load the other fragments, correct? 

    yes exactly.

    When you navigate home, the app bar is still in a "show" state?

    i think not because its not showing on the screen,how can i determine if its still in show "state"?.

    When you say that you lose the focus, this mean that you have to click twice on the body area to do some actions over there?

    yes exactly.

    i found some workaround yesterday but will be pleased to have an answer for this issue 

    the soultion that i found is to add this css rule to default.css file

    .win-appbarclickeater {
     display:none !important ;
    }

    i don't really know what this div css "class" responsabile of (searching the web for this css "class" lead to no result),but it solved the problem.

    Thanks again


    Wednesday, October 3, 2012 12:50 PM
  • Hi, TomerBanin,

    Problably you are working with "WinJS.UI.Pages.define", for each page. So, when you define the pages, you have the "ready" function, for example, that is called everytime your page is loaded. The same happen to the "unload" function, that is called when your page is about to be unloaded. In my opinion, is a good practice, when you are navigating between pages using appbar, to add a code like bellow:

    unload: function () {
       var appbar = document.querySelector("#appbar").winControl;
       appbar.hide();
    }

    This way, you are saying to the appbar hide everytime you navigate a page to another.

    Thanks

    • Marked as answer by Song Tian Thursday, October 18, 2012 7:01 AM
    Thursday, October 4, 2012 4:21 PM
  • this work for me 

    thanks 

    Monday, October 8, 2012 9:25 PM