Upload
dhananjay-kumar
View
1.671
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Slides from webinar Windows Phone 8 Development using Kendo UI Mobile
Citation preview
facebook.com/telerik
@telerik
Developing Windows Phone 8 Apps using Kendo UI Mobile
AgendaWhat is Hybrid Application
Introducing Kendo UI Mobile
Discussion on App Architecture
Demo
Question and Answer
Dhananjay Kumar– Customer Advocate, Telerik– Microsoft MVP – Mindcracker MVP– @debug_mode – http://debugmode.net– http://telerikhelper.net – [email protected]
m
Your Presenter
Resources Two of you have chance to win Ninja T-Shirt
http://telerikhelper.net
http://www.kendoui.com
facebook.com/telerik
@telerik
App Architecture
Database
Service layer
Develop using Kendo UI Mobile
Different Types of Apps
Apps for Devices
Native Apps
Mobile Web Apps
Hybrid Apps
facebook.com/telerik
@telerik
Why Hybrid Apps?• Objective C• MACiOS
• Java • Eclipse Android
• Visual Studio • C#/XAML
Windows Phone
100 LOC
100 LOC
100 LOC
300 LOC
Development
Maintenance
facebook.com/telerik
@telerik
Hybrid App Development
CSS
JAVASCRIPT
HTML
Deploy using Cordova
iOS Android
Windows Phone
Various Platforms
Hybrid or Native?Hybrid
Multiple Platform
Easy to build
Use existing web development skills
Best suited for Data Driven Applications
Native
Fast Performance
Complex Codes
Huge learning curve
High investment but better performance
Steps for Hybrid App Development Step 1: Create App using
HTML JavaScript , CSS
Step 2: Build and Package the App using PhoneGap or Coredova
Step 3: Submit the package to Windows Marketplace
How it works ?It runs in Web View Control UIWebView : ios, WebView : Android
Runs in full screen mode using Web Kit browsers
Access Device capabilities using Cordova JS API
What is Kendo UI Comprehensive HTML5,JavaScript framework for modern web and mobile app development
Kendo Framework Elements
Kendo UI Web
Kendo UI DataViz
Kendo UI Mobile
HTML5 powered native mobile UI that automatically adapts to different devices
Built using Kendo UI Mobile ?
Native UI on Every Device
Ready for App Stores
Kendo UI Framework
DataSource Model Template MVVM
Drag OvservableObject Node Template
OvservableArray Validator
Draggable
Kendo UI Mobile WidgetsActionShee
tBackButto
n Button ButtonGroup
DetailButton
Layout ListView Loader ModalView NavBar
Pane PopOver Scroller ScrollView SplitView
Switch Swipe TabStrip View
facebook.com/telerik
@telerik
Demo App Architecture
Database
Service layer
Demo
Let us write some codes
facebook.com/telerik
@telerik
Step1 : Add Reference
facebook.com/telerik
@telerik
Step 2 : Create layout
facebook.com/telerik
@telerik
Step 3: Initialize Kendo Mobile
facebook.com/telerik
@telerik
Step 4: Create Views
facebook.com/telerik
@telerik
Step 5: Create Data Source
facebook.com/telerik
@telerik
Step 6: Create Template
facebook.com/telerik
@telerik
Step 7: Create ListView
facebook.com/telerik
@telerik
Step 8: Put style in CSS
facebook.com/telerik
@telerik
Step 9: Data Source for Movie Detail View
facebook.com/telerik
@telerik
Step 10: Template for Movie Detail View
facebook.com/telerik
@telerik
Step 11: View for Movie Detail View
facebook.com/telerik
@telerik
Application
Resources http://icenium.com
http://www.kendoui.com
http://docs.kendoui.com
http://docs.icenium.com
http://telerikhelper.net
@Telerik
@kendoui
@icenium
Questions?