locked
Open repeated instance in new tab RRS feed

  • Question

  • I am writing my first metro app, and I'd like to add functionality similar to metro IE, with multiple tabs and their respective thumbnails shown in the navigation bar. My app is a book/reference reader, and users will want to have multiple sections open at once to cross-reference. I understand how to place an "add" button in the navigation bar and register a function to it, but I don't know what function needs to be added.

    I can't find this anywhere in the forums or samples, which surprises me. I assume it is something simple, because it's described so plainly in http://msdn.microsoft.com/en-us/library/windows/apps/hh868273.aspx under the "Commanding" section. 

    My first thought is that the new tab needs to have its own instance of WinJS.Navigation, though I'm not sure how to set that up.

    Any help would be appreciated. Thanks!

    Saturday, February 16, 2013 1:25 AM

Answers

  • Hi mwithers2010,

    The touch (metro) IE like app behavior you mentioned can be achieved through built-in features provided by windows store apps developed via HTML5 + javascript.

    First, you will need to customize the app bar of your windows store app so that it can display navigation bar (or other command buttons) as you like at the bottom. And at the top app bar, you can use Listview (or your custom UI elements) to display existing pages/contents user has opened in the app.


    #Quickstart: adding an app bar with custom content (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/Hh780658.aspx

    #How to make app bars work with ListViews (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/jj649138.aspx


    and whenever user use navigation bar to open a new page/content or click one of the already opened item in the top appbar, you just use Navigation api (via WinJS.Navigation.navigate function) to navigate to the content displaying page (supplying the certain parameters for identifying which page/content should be displayed). Of course, you will need to use the "Navigation App" template (or other template which has already added navigation related code) when creating your windows store app in VS 2012.


    #Quickstart: Using single-page navigation (Windows Store apps using JavaScript and HTML) (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/hh452768

    #WinJS.Navigation.navigate function (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/br229837.aspx


    this is just an overall idea of how you can design your app to support those features. And you can try exploring those navigation and app bar related samples for more ideas:

    http://code.msdn.microsoft.com/windowsapps


    BTW, the following free ebook is strongly recommended for you to getting started on windows store app development with html5 + javascript:



    #Free ebook: Programming Windows 8 Apps with HTML, CSS, and JavaScript (Second Preview)
    http://blogs.msdn.com/b/microsoft_press/archive/2012/08/20/free-ebook-programming-windows-8-apps-with-html-css-and-javascript-second-preview.aspx


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Friday, February 22, 2013 10:11 AM
    Monday, February 18, 2013 4:01 AM
    Moderator