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 – Dhananjay.kumar@telerik.co

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?