Hello Netflix? This Windows 8, WinJS and HTML5. Can we talk?
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..
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,