• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Netflix hybrid mobile app using kendo ui mobile
 

Netflix hybrid mobile app using kendo ui mobile

on

  • 2,006 views

Step by step illustration of codes

Step by step illustration of codes

Statistics

Views

Total Views
2,006
Views on SlideShare
1,611
Embed Views
395

Actions

Likes
0
Downloads
10
Comments
0

2 Embeds 395

http://telerikhelper.net 394
https://www.google.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <a>Back</a> <a href="#loginView">Login</a> <a href="#movieTitleView">Browse</a> <a href="#searchView">Search</a>
  • Movie Title View Login View Search View
  • 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(); }
  • <a> #=data.Name.substring(0,15)# </a>
  • 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); }); }
  • #=data.Name# #=data.Synopsis# <a href="\\#shareonSocialMediaActionSheet">Share Feedback</a>
  • #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; }
  • #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; }

Netflix hybrid mobile app using kendo ui mobile Netflix hybrid mobile app using kendo ui mobile Presentation Transcript

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