Netflix Movie Explorer a Windows Store Application: Creating Step-by-Step

In this article we will follow a step-by-step (walkthrough) approach to creation of a Netflix Movie Explorer Metro Application using HTML and WinJS. See the video to understand the expected behavior of the application.

Some of the features of application are as follows:

1. Browse movies from Netflix
2. Rate the Movies
3. Browse movies in Semantic views
4. 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 the project, in the default.html change "content goes here" with following:



After that follow the steps as below.

Step 1: Create Data Source

The very first thiing to do is to create a data source by reading JSON data from the OData feed of the Netflix movie database. That can be done using the WinJS.xhr function, as iin:



In the above code snippet, we are performing the following tasks:

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

After fetching, data is being parsed using the JSON Parser and individual items are pushed to movieArray, which is defined as in the following:



Step 2: Create ListView

After creating the data source we need to put a 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 a data source to display data. The Data source can be set either in HTML or in code behind. Let us set the data source of movieListView to the movieArray.

 

Make sure that you are setting the data source of the ListView after the WinJS.xhr function is called. At this point of time if you go ahead and run the application, you should be getting the following output:



Step 3: Create ListView Template

In the above output, data is in a raw form. To make data more immersive and to show it the way we want, we need to create a template out of the data. After creating a template, it needs to be set as an attribute of the ListView. The Template can be created as in the following:



The Template can be created by setting the data-win-control attribute of the HTML div as WinJS.Binding.Template . Inside div element:

1. Binding image to Picture property of WinJS List or Array
2. Binding inner text of h4 element to Title property of WinJS List or Array

Once the Template is created, it needs to be attached to the ListView. After attaching the Template, the ListView will be as follows:



No go ahead and run the application; you should be getting the following shape of the application:



Before we move ahead, let us use some CSS for the ListView to make it more immersive:



After applying styles on the List View, your application should be in following shape:



Step 4: Grouping of DataSource

Next we want to group the movies by the first character of their title. To do that create group functions as in the following:



After creating grouped functions, we need to create a grouped item list and set it as itemDataSource of the List View. Modify the setting of the ListView data source as in the following:



Let us go ahead and run the application. At this point the shape of the application should be as in the following:



Step 5: Creating Header Template

Above we can see the header data is in raw form. So to make the header information more immersive, you need to create a template for the header and then attach that to the ListView.

A header template can be created in the same way as an item template. The Header template is created as in the following:



After creating the Header Template, we need to attach this to the ListView. So the ListView will be modified as in the following:



Let us go ahead and run the application. At this point the shape of the application should be as in the 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 the first letter of the title in sematic zoom view.



After creating the 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 in the following:



After adding Semantic Zoom view we need to set the data source of it. This can be set as in the following:



The last work to do in Semantiz Zoom is to apply styles.



Let us go ahead and run the application. At this point the shape of the application should be as in the following:





Step 7: Adding Output DIV

Now we need to add code to add output div. When the user selects a specific movie, the details 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 the output div. For that add the following code in code behind:



In the above code snippet:

1. The Iteminvoked event is attached to the ListView
2. When the item is invoked then the itemPromise function is being called with parameter invokedItem
3. On the invokeditem data we can fetch attributes of the ListView items
4. Finally we set the vales of the HTML elements from selected item data

Let us go ahead and run the application. At this point the shape of the application should be as in the 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 in the 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 the Rating control, we need to write code to allow users to perform the rating.



Let us go ahead and run the application. At this point the shape of the application should be as in the following:



Step 9: Adding Code to Share Contract

We want our user to be able to share the rating of movie to other applications like Mail, Twitter, Facebook. For that we need to use ShareContract.



In the above code we are getting the request and setting the title and description in the data property. After that creating text to share and setting it in the data request. Above is the code for simple text sharing via the ShareContract feature of Windows 8. Once we have the share function ready, we need to get the current view of the application using DataTransferManager.getForCurrentView () and attach an event handler datarequested on it. When the datarequested event is fired, the ShowandShareContract function (created above) will be called and the user will be able to share using Share Charm.



Put the above code just before the ProcessAll() function and do not forget to declare the following variable globally:



Let us go ahead and run the application. At this point the shape of the application should be as in the following. This is our final application.



In this application the user can browse the movies, rate a particular movie and then share the rating with friends on social media or mail.