Search code examples
pivotwinjsappbar

Navigate to standalone control pages from Pivot WinJS application

I'm just learning to develop Windows Store apps in JavaScript and I'm facing the following issue. Just to make it clear I'll explain the steps to reproduce the problem:

  1. Create a new windows phone dynamic application (Pivot) from VS 2013 update 4.

  2. In page section1Page.html I have added an app bar:
    <div id="AppBarS1" data-win-control="WinJS.UI.AppBar"> <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdAdd',icon:'add',section:'primary'}" data-win-res="{ winControl: {'tooltip': 'AppBarAddTooltip', 'label':'AppBarAddLabel'} }"></button> </div>
    This is intended to navigate to a page with fields to be filled by the user and create a new object.

  3. In section1Page.js I have added the appbar event listener:
    var appBar = document.getElementById("AppBarS1").winControl; appBar.getCommandById("cmdAdd").addEventListener("click", gotoNewPage, false);

  4. In /js folder I've created a functions.js script file containing this function:
    function gotoNewPage() { WinJS.Navigation.navigate("/pages/standalone/newPage.html", null); }
  5. Finally, I have created the corresponding control page files in this path /pages/standalone/newPage.html and added a reference to functions.js into hub.html: <script src="/js/functions.js"></script>

Now if I execute the app and tap on the (+) button it navigates to the newPage correctly, but when I click on the back button, the app returns to the pivot pages, but the formatting is broken in all pivot sections adding like a big space between the title and the text.

Questions:

  1. Am I creating the appbar wrong? Is there a different estandard way to do it?
  2. Am I doing the navigation wrong? Should I use another different navigation method from pivot apps?

Please help. Thanks in advance.

Solution

  • I suspect the CSS file on the page you are navigating to. When you navigate to the newPage, the CSS file is loaded and applied, and then continues to take effect even after you navigate back to the original page.

    You can quickly test this by simply commenting out the link to the CSS file on your newPage.html. It will look bad when you navigate to it, but see if when you navigate back your calling page looks normal. If so, then there are styles in your stylesheet that are too broad in effect.

    To fix, the easiest way is to use the page name as a namespace element in all of your newPage style rules. The WinJS framework adds a class into the top level div for the page with the same name as the page, so you should have a newPage class value. That means that if you change a style rule from something like...

    .some-rule .some-other-rule { property: value; }

    to...

    .newPage .some-rule .some-other-rule { property: value; }

    ...then that rule will only apply to that page even when you navigate back.