locked
Example using top appbar with images in single-page-navigation

    Question

  • Can someone help on programming a custom top appbar with own images like the finanz app delivered with Windows 8. I could not find an example to integrate the custom images into the navigation pattern with single-page-navigation and proper event handling.


    Friday, September 14, 2012 7:18 AM

Answers

  • HI

    This is a complicated question about how to implement the finance app Navigation logic.

    The finance app define a namespace :"PlatformJS.Navigation" and in this namespace it implement:

    verify uri, navigates to a specific applink, create an applink navigation action and so on.

    So I suggest read that function and try to understand them!

    You can find this app's source code in your own computer.

    In my PC, this js file is in:

    C:\Program Files\WindowsApps\Microsoft.BingFinance_1.2.0.135_x64__8wekyb3d8bbwe\platform\js\navigation.js

    And I also suggest you read:

    C:\Program Files\WindowsApps\Microsoft.BingFinance_1.2.0.135_x64__8wekyb3d8bbwe\default.html

    To get the hole project structure.

     


    • Edited by Dino He Tuesday, September 18, 2012 2:20 AM
    • Marked as answer by Dino He Monday, September 24, 2012 2:16 AM
    Tuesday, September 18, 2012 2:18 AM
  • For example the finance app includes a home button in the app bar. I used quite some time to figure out how you implement a home button in the single-page-navigation.

    Following is the code implementing the event handler for the image link:

    function () { "use strict"; var page = WinJS.UI.Pages.define("/html/appbartop.html", { ready: function (element, options) {

    WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); }, unload: function () { } }); // goto page address function linkClickEventHandler(eventInfo) { eventInfo.preventDefault(); var link = eventInfo.target.parentElement; // use the parent element to get the href and not img var href = link.href; var pathname = link.pathname; var nav = WinJS.Navigation; // hide the appbar document.getElementById('appBarTop').winControl.hide();

    // navigate to page only if not already there if (nav.location !== href && nav.location !== pathname) { // check if it is the home to navigate and go back instead of navigate if (pathname == Application.navigator.home) { var backlen = nav.history.backStack.length if (backlen > 0) { // go n steps back to the home page nav.back(backlen); } } else { nav.navigate(href); } } } })();



    Monday, September 17, 2012 9:21 PM

All replies

  • Hi

    In xaml they use:

    <Page.TopAppBar>
    <AppBar>
    <!--App Bar Contents here -->
    </AppBar>
    </Page.TopAppBar>


    For the top AppBar

    But in javascript, all you need to do is set the placement property on the data-win-options.

    Here is a example:

    <div id="createAppBar"
         data-win-control="WinJS.UI.AppBar"
         data-win-options="{placement: 'top'}">
         <button data-win-control="WinJS.UI.AppBarCommand"
                 data-win-options="{id:'cmdBack',label:'Refresh',icon:'refresh',section:'global',tooltip:'Refresh'}">
         </button>
    </div>

    And for more information please refer to:

    http://msdn.microsoft.com/en-us/library/windows/apps/Hh780658.aspx

    Monday, September 17, 2012 7:55 AM
  • For example the finance app includes a home button in the app bar. I used quite some time to figure out how you implement a home button in the single-page-navigation.

    Following is the code implementing the event handler for the image link:

    function () { "use strict"; var page = WinJS.UI.Pages.define("/html/appbartop.html", { ready: function (element, options) {

    WinJS.Utilities.query("a").listen("click", linkClickEventHandler, false); }, unload: function () { } }); // goto page address function linkClickEventHandler(eventInfo) { eventInfo.preventDefault(); var link = eventInfo.target.parentElement; // use the parent element to get the href and not img var href = link.href; var pathname = link.pathname; var nav = WinJS.Navigation; // hide the appbar document.getElementById('appBarTop').winControl.hide();

    // navigate to page only if not already there if (nav.location !== href && nav.location !== pathname) { // check if it is the home to navigate and go back instead of navigate if (pathname == Application.navigator.home) { var backlen = nav.history.backStack.length if (backlen > 0) { // go n steps back to the home page nav.back(backlen); } } else { nav.navigate(href); } } } })();



    Monday, September 17, 2012 9:21 PM
  • HI

    This is a complicated question about how to implement the finance app Navigation logic.

    The finance app define a namespace :"PlatformJS.Navigation" and in this namespace it implement:

    verify uri, navigates to a specific applink, create an applink navigation action and so on.

    So I suggest read that function and try to understand them!

    You can find this app's source code in your own computer.

    In my PC, this js file is in:

    C:\Program Files\WindowsApps\Microsoft.BingFinance_1.2.0.135_x64__8wekyb3d8bbwe\platform\js\navigation.js

    And I also suggest you read:

    C:\Program Files\WindowsApps\Microsoft.BingFinance_1.2.0.135_x64__8wekyb3d8bbwe\default.html

    To get the hole project structure.

     


    • Edited by Dino He Tuesday, September 18, 2012 2:20 AM
    • Marked as answer by Dino He Monday, September 24, 2012 2:16 AM
    Tuesday, September 18, 2012 2:18 AM