SLIDE 1
facebook.com/telerik @telerik
- Lohith
h G N – Developer Evangelist, T elerik India – Microsoft MVP – ASP .NET/IIS – @kashyapa – http://kashyapas.net – http://telerikhelper.net – Lohith.nagaraj@telerik.com
Hybrid Mobile Application with Icenium @telerik - - PowerPoint PPT Presentation
Hybrid Mobile Application with Icenium @telerik - - PowerPoint PPT Presentation
Hybrid Mobile Application with Icenium @telerik facebook.com/telerik Who Am I ? Lohith h G N Developer Evangelist, T elerik India Microsoft MVP ASP .NET/IIS @kashyapa http://kashyapas.net http://telerikhelper.net
SLIDE 2
SLIDE 3
Agenda
What is Hybrid Application Introducing Icenium Introducing Kendo UI Mobile Code walkthrough Hands on Lab
SLIDE 4
Different Types of Apps
Apps for Devices Native Apps Mobile Web Apps Hybrid Apps
SLIDE 5
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
Devel velopm
- pment
ent Maintenan enance e
SLIDE 6
facebook.com/telerik @telerik
Hybrid id App Devel elopmen ent
CSS JAVASCRIPT HTML
Deploy using Cordova
iOS Android Windows Phone
Various
- us Platfor
- rms
s
SLIDE 7
Steps for Hybrid App Development
Step 1: Create App using HTML JavaScript , CSS Step 2: Package the App using Phone Gap Step 3: Submit the package to App Store, Market Place or Google Play
SLIDE 8
Icenium is a Cloud Based Integrated Development Environment for Cross Platform Application Development
Icenium MIST GRAPHITE
SLIDE 9
SLIDE 10
SLIDE 11
SLIDE 12
SLIDE 13
SLIDE 14
Icenium Features
Live Sync Simulator Github integration Version Control Packaging and Publishing Certificate Management Code Editor Build on Cloud Wen Interface Development
SLIDE 15
- HTML5 powered native mobile UI that automatically adapts to different
devices
Built using Kendo UI Mobile ?
SLIDE 16
Native UI on Every Device
SLIDE 17
Ready for App Stores
SLIDE 18
Kendo UI Framework
DataSource Model T emplate MVVM Drag OvservableObject Node T emplate OvservableArray Validator Draggable
SLIDE 19
Kendo UI Mobile Widgets
ActionSheet BackButton Button ButtonGroup DetailButton Layout ListView Loader ModalView NavBar Pane PopOver Scroller ScrollView SplitView Switch Swipe T abStrip View
SLIDE 20
facebook.com/telerik @telerik
Code Walkthrough for Netflix Movie Explorer
SLIDE 21
facebook.com/telerik @telerik
Step1 : Add Reference
SLIDE 22
facebook.com/telerik @telerik
Step 2 : Create layout
SLIDE 23
facebook.com/telerik @telerik
Step 3: Initialize Kendo Mobile
SLIDE 24
facebook.com/telerik @telerik
Step 4: Create Views
SLIDE 25
facebook.com/telerik @telerik
Step 5: Create Data Source
SLIDE 26
facebook.com/telerik @telerik
Step 6: Create Template
SLIDE 27
facebook.com/telerik @telerik
Step 7: Create ListView
SLIDE 28
facebook.com/telerik @telerik
Step 8: Put style in CSS
SLIDE 29
facebook.com/telerik @telerik
Step 9: Data Source for Movie Detail View
SLIDE 30
facebook.com/telerik @telerik
Step 10: Template for Movie Detail View
SLIDE 31
facebook.com/telerik @telerik
Step 11: View for Movie Detail View
SLIDE 32
facebook.com/telerik @telerik
Application
SLIDE 33
Questions?
SLIDE 34
Q1
2013
Appendix
SLIDE 35
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
SLIDE 36
What is Kendo UI
Kendo Framework Elements
Kendo UI Web Kendo UI DataViz Kendo UI Mobile
SLIDE 37