Hello Netflix? This Windows 8, WinJS and HTML5. Can we talk?

Sign in to queue


Today's Metro (err... um... Windows 8 App) Wednesday project is another kind of common Hello World kind of example application, one that shows that given a public API developers can provide an experience beyond what the API provider might have ever imagined.

Oh and it shows other stuff too, like calling an OData service, use HTML5/WinJS, data binding, sharing and more. Now it's up to you to take this and add your imagination, inspiration and... oh, well, you get it..

Netflix Movie Explorer a Metro Application: Creating Step by Step

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

The post continues to walk you through using Visual Studio 2012, taking the Windows 8 HTML5 Blank Template and adding each of the major features for this Explorer.

From getting the data;

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.

To displaying it in a raw form;

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.

All the way through a adding Windows 8 features like Semantic and sharing

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.

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.

Ending up with a simple but cool Windows 8 Netflix Explorer that you wrote yourself (well, mostly, kind of).


This wouldn't be a Coding4Fun Blog project if there wasn't some code to look at. The source is available right on the page, if you just want to glance at it




Or the entire project is also available for download too (click through for the download link)!

In the end this project will hopefully show you that building a Windows 8 application doesn't have to be hard, isn't complicated and yet you can still build some pretty cool apps, with some cool functionality,

The Discussion

  • User profile image
    SL Fanboy

    Why would any sane and sound human being be interested in writing JS code?! WHy really?!

  • User profile image

    @SL Fanboy: so many people write JavaScript every day, including my development team... and many of them love it. Your name suggests you might not be one of them though Smiley

  • User profile image

    When you regain your sanity, we sane people might bother to explain it to you.

  • User profile image

    @Eric:I'm disappointed to see that this kind of personal comment is still so common on comment boards. 



  • User profile image

    JavaScript will become one of the biggest standards in future app development together with HTML5.
    Cross-platform and don't compare it with the old days web kiddy script of writing JavaScript.
    If you know what singletons, module patterns, CommonJS etc. means: then you are talking.


  • User profile image

    Cross platform sounds good if we do not  have to rely on WinJS and WinRT. So first having JavaScript is good and a nice move but so close bonding with platform looses ground.




  • User profile image

    Just so you know, singletons and module patterns have been around way before JS, singletons are used extensively in almost every programming language and module patterns are used to extend languages (e.g. you could write a module-like class to use instead of a namespace in C++, to solve component initialization, etc).
    There is a case to be made in regards JS and module patterns being almost exclusive to each other though.

    In any case my point is that you shouldn't make comments that you *think* will make you sound smart because you could sound dumb instead.

  • User profile image

    Well, we now got a C#/XAML My Netflix in Windows Store at http://apps.microsoft.com/webpdp/app/my-netflix/0006c1d8-ee62-47e2-88e3-00ef97615b03

  • User profile image

    where there could be add a native components,such as button,view ,above it there is html page,then set <body backgraound-color: transparent></body>,html's components will mixture with native components?

Add Your 2 Cents