Introduction to Kendo Mobile Applications.LUNCH AND LEARN.

Scope.

Kendo UI Framework.

First Kendo Mobile Application

Kendo Mobile Widgets

DataSource.

Templates

MVVM

Kendo UI Framework.

The Kendo UI Framework can be grouped into 2 broad areas: Kendo UI Widgets

It includes all UI elements that we "see" once the application is developed such as the buttons, drop-down list, and tree

view.Kendo UI widgets can be classified into three groups:

• Kendo UI Web• Kendo UI DataViz:• Kendo UI Mobile:

Complete list of kendo UI Widgets

Kendo UI Framework - 2.

Kendo UI Framework elementsThe Framework elements are the invisible entities which

helps in integrating the data with the widgets. DataSource Templates MVVM

First Kendo Mobile Application

Requirements • HTML Editor or IDE (Visual Studio, Dreamweaver or Notepad)• Kendo UI Bundle (javascript , stylesheets and images)• Jquery(the version of jQuery supported by the version of Kendo UI

Bundle you are using.)• Mobile Phone Emulator or Mobile Phone for testing.

Kendo Mobile Widgets

Views A view widget represents a page in a Kendo UI Mobile

application. All widgets and other HTML elements are added inside a view. Any Kendo UI Mobile app will have one or more views.

<div data-role=“view” id=“login-view” > Layout

A layout is nothing but a master template into which a view will be rendered.

<div data-role="layout" data-id="main-layout">

Kendo Mobile Widgets 2

Navigation Bara container widget where we can add a title and/or

other widgets E.g Menu items<div data-role="navbar">

Application Object var application = new kendo.mobile.Application();

DataSource

The DataSource plays a central role in the applications and sites built with Kendo UI. it provides commands to process local or remote data. retrieving data from a remote endpoint. It helps maintain the structure and type of the data it represents.var dataSource = new kendo.data.DataSource({ data: [ { id:1 , title: "Introduction To Kendo", category: 3 },

{ id: 2 , title: "MVC Jumpstart", category: 2 },{ id: 5 , title: "Design Patterns", category: 2 } ],

categories:[{ id:1 , name: "Design"},{ id:2 , name: "Web"},{ id:3 , name: "Mobile"}

] });

Templates

Templates are a simple and convenient way to build complex UI structures, typically with repeated blocks like the LIstView Widget.

1. #= lastName #: This renders the value stored in the variable lastName.2. #: address #: This renders the value with its HTML encoding.3. #for(... ){# ... #}#: This executes JavaScript code in the template so

that rendering happens depending on certain conditions, such as loops. #for(i=0;i<3; i++){#value of i: #=i# <br/> #}#

Templates – External Templates

External templates are defined in HTML files within <script> blocks with type text/x-kendo-template as shown:

<script id="kendoExternalTemplate" type="text/x-kendo-template" >

#for(i=0;i<3; i++){#value of i: #=i# <br/>

#}#</script>

MVVM

The process of using with Kendo MVVM is very simple. Here is what we

have to do: • Create an observable ViewModel from JavaScript data using

kendo.observable() • Bind the methods and properties in the ViewModel to HTML

elements in the UI using kendo.bind()