Slides from webinar Windows Phone 8 Development using Kendo UI Mobile

1. facebook.com/telerik @telerik
Developing Windows Phone 8
Apps using Kendo UI Mobile

2. Agenda
What is Hybrid Application
Introducing Kendo UI Mobile
Discussion on App Architecture
Demo
Question and Answer

3.  Dhananjay Kumar
– Customer Advocate, Telerik
– Microsoft MVP
– Mindcracker MVP
– @debug_mode
– http://debugmode.net
– http://telerikhelper.net
– Dhananjay.kumar@telerik.com
Your Presenter

4. Resources
Two of you have chance to win Ninja T-Shirt
http://telerikhelper.net
http://www.kendoui.com

5. facebook.com/telerik @telerik
App Architecture
Database
Service
layer
Develop using Kendo UI Mobile

6. Different Types of Apps
Apps for
Devices
Native
Apps
Mobile
Web Apps
Hybrid
Apps

7. facebook.com/telerik @telerik
Why Hybrid Apps?
• Objective C
• MAC
iOS
• Java
• Eclipse
Android
• Visual Studio
• C#/XAML
Windows
Phone
100
LOC
100
LOC
100
LOC
300
LOC
Development
Maintenance

8. facebook.com/telerik @telerik
Hybrid App
Development
CSS
JAVASCRIPT
HTML
Deploy using
Cordova
iOS Android
Windows
Phone
Various Platforms

9. 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

10. 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

11. 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

12. What is Kendo UI
Kendo Framework Elements
Kendo UI
Web
Kendo UI
DataViz
Kendo UI
Mobile

13.  HTML5 powered native mobile UI that automatically adapts to
different devices
Built using Kendo UI Mobile ?

14. Native UI on Every Device

15. Ready for App Stores

16. Kendo UI Framework
DataSource Model Template MVVM
Drag OvservableObject Node Template
OvservableArray Validator
Draggable

17. Kendo UI Mobile Widgets
ActionSheet BackButton Button ButtonGroup DetailButton
Layout ListView Loader ModalView NavBar
Pane PopOver Scroller ScrollView SplitView
Switch Swipe TabStrip View

18. facebook.com/telerik @telerik
Demo App Architecture
Database
Service
layer

19. Demo
Let us write some
codes

20. facebook.com/telerik @telerik
Step1 : Add Reference

21. facebook.com/telerik @telerik
Step 2 : Create layout

22. facebook.com/telerik @telerik
Step 3: Initialize Kendo Mobile

23. facebook.com/telerik @telerik
Step 4: Create Views

24. facebook.com/telerik @telerik
Step 5: Create Data Source

25. facebook.com/telerik @telerik
Step 6: Create Template

26. facebook.com/telerik @telerik
Step 7: Create ListView

27. facebook.com/telerik @telerik
Step 8: Put style in CSS

28. facebook.com/telerik @telerik
Step 9: Data Source for Movie Detail View

29. facebook.com/telerik @telerik
Step 10: Template for Movie Detail View

30. facebook.com/telerik @telerik
Step 11: View for Movie Detail View

31. facebook.com/telerik @telerik
Application

32. Resources
http://icenium.com
http://www.kendoui.com
http://docs.kendoui.com
http://docs.icenium.com
http://telerikhelper.net
@Telerik
@kendoui
@icenium

33. Questions?