locked
Adding an App Bar and/or Back Bar to a Blank Metro Javascript App

    Question

  • Hello! Sorry if I've just overlooked something while searching for the answer to this question; I'm new to Metro app development (well, relatively new seeing as though the WDP has been out only for about a month or two now).

    I've created a blank JavaScript app (New Project -> JavaScript -> Blank Application) and added some stuff to it. How do I add an appbar to my application? Also, in a lot of Metro apps there are "Back Bars" where it's like a white strip along the left side of the page with a Metro style back button at the top...is there an easy way to implement this? Finally, is there a file or something on the WDP that contains the standard Metro icons?

    Thanks,

    Matthew

    Monday, January 23, 2012 11:41 PM

Answers

  • Hey Matthew,
    To add an Appbar you can use the WinJS.UI.AppBar control.  You also need to include some of the js libraries to support the control and animation.  Here is a stripped down sample:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>WinWebAppBar</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
       <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
       <script src="/winjs/js/wwaapp.js"></script>
    
        <!-- WinWebAppBar references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div id="contentHost">Here is some content</div>
        <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
            <div class="win-left">
                <button id="home" class="win-command">
                    <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
                </button>
            </div>
        </div>
    </body>
    </html>
    

    You will see I added some data-win-options per: http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx
    Right mouse click, WindowsKey+Z or touch swipe up from the bottom will bring up the appbar with the data-win-options I have selected.
    The different icons (home, back arrow etc... are not icons but a text char.  You can open the Character Map application and load the 'Segoe UI Symbol' font to see other possible values (you will see the home character there).
    To add the back arrow you can use this class (which is just CSS discoverable with the DOM explorer:
    <button class="win-backbutton" aria-label="Back"></button>

     You will need to position it correctly using CSS however.
    Here is a title and button:
           <header role="banner" aria-label="Header content">
                <button disabled class="win-backbutton" aria-label="Back"></button>
                <h1 class="pageTitle win-title">My Page</h1>
            </header>
    
    and some CSS to position it all:
    body {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-rows: 132px 1fr 0px;
        -ms-grid-columns: 1fr;
    }
    
    header[role=banner] {
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }
    
    header[role=banner] .win-backbutton {
        margin-left: 40px;
        margin-top: 60px;
    }
    
    header[role=banner] .titleArea {
        -ms-grid-column: 2;
    }
    
    header[role=banner] .pageTitle {
        -ms-grid-column: 2;
        margin-top: 44px;
        height: 60pt;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-left: -4px;
        display: inline-block;
    }
    
     .contentHost {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 2;
        margin-left: 80px;
        margin-right: 64px;
        padding-right: 24px;
        overflow-y: auto;
    }

    Check out one of the templates with the DOM Explorer in Visual Studio to investigate the CSS style and positioning of these elements.
    -Jeff
     

    Jeff Sanders (MSFT)
    Tuesday, January 24, 2012 2:42 PM
    Moderator
  • Hi Matthew,

    For all of the UI controls you have to initialize them after the page loads.  You do this by calling WinJS.UI.processAll(). Something similar to this in your page .js file should enable the correct behavior of the app bar:

     

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        // Debug.enableFirstChanceException(true);
    
        WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function (){ });
            }
        }
    
        WinJS.Application.start();
    })();

    -Jeff


    Jeff Sanders (MSFT)
    Wednesday, January 25, 2012 2:22 PM
    Moderator
  • Hi Matthew,

    Do not use window.location= in your application.  It will not work for you.

    You should probably be using fragments.  Take a look how the templates work when you create an app from the templates in VS.

    You want to use the WinJS.Navigation.navigate function instead.

    Also see this article: http://msdn.microsoft.com/en-us/library/windows/apps/hh465301.aspx

    -Jeff

     


    Jeff Sanders (MSFT)
    • Marked as answer by Matthew_Thepc Saturday, January 28, 2012 5:16 PM
    Friday, January 27, 2012 3:26 PM
    Moderator

