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 – Lohith.nagaraj@telerik.com

Agenda What is Hybrid Application Introducing Icenium Introducing Kendo UI Mobile Code walkthrough Hands on Lab

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

Why Hybrid Apps? Devel velopm opment ent 100 LOC • Objective C iOS • MAC 300 • Java 100 Android LOC LOC • Eclipse Windows • Visual Studio Phone • C#/XAML 100 LOC Maintenan enance e @telerik facebook.com/telerik

iOS Android HTML JAVASCRIPT Deploy using Cordova Windows CSS Phone Various ous Platfor orms s Hybrid id App Devel elopmen ent @telerik facebook.com/telerik

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

Icenium is a Cloud Based Integrated Development Environment for Cross Platform Application Development Icenium MIST GRAPHITE

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

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

Native UI on Every Device

Ready for App Stores

Kendo UI Framework DataSource Model T emplate MVVM Drag OvservableObject Node T emplate Draggable OvservableArray Validator

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

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

Step1 : Add Reference @telerik facebook.com/telerik

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

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

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

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

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

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

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

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

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

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

Application @telerik facebook.com/telerik

Questions?

Q 1 2013 Appendix

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

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

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