Windows phone 8 app using Kendo UI

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

description

Slides from webinar Windows Phone 8 Development using Kendo UI Mobile

Transcript of Windows phone 8 app using Kendo UI

Page 1: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Developing Windows Phone 8 Apps using Kendo UI Mobile

Page 2: Windows phone 8 app using Kendo UI

AgendaWhat is Hybrid Application

Introducing Kendo UI Mobile

Discussion on App Architecture

Demo

Question and Answer

Page 3: Windows phone 8 app using Kendo UI

Dhananjay Kumar– Customer Advocate, Telerik– Microsoft MVP – Mindcracker MVP– @debug_mode – http://debugmode.net– http://telerikhelper.net – [email protected]

m

Your Presenter

Page 4: Windows phone 8 app using Kendo UI

Resources Two of you have chance to win Ninja T-Shirt

http://telerikhelper.net

http://www.kendoui.com

Page 5: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

App Architecture

Database

Service layer

Develop using Kendo UI Mobile

Page 6: Windows phone 8 app using Kendo UI

Different Types of Apps

Apps for Devices

Native Apps

Mobile Web Apps

Hybrid Apps

Page 7: Windows phone 8 app using Kendo UI

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

Page 8: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Hybrid App Development

CSS

JAVASCRIPT

HTML

Deploy using Cordova

iOS Android

Windows Phone

Various Platforms

Page 9: Windows phone 8 app using Kendo UI

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

Page 10: Windows phone 8 app using Kendo UI

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

Page 11: Windows phone 8 app using Kendo UI

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

Page 12: Windows phone 8 app using Kendo UI

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

Page 13: Windows phone 8 app using Kendo UI

HTML5 powered native mobile UI that automatically adapts to different devices

Built using Kendo UI Mobile ?

Page 14: Windows phone 8 app using Kendo UI

Native UI on Every Device

Page 15: Windows phone 8 app using Kendo UI

Ready for App Stores

Page 16: Windows phone 8 app using Kendo UI

Kendo UI Framework

DataSource Model Template MVVM

Drag OvservableObject Node Template

OvservableArray Validator

Draggable

Page 17: Windows phone 8 app using Kendo UI

Kendo UI Mobile WidgetsActionShee

tBackButto

n Button ButtonGroup

DetailButton

Layout ListView Loader ModalView NavBar

Pane PopOver Scroller ScrollView SplitView

Switch Swipe TabStrip View

Page 18: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Demo App Architecture

Database

Service layer

Page 19: Windows phone 8 app using Kendo UI

Demo

Let us write some codes

Page 20: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step1 : Add Reference

Page 21: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 2 : Create layout

Page 22: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 3: Initialize Kendo Mobile

Page 23: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 4: Create Views

Page 24: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 5: Create Data Source

Page 25: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 6: Create Template

Page 26: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 7: Create ListView

Page 27: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 8: Put style in CSS

Page 28: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 9: Data Source for Movie Detail View

Page 29: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 10: Template for Movie Detail View

Page 30: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Step 11: View for Movie Detail View

Page 31: Windows phone 8 app using Kendo UI

facebook.com/telerik

@telerik

Application

Page 33: Windows phone 8 app using Kendo UI

Questions?