This post is “Step by Step Illustration of Codes “required to create Netflix Movie Application. You can read a detailed article on same topic here .

Step 1 : Add Reference

<meta charset="utf-8" />
 <script src="kendo/js/jquery.min.js"></script>
 <script src="kendo/js/kendo.mobile.min.js"></script>
 <script src="scripts/hello-world.js"></script>
 <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <link href="styles/main.css" rel="stylesheet" />

Step 2 : Create Layout

<div data-role="layout" data-id="mobile-tabstrip">
 <header data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">Back</a>
 <span data-role="view-title"></span>
 </div>
 </header>
 <div data-role="footer">
 <div data-role="tabstrip">

 <a href="#loginView" data-icon="action">Login</a>
 <a href="#movieTitleView" data-icon="more">Browse</a>
 <a href="#searchView" data-icon="search">Search</a>
 </div>
 </div>
 </div>

Step 3 : Initialize Kendo Mobile

<script>
 var app = new kendo.mobile.Application(document.body,
 { transition: "slide",
 layout: "mobile-tabstrip",
 initial: "loginView"
 });
</script>

Step 4 : Create Views

 <div data-role="view" id="movieTitleView" data-title="Title" >
 <h1>Movie Title View </h1>
 </div>
 <div data-role="view" id="loginView" data-title="Login" >
 <h1>Login View </h1>
 </div>
 <div data-role="view" id="searchView">
 <h1>Search View</h1>
 </div>

Step 5 : Create Data Source

var movieTitleData;
 movieTitleData = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 30,
 endlessScroll: true,
 batch: false,
 transport: {
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

});
 function showMovieTitle(e) {
 movieTitleData.fetch();
 }

Step 6 : Create Template to show Movies Title

<script id="movieTemplate" type="text/x-kendo-template">
 <a href="\#movieDetailView?Id=#:data.Id#"
 class="km-listview-link"
 data-role="listview-link">
 <h4>#=data.Name.substring(0,15)#</h4>
 <img src= #=data.BoxArt.MediumUrl# />
 </a>
 </script>

Step 7 : Create List View to display Movie Title

<div data-role="view" id="movieTitleView"
 data-title="Title"
 data-show="showMovieTitle" >
 <ul id="movieTitleList"
 data-source="movieTitleData"
 data-endlessScroll="true"
 data-template="movieTemplate"
 data-role="listview"
 data-style="inset">
 </ul>
</div>

Step 8 : Define CSS for Movie Title

<style scoped>
 #movieTitleView
 h4 {
 display: inline-block;
 font-size: 1.1em;
 margin: 1em 0 .5em 1em;
 }

 #movieTitleView
 img {
 float: left;
 width: 4em;
 height: 4em;
 margin: 0;
 -webkit-box-shadow: 0 1px 3px #333;
 box-shadow: 0 1px 3px #333;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 }
 #movieDetailView
 img {
 float: none;
 width: 15em;
 height: 12em;
 margin: 0;
 -webkit-box-shadow: 0 1px 3px #333;
 box-shadow: 0 1px 3px #333;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 }

 </style>

Step 9 : Create Data Source for Movie detail view

var movieTitleData;
movieTitleData = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 30,
 endlessScroll: true,
 batch:false,
 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

});

Step 10 : Create Template for Movie detail view

<script id="movieDetailTemplate" type="text/x-kendo-template">
 <h2>#=data.Name#</h2>
 <img src= #=data.BoxArt.LargeUrl# height=1 width=1/></br></br>
 <h4> #=data.Synopsis# </h4>
 <a data-role="button" data-rel="actionsheet" href="\#shareonSocialMediaActionSheet">Share Feedback</a>
 </script>

Step 11 : Create View for Movie detail view

<div data-role="view"

id="movieDetailView"

data-title="Details"

data-show="showMovieDetail" >

<ul data-role="actionsheet" id="Ul1" >

<li><a data-action="functionToShareOnFacebook">Facebook</a></li>

<li><a data-action="functionToShareOnTwitter">Twitter</a></li>

</ul>

</div>