Enviar búsqueda
Cargar
Netflix hybrid mobile app using kendo ui mobile
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
897 vistas
Dhananjay Kumar
Seguir
Create Netflix hybrid mobile application using Kendo UI mobile
Leer menos
Leer más
Educación
Tecnología
Empresariales
Denunciar
Compartir
Denunciar
Compartir
1 de 13
Descargar ahora
Recomendados
Netflix hybrid mobile app using kendo ui mobile
Netflix hybrid mobile app using kendo ui mobile
Dhananjay Kumar
Introduction to New Age Applications with Kendo UI
Introduction to New Age Applications with Kendo UI
Abhishek Kant
Asp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UI
Lohith Goudagere Nagaraj
Introducing Kendo UI
Introducing Kendo UI
John Bristowe
Telerik Kendo UI Overview
Telerik Kendo UI Overview
Ed Musters
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu
Alexander Gyoshev
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
Dhananjay Kumar
ITCamp 2012 - Alex Gyoshev - Kendo-UI
ITCamp 2012 - Alex Gyoshev - Kendo-UI
ITCamp
Recomendados
Netflix hybrid mobile app using kendo ui mobile
Netflix hybrid mobile app using kendo ui mobile
Dhananjay Kumar
Introduction to New Age Applications with Kendo UI
Introduction to New Age Applications with Kendo UI
Abhishek Kant
Asp.net mvc - Better User Experience with Kendo UI
Asp.net mvc - Better User Experience with Kendo UI
Lohith Goudagere Nagaraj
Introducing Kendo UI
Introducing Kendo UI
John Bristowe
Telerik Kendo UI Overview
Telerik Kendo UI Overview
Ed Musters
Kendo UI presentation at JsConf.eu
Kendo UI presentation at JsConf.eu
Alexander Gyoshev
PPT from Webinar Create Hybrid Mobile Application in 1 hour
PPT from Webinar Create Hybrid Mobile Application in 1 hour
Dhananjay Kumar
ITCamp 2012 - Alex Gyoshev - Kendo-UI
ITCamp 2012 - Alex Gyoshev - Kendo-UI
ITCamp
レッツ!Google Apps ScriptでTDD(仮)
レッツ!Google Apps ScriptでTDD(仮)
Kei Sawada
KKBOX WWDC17 UIKit - QQ
KKBOX WWDC17 UIKit - QQ
Liyao Chen
Building android and i os apps with visual studio
Building android and i os apps with visual studio
Lohith Goudagere Nagaraj
Create twitter-ios-app
Create twitter-ios-app
Tsuneo Yoshioka
Hybrid mobile app with Kendo UI Mobile
Hybrid mobile app with Kendo UI Mobile
Dhananjay Kumar
A Better Interface Builder Experience
A Better Interface Builder Experience
Justin Munger
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
Lohith Goudagere Nagaraj
Salesforce1 for Visualforce Developers
Salesforce1 for Visualforce Developers
Keir Bowden
Jquery mobile book review
Jquery mobile book review
Islam AlZatary
Smx Israel 2014 Youtube Optimization 2.0 Akiva Ben- Ezra
Smx Israel 2014 Youtube Optimization 2.0 Akiva Ben- Ezra
Akiva Ben-Ezra
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Yoichiro Sakurai
Hello Flutter
Hello Flutter
rihannakedy
Angular light introduction
Angular light introduction
Vladimir Malyk
Popluar AngularJS Frameworks
Popluar AngularJS Frameworks
JaneKimHyun
iOS Design to Code - Code
iOS Design to Code - Code
Liyao Chen
Html5 game development
Html5 game development
chanakanakandala1993
チームを加速させるRetty式開発術
チームを加速させるRetty式開発術
Yoichiro Sakurai
FBIA-Exec1
FBIA-Exec1
Grant Hafer
1人でも頑張れる!Retty式開発環境
1人でも頑張れる!Retty式開発環境
Yoichiro Sakurai
Intro Angular Ionic
Intro Angular Ionic
Gianvito Siciliano
Slides of webinar Kendo UI and Knockout.js
Slides of webinar Kendo UI and Knockout.js
Dhananjay Kumar
Nodejsvs
Nodejsvs
Dhananjay Kumar
Más contenido relacionado
La actualidad más candente
レッツ!Google Apps ScriptでTDD(仮)
レッツ!Google Apps ScriptでTDD(仮)
Kei Sawada
KKBOX WWDC17 UIKit - QQ
KKBOX WWDC17 UIKit - QQ
Liyao Chen
Building android and i os apps with visual studio
Building android and i os apps with visual studio
Lohith Goudagere Nagaraj
Create twitter-ios-app
Create twitter-ios-app
Tsuneo Yoshioka
Hybrid mobile app with Kendo UI Mobile
Hybrid mobile app with Kendo UI Mobile
Dhananjay Kumar
A Better Interface Builder Experience
A Better Interface Builder Experience
Justin Munger
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
Lohith Goudagere Nagaraj
Salesforce1 for Visualforce Developers
Salesforce1 for Visualforce Developers
Keir Bowden
Jquery mobile book review
Jquery mobile book review
Islam AlZatary
Smx Israel 2014 Youtube Optimization 2.0 Akiva Ben- Ezra
Smx Israel 2014 Youtube Optimization 2.0 Akiva Ben- Ezra
Akiva Ben-Ezra
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Yoichiro Sakurai
Hello Flutter
Hello Flutter
rihannakedy
Angular light introduction
Angular light introduction
Vladimir Malyk
Popluar AngularJS Frameworks
Popluar AngularJS Frameworks
JaneKimHyun
iOS Design to Code - Code
iOS Design to Code - Code
Liyao Chen
Html5 game development
Html5 game development
chanakanakandala1993
チームを加速させるRetty式開発術
チームを加速させるRetty式開発術
Yoichiro Sakurai
FBIA-Exec1
FBIA-Exec1
Grant Hafer
1人でも頑張れる!Retty式開発環境
1人でも頑張れる!Retty式開発環境
Yoichiro Sakurai
Intro Angular Ionic
Intro Angular Ionic
Gianvito Siciliano
La actualidad más candente
(20)
レッツ!Google Apps ScriptでTDD(仮)
レッツ!Google Apps ScriptでTDD(仮)
KKBOX WWDC17 UIKit - QQ
KKBOX WWDC17 UIKit - QQ
Building android and i os apps with visual studio
Building android and i os apps with visual studio
Create twitter-ios-app
Create twitter-ios-app
Hybrid mobile app with Kendo UI Mobile
Hybrid mobile app with Kendo UI Mobile
A Better Interface Builder Experience
A Better Interface Builder Experience
You Know Angular 2, You Know Native Mobile App Development
You Know Angular 2, You Know Native Mobile App Development
Salesforce1 for Visualforce Developers
Salesforce1 for Visualforce Developers
Jquery mobile book review
Jquery mobile book review
Smx Israel 2014 Youtube Optimization 2.0 Akiva Ben- Ezra
Smx Israel 2014 Youtube Optimization 2.0 Akiva Ben- Ezra
開発を加速させるRetty式チーム開発術 Reloaded
開発を加速させるRetty式チーム開発術 Reloaded
Hello Flutter
Hello Flutter
Angular light introduction
Angular light introduction
Popluar AngularJS Frameworks
Popluar AngularJS Frameworks
iOS Design to Code - Code
iOS Design to Code - Code
Html5 game development
Html5 game development
チームを加速させるRetty式開発術
チームを加速させるRetty式開発術
FBIA-Exec1
FBIA-Exec1
1人でも頑張れる!Retty式開発環境
1人でも頑張れる!Retty式開発環境
Intro Angular Ionic
Intro Angular Ionic
Más de Dhananjay Kumar
Slides of webinar Kendo UI and Knockout.js
Slides of webinar Kendo UI and Knockout.js
Dhananjay Kumar
Nodejsvs
Nodejsvs
Dhananjay Kumar
Node.js
Node.js
Dhananjay Kumar
No SQL with Kendo UI
No SQL with Kendo UI
Dhananjay Kumar
Patterns in JavaScript
Patterns in JavaScript
Dhananjay Kumar
Presenter deck icenium hol
Presenter deck icenium hol
Dhananjay Kumar
Bringbestoinyou
Bringbestoinyou
Dhananjay Kumar
Java script
Java script
Dhananjay Kumar
Windows azure mobile service
Windows azure mobile service
Dhananjay Kumar
Test studiowebinaraugcodedstep
Test studiowebinaraugcodedstep
Dhananjay Kumar
Functions and Objects in JavaScript
Functions and Objects in JavaScript
Dhananjay Kumar
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Dhananjay Kumar
Cloud Based Enterprise Apps using Everlive
Cloud Based Enterprise Apps using Everlive
Dhananjay Kumar
A Look into Automated Web UI Test
A Look into Automated Web UI Test
Dhananjay Kumar
Windows phone 8 app using Kendo UI
Windows phone 8 app using Kendo UI
Dhananjay Kumar
Cross platformmobileapp
Cross platformmobileapp
Dhananjay Kumar
Windows aazuremobileservices
Windows aazuremobileservices
Dhananjay Kumar
Rad controlforwindows25thapril
Rad controlforwindows25thapril
Dhananjay Kumar
Data asservice
Data asservice
Dhananjay Kumar
WCF for begineers
WCF for begineers
Dhananjay Kumar
Más de Dhananjay Kumar
(20)
Slides of webinar Kendo UI and Knockout.js
Slides of webinar Kendo UI and Knockout.js
Nodejsvs
Nodejsvs
Node.js
Node.js
No SQL with Kendo UI
No SQL with Kendo UI
Patterns in JavaScript
Patterns in JavaScript
Presenter deck icenium hol
Presenter deck icenium hol
Bringbestoinyou
Bringbestoinyou
Java script
Java script
Windows azure mobile service
Windows azure mobile service
Test studiowebinaraugcodedstep
Test studiowebinaraugcodedstep
Functions and Objects in JavaScript
Functions and Objects in JavaScript
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Create Hybrid Mobile Application with Icenium and Kendo UI Mobile
Cloud Based Enterprise Apps using Everlive
Cloud Based Enterprise Apps using Everlive
A Look into Automated Web UI Test
A Look into Automated Web UI Test
Windows phone 8 app using Kendo UI
Windows phone 8 app using Kendo UI
Cross platformmobileapp
Cross platformmobileapp
Windows aazuremobileservices
Windows aazuremobileservices
Rad controlforwindows25thapril
Rad controlforwindows25thapril
Data asservice
Data asservice
WCF for begineers
WCF for begineers
Último
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
SanaAli374401
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
VishalSingh1417
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
National Information Standards Organization (NISO)
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
Thiyagu K
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
Dr. Mazin Mohamed alkathiri
PROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docx
PoojaSen20
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University of Engineering & Technology, Jamshoro
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Thiyagu K
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
Maestría en Comunicación Digital Interactiva - UNR
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
Association for Project Management
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Shubhangi Sonawane
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
misteraugie
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
AyushMahapatra5
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
VishalSingh1417
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
TechSoup
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
Admir Softic
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
Disha Kariya
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
Thiyagu K
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
kauryashika82
Último
(20)
An Overview of Mutual Funds Bcom Project.pdf
An Overview of Mutual Funds Bcom Project.pdf
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
PROCESS RECORDING FORMAT.docx
PROCESS RECORDING FORMAT.docx
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
Measures of Central Tendency: Mean, Median and Mode
Measures of Central Tendency: Mean, Median and Mode
Código Creativo y Arte de Software | Unidad 1
Código Creativo y Arte de Software | Unidad 1
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
Unit-V; Pricing (Pharma Marketing Management).pptx
Unit-V; Pricing (Pharma Marketing Management).pptx
Introduction to Nonprofit Accounting: The Basics
Introduction to Nonprofit Accounting: The Basics
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
Z Score,T Score, Percential Rank and Box Plot Graph
Z Score,T Score, Percential Rank and Box Plot Graph
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
Russian Escort Service in Delhi 11k Hotel Foreigner Russian Call Girls in Delhi
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 del 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>
Descargar ahora