Answered by:
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.
- Edited by Bruno proITservice Friday, September 14, 2012 7:19 AM
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.
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); } } } })();
- Edited by Bruno proITservice Monday, September 17, 2012 9:28 PM
- Marked as answer by Bruno proITservice Wednesday, October 10, 2012 8:26 AM
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); } } } })();
- Edited by Bruno proITservice Monday, September 17, 2012 9:28 PM
- Marked as answer by Bruno proITservice Wednesday, October 10, 2012 8:26 AM
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.
Tuesday, September 18, 2012 2:18 AM