locked
One AppBar per app or per page?

    General discussion

  • What is the best practice for adding an AppBar?  The template adds the AppBar to default.html, which lends one to believe that it should be 1 appbar per app.  But there are many cases where a command is only relevant to a particular page. So in that case, does it make sense to add the AppBarCommand via JavaScript?

    The Progressbar best practices says to add the progressbar to the appbar when the action is initiated via the appbar.  In that case it makes sense that the progress be shown on each page if the user continues to use the app while progress is happening.  The only way that would work would be if there was 1 global AppBar.

    • Changed type Dino He Sunday, July 29, 2012 10:02 AM
    Sunday, July 22, 2012 6:36 PM

All replies

  • I also have this question. I am using both a top and a bottom app bar. The top app bar will be used for navigation in the app. I assumed that the navigation app sample in the SDK would show this; however, it does not. :( 

    My bottom app bar is page specific--meaning that specific pages have some operations and others don't. However, the top app bar is consistent since it's used for navigation. I want to be able to affect styles on the bar through Javascript events for the top app bar so that I don't have to recreate the top bar on every page. Is there any guidance available about how to deal with the top and bottom app bars in a navigation app with page fragments?

    Monday, July 23, 2012 12:52 AM
  • HI

    You can define the appbar in sub html page.

    Please refer to HTML APP bar sample:

    http://code.msdn.microsoft.com/windowsapps/App-bar-sample-a57eeae9

    If you want to reuse a APP Bar in some page.

    You can first create a APPBar html.

    For example:

    appBar1:

    <!DOCTYPE html>
    <html>
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title></title>
        </head>
        <body>
            <div id="appBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{section: 'global', label: 'New Item', icon: 'add'}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{section: 'global', label: 'Stores',
    icon: 'shop'}">
    </button>
    </div>
        </body>
    </html>

    In other page:

    <!-- import HTML fragments -->
    <div data-win-control="WinJS.UI.HtmlControl"
    data-win-options="{uri: '/html/appBar1.html'}"></div>
    <!-- end of HTML fragments -->
    <!-- template>
    

    Monday, July 23, 2012 11:37 AM
  • And then what if you need some controls in the AppBar that are page specific?  Obviously you could add these elements via JavaScript, my question was about best practices.
    Monday, July 23, 2012 9:34 PM
  • Hi

    If the AppBar are page specific I think you can define it in specific page. You needn't javascript code.

    <!DOCTYPE html>
    <html>
        <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
            <title>Specific page</title>
        </head>
        <body>
            <div id="appBar" data-win-control="WinJS.UI.AppBar">
    <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{section: 'global', label: 'New Item', icon: 'add'}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
    data-win-options="{section: 'global', label: 'Stores',
    icon: 'shop'}">
    </button>
    </div>
        </body>
    </html>

    And you can define a appbar in default html and also define a specific appbar in other html.

    When you refer to that html, default appbar will be covered by the specific appbar.

    Tuesday, July 24, 2012 2:15 AM
  • Is there a recommended way or sample that shows the best way to show "selected" items in a navigational top app bar that is used as a fragment? For example, I have defined my top app bar in an html control in default.html. When the user invokes the top app bar and changes pages, I want the item that aligns in the top app bar to be shown as selected. I have CSS that is ready for this but have run into some issues with getting the JS to hit the top app bar fragment across the pages.
    Tuesday, July 24, 2012 5:27 PM
  • This unfortunately does not seem to be the case for WinJS 2.1 for Windows Phone. Applying a new WinJS.UI.AppBar in a sub page does not "cover" the default appbar. In fact it doesn't show at all and then when navigating back it bugs out the default one. 


    Monday, April 14, 2014 7:37 AM