Netflix hybrid mobile app using kendo ui mobile

2,247 views

Published on

Step by step illustration of codes

Published in: Education, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,247
On SlideShare
0
From Embeds
0
Number of Embeds
657
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • <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" />
  • <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>
  • <script>var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip", initial: "loginView" }); </script>
  • <div data-role="view" id="movieDetailView" data-title="Details"> <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>
  • varmovieTitleData;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(); }
  • <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> <imgsrc= #=data.BoxArt.MediumUrl# /> </a> </script>
  • <div data-role="view" id="movieDetailView" data-title="Details" data-show="showMovieTitle"> <ul id="Ul1" data-source="movieTitleData" data-endlessScroll="true" data-template="movieTemplate" data-role="listview" data-style="inset" > </ul> </div>
  • <div data-role="view" id="movieDetailView" data-title="Details" data-show="showMovieTitle"> <ul id="Ul1" data-source="movieTitleData" data-endlessScroll="true" data-template="movieTemplate" data-role="listview" data-style="inset" > </ul> </div>
  • function showMovieDetail(e) {var view = e.view;varmovieDetailTemplate = kendo.template($("#movieDetailTemplate").text());var query = view.params.Id.toString();varmovieDetails = new kendo.data.DataSource({ type: "odata",serverPaging: true,serverFiltering: true,pageSize: 50, transport: { read: { url: "http://odata.netflix.com/Catalog/Titles",dataType: "jsonp", data: { Accept: "application/json" } } }, filter: { filters: [{ field: "Id", operator: "eq", value: query}] }});movieDetails.fetch(function () {var item = movieDetails.at(0); console.log(item); view.scrollerContent.html(movieDetailTemplate(item));kendo.mobile.init(view.content); }); }
  • <script id="movieDetailTemplate" type="text/x-kendo-template"><h2>#=data.Name#</h2><imgsrc= #=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>
  • <style scoped> #movieTitleView h4 { display: inline-block; font-size: 1.1em; margin: 1em 0 .5em 1em; } #movieTitleViewimg { 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; } #movieDetailViewimg { 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>
  • <style scoped> #movieTitleView h4 { display: inline-block; font-size: 1.1em; margin: 1em 0 .5em 1em; } #movieTitleViewimg { 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; } #movieDetailViewimg { 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>
  • Netflix hybrid mobile app using kendo ui mobile

    1. 1. Netflix HybridMobile app usingKendo UI MobileDhananjay Kumar Customer Advocate Telerik India@debug_mode
    2. 2. Step 1 : Add Reference
    3. 3. Step 2 : Create layout
    4. 4. Step 3 : Initialize Kendo Mobile
    5. 5. Step 4 : Create Views
    6. 6. Step 5 : Create Data Source
    7. 7. Step 6 : Create Template to showMovies Title
    8. 8. Step 7 : Create List View to displayMovie Title
    9. 9. Step 8 : Define CSS for Movie Title
    10. 10. Step 9 : Create Data Source for Moviedetail view
    11. 11. Step 10 : Create Template for Moviedetail view
    12. 12. Step 11 : Create View for Movie detailview

    ×