locked
Rendering based on content type in Windows 8 app

    Question

  • I'm creating a news reader app using HTML/JS for Windows 8. The content sources include videos, articles, blog posts, and DeepZoom images (using Seadragon AJAX). My question is two-fold:

    1. How can I render the list view icons based on the content type? The type of content  (video, article, etc.) is specified in the data source. I'm using a ListView databind currently, but it renders all UI exactly the same.
    2. Based on the content type, how can I load a different page or UI when the user chooses a piece of content? For example, articles have to be loaded in an iframe whereas a blog post is rendered in-app using toStaticHTML(). Videos will be opened in a fullscreen media player. This seems common across reader apps, so I assume this is possible.

    Thanks for any help with this! 

    -D

    Wednesday, November 28, 2012 7:19 PM

All replies

  • Just in case anyone is interested in the answer for #2, I ended up doing this by injecting items into a top-level DIV. In the ready() function for itemDetail, I did a switch statement using a content type enumeration, used WinJS.Utilities.empty on the top-level DIV, created what I needed (iframe, another DIV, Seadragon container, etc.), and did an appendChild. I'm not sure if this is the right pattern to follow, but it works. :)

    Example:

    itemDetail.html:

    <div class="content" role="main"></div>

    itemDetail.js:

    WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {
        ready: function (element, options) {
             var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
             element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
             var contentDiv = element.querySelector(".content");
             switch (item.ctype) {
                 case Enumerations.ContentType.ARTICLE:
                 {
                        WinJS.Utilities.empty(contentDiv);
                        var iframe = document.createElement("iframe");
                        iframe.src = item.url;
                        contentDiv.appendChild(iframe);
                        break;
                   }
                   ...             //Rest of the cases here

    Thursday, November 29, 2012 12:43 AM