Netflix hybrid mobile app using kendo ui mobile
•Transferir como PPTX, PDF•
0 gostou•897 visualizações
Create Netflix hybrid mobile application using Kendo UI mobile
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Mais de Dhananjay Kumar
Mais de Dhananjay Kumar (20)
Último
Último (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
Notas do Editor
- <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>