Windows 8 Metro App has couple of wonderful ways to display data, the more common way is Grid and Split Application Template. (You can read more about Windows 8 Project Templates - Windows 8 JavaScript Metro Application–Getting Started).

But there are several other ways to display information, in this post I’ll demonstrate a FlipView control, that represents an items control that displays one item at a time, and which enables "flip" behavior for traversing its collection of items. The items on this FlipView control will come from my Blog Rss using SyndicationClient.

We’ll create a FlipView control and also build a navigation bar for FlipView items.

Download Demo Project

Step 1: Define Progress Bar

After we create a Blank JavaScript project, we want to define the progress bar (while loading the rss feeds), for that I’ve added a progress element.

Step 2: Add Item Template and FlipView Control

I’ve create a Template control that has item-content with the feed html and itemTitle that display the feed title.

<div id="ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
    <div class="overlaidItemTemplate">
        <div class="item-content" data-win-bind="innerHTML: content"></div>
        <div class="overlay">
            <h2 class="ItemTitle" data-win-bind="innerText: title"></h2>
        </div>
    </div>
</div>

Now I add a new div element of type FlipView and bind his itemTemplate object to our ItemTemplate.

<div id="flipview" class="flipView" data-win-control="WinJS.UI.FlipView" data-win-options="{ itemTemplate: ItemTemplate }">
</div>

Step 3: Get Blog Feeds

I’ve created a new JavaScript file called – data.js, I create a namspace for items object that returns getPosts function.

getPosts is a Asynchronous function (it return the feeds), using SyndicationClient I send me blog Rss uri and for each feed I get I convert it to feedItem object (that contains the title, link and content of the feed), then I add each feed to the Array called blogData and at the end return a List from that Array.

(function () {
    "use strict";
    var blogData = []; 
    var syn = new Windows.Web.Syndication.SyndicationClient();
    var url = new Windows.Foundation.Uri("http://feeds.feedburner.com/ShaiRaiten");

    function getPosts() {
        return syn.retrieveFeedAsync(url).then(function (feeds) {
            for (var i = 0, len = feeds.items.length; i < len; i++) {
                var item = new feedItem(feeds.items[i], i);
                blogData.push(item);
            }
            return new WinJS.Binding.List(blogData);
        }, helper.showError);
    }
  
   function feedItem(item, index) {
        this.title = item.title.text;
        this.link = item.links.first().current.nodeValue;
        this.content = item.summary.text;
    }
  
   WinJS.Namespace.define("data", {
        items: getPosts
    });
})();

Step 4: Bind Feeds To FlipView

On default.js in onactivated function we call the data.items() function and using then we make sure that only after we get the feeds we process the page, using querySelector we get the FlipView control and assign the itemDataSource to our list datasource.

This will display my feeds on the FlipView Control.

var dataArray = data.items().then(function (blogData) {
    posts = blogData;
    WinJS.UI.processAll().then(function () {
        var f = document.querySelector("#flipview").winControl;                            
        WinJS.UI.setOptions(f, { itemDataSource: posts.dataSource });
        helper.showLoading(false);
    }) 
}, helper.showError);

Step 5: Change FlipView Orientation Buttons

The next thing is to change the FlipView Orientation Buttons, this is a very simple task – Once the user click on the Horizontal button we call the changeOrientation function that checks what is the current Orientation and swipe it.

WinJS.UI.processAll().then(function () {
var f = document.querySelector("#flipview").winControl;
document.querySelector("#btnchangeOr").addEventListener("click", changeOrientation);
WinJS.UI.setOptions(f, { itemDataSource: posts.dataSource });
helper.showLoading(false);

The changeOrientation function:

function changeOrientation(e) {
    var f = document.querySelector("#flipview").winControl;
    if (f.orientation === "horizontal") {
        f.orientation = "vertical";
        e.srcElement.innerText = "Horizontal";
        } else {
        f.orientation = "horizontal";
        e.srcElement.innerText = "Vertical";
    }
}

Step 6: Build FlipView Navigation Bar

As I said in the beginning of this post, there are several ways to display data – when using FlipView control our user is forced to navigate the items one by one – Even if the user want to see the last item he has to go though all the items in the FlipView Control.

For that I built a simple navigation bar, you can adjust it with Feed titles and more – anything that will allow you user to quickly jump between items in FlipView control.

I’ve create another function called – buildIndex, this function received the total number or items in the FlipView control and for each control we create a RadioButton, each radio button a value telling the FlipView item Id and for click event we call radioButtonClicked function.

The radioButtonClicked function using the trigger object (The item which the user clicked on), we pull the value attribute and we change the FlipView curretPage object to that Id. this will force the FlipView Control to display that item.

Now, the user can still use the FlipView standard navigation buttons, so we need to listen to that event and based on the current page select the proper RadioButton.
We listen to “pageselected” event on the FlipView control and change the RadioButton based on the currentPage object (int).

Finally we add those RadioButtons to the DOM.

function buildIndex(count) {
    var f = document.querySelector("#flipview").winControl;
    var contextControl = document.createElement("div");
    contextControl.className = "contextControl";

    function radioButtonClicked(eventObject) { 
            var targetPage = eventObject.target.getAttribute("value");
            f.currentPage = parseInt(targetPage); 
    }
   
    // Create radio buttons for each page in the FlipView.
    var radioButtons = [];
    for (var i = 0; i < count; ++i) {
        var radioButton = document.createElement("input");
        radioButton.setAttribute("type", "radio");
        radioButton.setAttribute("name", "flipperContextGroup");
        radioButton.setAttribute("value", i);
        radioButton.setAttribute("aria-label", (i + 1) + " of " + count);
        radioButton.addEventListener("click", radioButtonClicked, false);
        radioButtons.push(radioButton);
        contextControl.appendChild(radioButton);
    }

    //  Set the currently checked item to the item the FlipView is
    //  currently on.
    if (count > 0) {
        radioButtons[f.currentPage].checked = true;
    }
    
    //  The context control needs to listen to FlipView events so
    //  that it can display what is currently in view.
    f.addEventListener("pageselected", function () { 
    // Need to set the current page.
        var page = f.currentPage;
        radioButtons[page].checked = true;
    }, false);

    //  Finally, we need to add the control into the DOM.
    var contextContainer = document.getElementById("ContextContainer");
    contextContainer.appendChild(contextControl);
}

Download Demo Project

Enjoy.