Netflix hybrid mobile app using kendo ui mobile
•Télécharger en tant que PPTX, PDF•
0 j'aime•897 vues
Create Netflix hybrid mobile application using Kendo UI mobile
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Plus de Dhananjay Kumar
Plus de Dhananjay Kumar (20)
Dernier
Dernier (20)
Netflix hybrid mobile app using kendo ui mobile
- 1. Netflix Hybrid Mobile app using Kendo UI Mobile Dhananjay Kumar Customer Advocate Telerik India @debug_mode
- 2. Step 1 : Add Reference
- 3. Step 2 : Create layout
- 4. Step 3 : Initialize Kendo Mobile
- 5. Step 4 : Create Views
- 6. Step 5 : Create Data Source
- 7. Step 6 : Create Template to show Movies Title
- 8. Step 7 : Create List View to display Movie Title
- 9. Step 8 : Define CSS for Movie Title
- 10. Step 9 : Create Data Source for Movie detail view
- 11. Step 10 : Create Template for Movie detail view
- 12. Step 11 : Create View for Movie detail view
Notes de l'éditeur
- <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>