In this post we will see how to consume Netflix OData feed in HTML based Metro Application. Movies information will be displayed as following. At the end of this post, we should have output as below,
Netflix exposed all movies information as OData and that is publicly available to use. Netflix OData feed of movies are available at following location
http://odata.netflix.com/Catalog/
Essentially we will pull movies information from Netflix and bind it to ListView Control of WinJS. We will start with creating a blank application.
In the code behind (default.js) define a variable of type WinJS List.
Now we need to fetch the movies detail from Netflix. For this we will use xhr function of WinJS. As the parameter of function, we will have to provide URL of the OData feed.
In above code snippet, we are performing following tasks
- Making a call to Netflix OData using WinJS .xhr function
- As input parameter to xhr function, we are passing exact url of OData endpoint.
- We are applying projection and providing JSON format information in URL itself.
- Once JSON data is fetched form Netflix server data is being parsed and pushed as individual items in the WinJS list.
As of now we do have data with us. Now let us go ahead and create a ListView control. You can create WinJS ListView as following. Put below code on the default.html
In above code we are simply creating a WinJS ListView and setting up some basic attributes like layout and itemTemplate. Now we need to create Item Template. Template is used to format data and controls how data will be displayed. Template can be created as following
In above code, we are binding data from the data source to different HTML element controls. At last in code behind we need to set the data source of ListView
Before you go ahead and run the application just put some CSS to make ListView more immersive. Put below CSS in default.css
Now go ahead and run the application. You should be getting the expected output as following
Let us consolidate all the codes from discussion.
Default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>testdemo</title>
<!-- WinJS references -->
<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>
<!-- testdemo references -->
<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
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
WinJS.strictProcessing();
var movieArray = new WinJS.Binding.List();
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
WinJS.xhr({
url: "http://odata.netflix.com/Catalog/Titles" +
"?$format=json&$select=ShortName,BoxArt&$top=300"
}).then(function (xhr) {
var movies = JSON.parse(xhr.response).d;
movies.forEach(function (i) {
movieArray.push({
title: i.ShortName,
picture: i.BoxArt.MediumUrl
});
});
});
var lstMovies = document.getElementById("movieListView").winControl;
lstMovies.itemDataSource = movieArray.dataSource;
}
};
app.oncheckpoint = function (args) {
};
app.start();
})();
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 {
background-color: red;
border-color: red;
}
.semanticZoomItem
{
width: 130px;
height: 130px;
background-color: rgba(38, 160, 218, 1.0);
}
.semanticZoomItem .semanticZoomItem-Text
{
padding: 10px;
line-height: 150px;
white-space: nowrap;
color: white;
}
In this way we can work with OData and winJS ListView. I hope you find this post useful. Thanks for reading.
Follow @debug_mode
Dhananjay Kumar 
Leave a comment