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.

Answer 1

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

Answer 2

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);
            }
        }
    }


})();

Answer 3

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.