Netflix Movie Explorer : A Hybrid Mobile App using Kendo UI Mobile

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 .

image image

image

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>

Advertisements

2 thoughts on “Netflix Movie Explorer : A Hybrid Mobile App using Kendo UI Mobile

  1. Can anyone tell me if Kendo UI Mobile can be used in conjunction with the RhoMobile framework, instead of the JQuery Mobile UI it uses as standard. If so, does anyone have any sample apps?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s