All replies

  • Hey Matthew,
    To add an Appbar you can use the WinJS.UI.AppBar control.  You also need to include some of the js libraries to support the control and animation.  Here is a stripped down sample:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>WinWebAppBar</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
       <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
       <script src="/winjs/js/wwaapp.js"></script>
    
        <!-- WinWebAppBar references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div id="contentHost">Here is some content</div>
        <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
            <div class="win-left">
                <button id="home" class="win-command">
                    <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
                </button>
            </div>
        </div>
    </body>
    </html>
    

    You will see I added some data-win-options per: http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx
    Right mouse click, WindowsKey+Z or touch swipe up from the bottom will bring up the appbar with the data-win-options I have selected.
    The different icons (home, back arrow etc... are not icons but a text char.  You can open the Character Map application and load the 'Segoe UI Symbol' font to see other possible values (you will see the home character there).
    To add the back arrow you can use this class (which is just CSS discoverable with the DOM explorer:
    <button class="win-backbutton" aria-label="Back"></button>

     You will need to position it correctly using CSS however.
    Here is a title and button:
           <header role="banner" aria-label="Header content">
                <button disabled class="win-backbutton" aria-label="Back"></button>
                <h1 class="pageTitle win-title">My Page</h1>
            </header>
    
    and some CSS to position it all:
    body {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-rows: 132px 1fr 0px;
        -ms-grid-columns: 1fr;
    }
    
    header[role=banner] {
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }
    
    header[role=banner] .win-backbutton {
        margin-left: 40px;
        margin-top: 60px;
    }
    
    header[role=banner] .titleArea {
        -ms-grid-column: 2;
    }
    
    header[role=banner] .pageTitle {
        -ms-grid-column: 2;
        margin-top: 44px;
        height: 60pt;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-left: -4px;
        display: inline-block;
    }
    
     .contentHost {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 2;
        margin-left: 80px;
        margin-right: 64px;
        padding-right: 24px;
        overflow-y: auto;
    }

    Check out one of the templates with the DOM Explorer in Visual Studio to investigate the CSS style and positioning of these elements.
    -Jeff
     

    Jeff Sanders (MSFT)
    Tuesday, January 24, 2012 2:42 PM
    Moderator
  • Hey Matthew,
    To add an Appbar you can use the WinJS.UI.AppBar control.  You also need to include some of the js libraries to support the control and animation.  Here is a stripped down sample:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>WinWebAppBar</title>
        <!-- WinJS references -->
        <link rel="stylesheet" href="/winjs/css/ui-dark.css" />
       <script src="/winjs/js/base.js"></script>
        <script src="/winjs/js/ui.js"></script>
        <script src="/winjs/js/controls.js"></script>
        <script src="/winjs/js/animations.js"></script>
       <script src="/winjs/js/wwaapp.js"></script>
    
        <!-- WinWebAppBar references -->
        <link rel="stylesheet" href="/css/default.css" />
        <script src="/js/default.js"></script>
    </head>
    <body>
        <div id="contentHost">Here is some content</div>
        <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{position:'bottom', transient:true, autoHide:0, lightDismiss:false}">
            <div class="win-left">
                <button id="home" class="win-command">
                    <span class="win-commandicon win-large">&#xE10F;</span><span class="win-label">Home</span>
                </button>
            </div>
        </div>
    </body>
    </html>
    

    You will see I added some data-win-options per: http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx
    Right mouse click, WindowsKey+Z or touch swipe up from the bottom will bring up the appbar with the data-win-options I have selected.
    The different icons (home, back arrow etc... are not icons but a text char.  You can open the Character Map application and load the 'Segoe UI Symbol' font to see other possible values (you will see the home character there).
    To add the back arrow you can use this class (which is just CSS discoverable with the DOM explorer:
    <button class="win-backbutton" aria-label="Back"></button>

     You will need to position it correctly using CSS however.
    Here is a title and button:
           <header role="banner" aria-label="Header content">
                <button disabled class="win-backbutton" aria-label="Back"></button>
                <h1 class="pageTitle win-title">My Page</h1>
            </header>
    
    and some CSS to position it all:
    body {
        width: 100%;
        height: 100%;
        display: -ms-grid;
        -ms-grid-rows: 132px 1fr 0px;
        -ms-grid-columns: 1fr;
    }
    
    header[role=banner] {
        display: -ms-grid;
        -ms-grid-columns: 120px 1fr;
        -ms-grid-rows: 1fr;
    }
    
    header[role=banner] .win-backbutton {
        margin-left: 40px;
        margin-top: 60px;
    }
    
    header[role=banner] .titleArea {
        -ms-grid-column: 2;
    }
    
    header[role=banner] .pageTitle {
        -ms-grid-column: 2;
        margin-top: 44px;
        height: 60pt;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        margin-left: -4px;
        display: inline-block;
    }
    
     .contentHost {
        -ms-grid-column: 1;
        -ms-grid-row: 2;
        -ms-grid-row-span: 2;
        margin-left: 80px;
        margin-right: 64px;
        padding-right: 24px;
        overflow-y: auto;
    }

    Check out one of the templates with the DOM Explorer in Visual Studio to investigate the CSS style and positioning of these elements.
    -Jeff
     

    Jeff Sanders (MSFT)


    Thanks for the back button/etc, that all worked great :D

    But the problem I'm running into when using the AppBar code you provided is that all I see is Home button appearing under my pages content, not the home button appearing in an app bar and only when I bring it up :/

    Thanks,

    Matthew

    Tuesday, January 24, 2012 11:47 PM
  • Hi Matthew,

    For all of the UI controls you have to initialize them after the page loads.  You do this by calling WinJS.UI.processAll(). Something similar to this in your page .js file should enable the correct behavior of the app bar:

     

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        // Debug.enableFirstChanceException(true);
    
        WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function (){ });
            }
        }
    
        WinJS.Application.start();
    })();

    -Jeff


    Jeff Sanders (MSFT)
    Wednesday, January 25, 2012 2:22 PM
    Moderator
  • Hi Matthew,

    For all of the UI controls you have to initialize them after the page loads.  You do this by calling WinJS.UI.processAll(). Something similar to this in your page .js file should enable the correct behavior of the app bar:

     

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        // Debug.enableFirstChanceException(true);
    
        WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function (){ });
            }
        }
    
        WinJS.Application.start();
    })();

    -Jeff

     


    Jeff Sanders (MSFT)

    Thank you very much, it worked perfectly :D
    Wednesday, January 25, 2012 11:37 PM
  • Hi Matthew,

    For all of the UI controls you have to initialize them after the page loads.  You do this by calling WinJS.UI.processAll(). Something similar to this in your page .js file should enable the correct behavior of the app bar:

     

    (function () {
        'use strict';
        // Uncomment the following line to enable first chance exceptions.
        // Debug.enableFirstChanceException(true);
    
        WinJS.Application.onmainwindowactivated = function (e) {
            if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
                WinJS.UI.processAll().then(function (){ });
            }
        }
    
        WinJS.Application.start();
    })();

    -Jeff

     


    Jeff Sanders (MSFT)


    So after playing with this a while it appears that going back to the page that has an appbar (say, default.html) thru something like window.location = "default.html"; causes the appbar to stop working?

    Thanks,

    Matthew

    Friday, January 27, 2012 12:13 AM
  • Hi Matthew,

    Do not use window.location= in your application.  It will not work for you.

    You should probably be using fragments.  Take a look how the templates work when you create an app from the templates in VS.

    You want to use the WinJS.Navigation.navigate function instead.

    Also see this article: http://msdn.microsoft.com/en-us/library/windows/apps/hh465301.aspx

    -Jeff

     


    Jeff Sanders (MSFT)
    • Marked as answer by Matthew_Thepc Saturday, January 28, 2012 5:16 PM
    Friday, January 27, 2012 3:26 PM
    Moderator
  • Hi,

    I added appbar, initialised it and included all required js files. But still only the button comes. No app bar :(. Pls help.

    WinJS.UI.processAll().then(function(){});

    <divid="AppBar"data-win-control="WinJS.UI.AppBar"data-win-options="{>

    <divclass="win-left">
    <buttonid="button1"class="win-command">

    <spanclass="win-commandicon win-large"></span><spanclass="win-label">check</span>

    </button>

    </div>

    <divclass="win-right">

    <buttonid="button2"class="win-command">

    <spanclass="win-commandicon win-large"></span><spanclass="win-label">checkright</span>

    </button>

    </div>

    </div>

    Thanks,

    Karti.


    • Edited by ArunKarthika Saturday, February 11, 2012 5:29 PM
    Saturday, February 11, 2012 5:23 PM
  • Hi Arun,

    If you have done all of these things correctly it should work fine.  Compare my stripped down sample with your code (jan 24). 


    Jeff Sanders (MSFT)

    Tuesday, February 21, 2012 1:25 PM
    Moderator
  • By the way, I've checked the link you mentioned (http://msdn.microsoft.com/en-us/library/windows/apps/br229670.aspx). It is not explicity said anywhere what are the option you can pass. 
    Anyway, I played around with the 'position' option and it did not work. Had to rename it 'placement', as the property. I hope the same renaming holds for all other data-win-options.

    • Edited by GiUmaTo Saturday, May 26, 2012 3:48 PM
    Saturday, May 26, 2012 3:47 PM