Working With OData and WinJS ListView in Windows Store Application

Dhananjay Kumar
Jan 07, 2013
8.1k
0
0
Article

In this article we will see how to consume a Netflix OData feed in a HTML based Metro Application. The movies information will be displayed as in the following. At the end of this article, we should have output as follows:

Netflix exposed all movie information as OData and is publicly available to use. The Netflix OData feed of movies is available at the following location:

http://odata.netflix.com/Catalog/

Essentially we will pull the movies information from Netflix and bind it to a ListView Control of WinJS. We will start by creating a blank application:

In the code behind (default.js) define a variable of type WinJS List.

Now we need to fetch the movie details from Netflix. For this we will use the xhr function of WinJS. As the parameter of the function, we must provide an URL of the OData feed:

In the above code snippet, we are doing the following:

Making a call to Netflix OData using the WinJS .xhr function
As an input parameter to the xhr function, we are passing an exact URL of the OData endpoint.
We are applying projection and providing JSON format information in URL itself.
Once the JSON data is fetched from Netflix, the server data is being parsed and pushed as individual items in the WinJS list.

As of now we do have data. Now let us go ahead and create a ListView control. You can create a WinJS ListView as in the following. Put the following code in the default.html:

In the above code we are simply creating a WinJS ListView and setting up some basic attributes like layout and itemTemplate. Now we need to create an Item Template. The Template is used to format data and controls for displaying the data. The Template can be created as in the following:

In the above code, we are binding data from the data source to various HTML element controls. At last in the code behind we need to set the data source of the ListView:

Before running the application, just use some CSS to make the ListView more immersive. Put the following CSS in default.css:

Now go ahead and run the application. You should be getting the expected output as in the following.

Let us consolidate all the preceding code.

Default.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>testdemo</title>
    
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>
        Netflix Movie Application</h1>
    <div id="moviesTemplate" data-win-control="WinJS.Binding.Template">
        <div style="width: 150px; height: 130px;">
            <img src="#" style="width: 100px; height: 100px;" data-win-bind="alt: title; src: picture" />
            <div>
                <h4 data-win-bind="innerText:title">
                </h4>

            </div>
        </div>
    </div>
    <div id="movieListView" data-win-control="WinJS.UI.ListView" data-win-options="{itemTemplate : moviesTemplate,
                              layout: {type: WinJS.UI.GridLayout} }">
    </div>
</body>
</html>

Code behind will have following codes

Default.js

// For an introduction to the Blank template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232509

And CSS will be as following

default.css

body {
}
@media screen and (-ms-view-state: fullscreen-landscape)
{
}
@media screen and (-ms-view-state: filled)
{
}
@media screen and (-ms-view-state: snapped)
{
}
@media screen and (-ms-view-state: fullscreen-portrait)
{
}
.win-listview
{
     height: 100%;
     width: auto
}
.win-listview .win-container
{
    margin: 10px;
}
.win-listview .win-container:hover