Presentation from Create Hybrid Mobile Application in 1 hour Webinar. This webinar was conducted by Telerik evangelist Dhananjay Kumar (debug_mode) .

1. Create Hybrid Mobile
Applications with Icenium and
Kendo UI Mobile
facebook.com/telerik @telerik

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

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

4. We are going to create
iPhone Android

5. Build using Kendo UI
Mobile
App Architecture
Service
Database layer
Build and Package using
Icenium
facebook.com/telerik @telerik

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

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

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

9. Hybrid or Native?
Hybrid Native
Multiple Platform Fast Performance
Easy to build Complex Codes
Use existing web
Huge learning curve
development skills
Best suited for Data High investment but
Driven Applications 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
Step 3: Submit the package to App
Store, Market Place or Google Play

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. Icenium is a Cloud Based Integrated Development
Environment for Cross Platform Application
Development
Icenium
MIST GRAPHITE

18. Icenium Features
Github
Live Sync Simulator
integration
Packaging
Version Certificate
and
Control Management
Publishing
Wen Interface
Build on Development
Code Editor
Cloud

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

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

21. Native UI on Every Device

22. Ready for App Stores

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

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

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

26. Demo
Let us write some
codes

27. Code Walkthrough for Netflix Movie Explorer
facebook.com/telerik @telerik

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

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

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

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

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

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

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

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

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

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

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

39. Application
facebook.com/telerik @telerik

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

41. Questions?