locked
Building FlipView for the standard Grid App

    Question

  • Hi,

    I am trying to add FlipView to the itemDetail page in the standard Grid App in VS 2012 so that the user can flip through each of the items in a group. But I'm getting an unhelpful error message which is leading me nowhere. Can someone help me with this? I'm attaching my itemDetail.html and itemDetail.js here:

    itemDetail.html:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>itemDetailPage</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
        <script src="/js/data.js"></script>
        <script src="/pages/itemDetail/itemDetail.js"></script>
    </head>
    <body>
        <div class="itemtemplate" id="itemtemplate" data-win-control="WinJS.Binding.Template">
            <article>
                <header>
                    <h2 class="item-title"></h2>
                    <h4 class="item-subtitle"></h4>
                </header>
                <img class="item-image" src="#" />
                <div class="item-content"></div>
            </article>
        </div>

        <div id="itemdetailpage" class= "itemdetailpage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle"></span>
                </h1>
            </header>
            <section aria-label="Main content" role="main">
                <div class="itemdetails" data-win-control="WinJS.UI.FlipView"></div>
            </section>
        </div>
    </body>
    </html>

    itemDetail.js:

    (function () {
        "use strict";

        WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {

            getAnimationElements: function () {
                return [[this.element.querySelector("header")], [this.element.querySelector(".content")]];
            },

            setPageFocus: function () {
                this.element.querySelector(".content").focus();
            },

            // This function is called whenever a user navigates to this page. It populates the page elements with the app's data.
            ready: function (element, options) {
                var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);           
                element.querySelector("article .item-title").textContent = item.title;
                element.querySelector("article .item-subtitle").textContent = item.subtitle;
                element.querySelector("article .item-image").src = item.backgroundImage;
                element.querySelector("article .item-image").alt = item.subtitle;
                element.querySelector("article .item-content").innerHTML = item.content;
                element.querySelector("header[role=banner] .pagetitle").textContent = item.group.title;
                var flipView = element.querySelector(".itemdetails").winControl;
                var itemTemplate = element.querySelector(".itemtemplate");
                flipView.itemTemplate = element.querySelector(".itemtemplate");
                flipView.itemDataSource = Data.getItemsFromGroup(item.group);
                flipView.layout = new WinJS.UI.Layout();  
            }
        });
    })();

    Thank you!

    • Changed type SriBSri Thursday, October 4, 2012 11:47 PM
    Wednesday, October 3, 2012 11:28 PM

All replies

  • Hello,

    Can anybody help me with this one?

    Thanks,

    -Sri

    Saturday, October 6, 2012 12:29 AM
  • What error are you getting? can you post the error/screenshot?
    Sunday, March 24, 2013 11:58 PM
  • And it would be helpful if you posted an entire project which reproduces this issue.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Monday, March 25, 2013 4:32 PM
    Moderator