Download source code of this article from here
In this article we will follow step by step approach to create Netflix Movie Explorer Metro Application. We will use HTML and WinJS to create this application. See the video to understand expected behavior of the application.
Some of the features of application are as following
- Browse movies from Netflix
- Rate the Movies
- Browse movies in Semantic views
- Share the Rating of a particular movie with social media or via mail
To get it started, launch Visual Studio and create a new project by choosing Blank App Project template from Windows Metro Style tab. You need VS12 to create this application.
After creating project in default.html change “content goes here “with following
After that follow the steps as below,
Step 1: Create Data Source
Very first we need to create data source by reading JSON data from OData feed of Netflix movie database. That can be done using WinJS.xhr function
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.
After fetching, data is being parsed using JSON Parser and individual items are pushed to movieArray. movieArray is defined as following
Step 2: Create ListView
After creating data source we need put WinJS ListView control on the page.
A HTML div can be converted to WinJS ListView by setting data-win-control attribute to WinJS.UI.ListView. Other options can be set like layout of the ListView. In this case we have set it to GridLayout, so data will be displayed horizontally. ListView needs data source to display data. Data source can be set either in HTML or in code behind. Let us set data source of movieListView to the movieArray.
Make sure that you are setting data source of ListView after the WinJS.xhr function call. At this point of time if you go ahead and run the application, you should be getting following output.
Step 3: Create ListView Template
In above output, data is in raw form. To make data more immersive and to show the way we want, we need to create template out of data. After creating template, it needs to be set as attribute of ListView. Template can be created as following
Template can be created by setting data-win-control attribute of HTML div as WinJS.Binding.Template . Inside div element
- Binding image to Picture property of WinJS List or Array
- Binding inner text of h4 element to Title property of WinJS List or Array
Once Template is created, it needs to be attached to the ListView. After attaching Template, ListView will be as following
No go ahead and run the application, you should be getting following shape of the application
Before we move ahead, let us put some CSS on ListView to make it more immersive
After applying styles on List View, your application should be in following shape.
Step 4: Grouping of DataSource
Next we want to group the movies as per first character of their title. For that create group functions as following.
After creating grouped functions, we need to create grouped item list and set it as itemDataSource of List View. Modify setting of ListView data source as following
Let us go ahead and run the application. At this point shape of the application should be as following
Step 5: Creating Header Template
Above we can see the header data is in raw form. So to make header information more immersive, you need to create template for header and then attach that to ListView
A header template can be created in same way as of item template. Header template is created as following
After creating Header Template, we need to attach this to ListView. So ListView will be modified as following
Let us go ahead and run the application. At this point shape of the application should be as following
Step 6: Adding Semantic Zoom
Next we need to add sematic zoom to the ListView. For that very first let us create a Semantic Zoom Template. We want to display movies with first letter of title in semantic zoom view.
After creating Semantic Zoom View template, we need to add a SemanticZoom WinJS control. Inside the Semantic Zoom control we need to put ListView (created in previous steps) and a Semantic Zoom View. We can put that as following.
After adding Semantic Zoom view we need to set data source of it. This can be set as following.
Last work we need to do in Semantiz Zoom is to apply styles.
Let us go ahead and run the application. At this point shape of the application should be as following
Step 7: Adding Output DIV
Now we need to add code to add output div. When user will select a particular movie detail of that movie will be displayed in the output div for rating.
And in code behind on the touch of a particular ListView item, we need to display that information in output div. For that add the following code in code behind
In above code snippet
- Iteminvoked event is attached to the ListView
- When item is invoked then itemPromise function is being called with parameter invokedItem
- On the invokeditem data we can fetch attributes of ListView items
- In last set the vales of HTML elements from selected items data.
Let us go ahead and run the application. At this point shape of the application should be as following
Step 8: Adding Rating control
To allow user for Rating, let us go ahead and add a WinJS Rating control. Rating control can be added as following
We can create a Rating control by setting data-win-control attribute of a div as WinJS.UI.Rating. Other data options like maxRating and averageRating can be set in data-win-options attribute.
After adding Rating control, we need to write code to allow users to perform rating.
Let us go ahead and run the application. At this point shape of the application should be as following
Step 9: Adding Code to Share Contract
We want our user should able to share the rating of movie on other applications like Mail, Twitter, Facebook. For that we will have to use ShareContract.
In above code we are getting the request and setting the title and description in data property. After that creating text to share and setting it in the data request. Above is the code to simple text sharing via ShareContract feature of Windows 8. Once we have share function is ready, we need to get the current view of application using DataTransferManager.getForCurrentView () and attach and event handler datarequested on same. When datarequested event will be fired ShowandShareContract function (created above) will be called and user will able to share using Share Charm.
Put above code just before ProcessAll() function and do not forget to declare following variable globally
Let us go ahead and run the application. At this point shape of the application should be as following. This is our final application.
In this application user can browse the movies, rate a particular movie and then share the rating with the friends on social media or mail.
Conclusion
In this post we learnt to create a Metro Application from scratch. Even though you can download source code of this article from here , I am sharing the codes below . Feel free to use them as you required.
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="headerTemplate"
data-win-control="WinJS.Binding.Template"
style="display: none">
<div class="simpleHeaderItem">
<h1 data-win-bind="innerText: title1"></h1>
</div>
</div>
<div id="semanticZoomTemplate" data-win-control="WinJS.Binding.Template"
style="display: none">
<div class="semanticZoomItem">
<h1 class="semanticZoomItem-Text"
data-win-bind="innerText: title1">
</h1>
</div>
</div>
<div id="semanticZoomDiv" data-win-control="WinJS.UI.SemanticZoom">
<div id="movieListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:moviesTemplate,
groupHeaderTemplate: headerTemplate
,layout: {type: WinJS.UI.GridLayout} }">
</div>
<div id="zoomedOutListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate: semanticZoomTemplate,
selectionMode: 'none',
tapBehavior: 'invoke',
swipeBehavior: 'none' }">
</div>
</div>
<table>
<tr>
<td>
<img id="selectedPlayerImg"
style="width:250px;height:250px;"/>
</td>
<td>
<h3>You are rating movie</h3><br />
<span id="selectedPlayer"></span> <br />
<span id="ratingPlayer"></span> <br />
<div id="ratingcontrol"
data-win-control="WinJS.UI.Rating"
data-win-options="{maxRating:10,avrageRating:4}" />
</td>
</tr>
</table>
</body>
</html>
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();
var dataTransferManager;
var movieName;
var selectRating;
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.
}
dataTransferManager = Windows.ApplicationModel.
DataTransfer.
DataTransferManager.getForCurrentView();
dataTransferManager.addEventListener("datarequested", ShowandShareContract);
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;
var groupedItemsList = movieArray.createGrouped(getGroupKey, getGroupData, compareGroups);
lstMovies.itemDataSource = groupedItemsList.dataSource;
lstMovies.groupDataSource = groupedItemsList.groups.dataSource;
var lstMoviesZoom = document.getElementById("zoomedOutListView").winControl;
lstMoviesZoom.itemDataSource = groupedItemsList.groups.dataSource;
lstMovies.addEventListener("iteminvoked", function (eventObject) {
eventObject.detail.itemPromise.then(function (invokedItem) {
var selecteplayer = document.getElementById('selectedPlayer');
selecteplayer.innerHTML = "<h2>" + invokedItem.data.title + "</h2>";
movieName = invokedItem.data.title;
var selecteplayerImg = document.getElementById('selectedPlayerImg');
selecteplayerImg.src = invokedItem.data.picture;
var ratingcontrolc = document.getElementById("ratingcontrol").winControl;
ratingcontrolc.addEventListener("change", function () {
selectRating = ratingcontrolc.userRating;
document.getElementById('ratingPlayer').innerHTML = "<h3> as "
+ selectRating +
" on scale of 10 <h3>";
});
});
}, false);
}
};
function compareGroups(left, right) {
return left.charCodeAt(0) - right.charCodeAt(0);
}
function getGroupKey(dataItem) {
return dataItem.title.toUpperCase().charAt(0);
}
function getGroupData(dataItem) {
return {
title1: dataItem.title.toUpperCase().charAt(0)
};
}
function ShowandShareContract(e) {
var request = e.request;
request.data.properties.title = "Netflix Movie Explorer Application";
request.data.properties.description = "Sharing from Netflix Movie Explorer Application";
var textToShare = movieName + " has been rated " + selectRating + " out of 10 ";
request.data.setText(textToShare);
}
app.oncheckpoint = function (args) {
};
app.start();
})();
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: 500px;
width: auto;
border: 1px solid gray;
}
.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;
}
I hope you find this post useful. Thanks for reading
Follow @debug_mode
Dhananjay Kumar 
Leave a comment