kendo ui mobile research

Kendo UI MobileHTML5 Widgets

Javascript Framework

CCA 2.0 Research & Development

Draft by Simon ZhouNov 7th, 2012

Kendo UI Mobile

2

3

Overview• Build apps that look-and-feel native on iOS,

Android and BlackBerry• HTML5, CSS3, Javascript• Orientation, touch supported• Chrome, Safari supported, Firefox partially

supported, Internet explorer 9 not support yet• Windows phone and tablet not supported yet

4

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

5

Widgets

ActionSheetButton

ButtonGroupListView

ModalViewNavBar

PopOver (tablet)Scroller

ScrollViewSwitch

TabStrip

6

Widgets

ActionSheetButton

ButtonGroupListView

ModalViewNavBar

PopOver (tablet)Scroller

ScrollViewSwitch

TabStrip

7

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

8

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

9

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

10

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

11

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

12

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

13

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

14

Widgets

ActionSheetActionSheet

ButtonButtonGroup

ListViewModalView

NavBarPopOver (tablet)

ScrollerScrollView

SwitchTabStrip

15

Programming

JavaScript frameworks base on JQueryMVVM design patternData source and Data binding

16

Design Tools - KenDo UI Dojo

17

Customize Tools - themebuilder

18

DatasourceDataSource component - is an abstraction for using local

(arrays of JavaScript objects) or remote (XML, JSON, JSONP) data.

Kendo UI includes validation out-of-the-box via the Validator component, which offers a mechanism of performing client-side form validation.

19

IntegrationIs able to Work with:

PhoneGapKendo UI WebKendo UI DataViz (Data Visualizations Chart Widgets)

20

Sample Code

<div data-role="view" data-title="Detail Buttons"> <ul data-role="listview" data-style="inset" data-type="group"> <li>Default button styles <ul><li>Contact Add<a data-role="detailbutton" data-

style="contactadd"></a></li> <li>Detail Disclose<a data-role="detailbutton" data-

style="detaildisclose"></a></li> <li>Row Insert<a data-role="detailbutton" data-

style="rowinsert"></a></li> <li>Row Delete<a data-role="detailbutton" data-

style="rowdelete"></a></li></ul> </li> <li>Custom icons <ul><li>More info<a data-role="detailbutton"

data-icon="more"></a></li> <li>Battery level<a data-role="detailbutton" data-

icon="battery"></a></li></ul> </li> </ul></div>

21

VersionQ3 2012 Beta Oct 25, 2012Q2 2012 SP1 Sep 14, 2012Q2 2012 Jul 11, 2012Q1 2012 SP1 May 15, 2012…CTP Nov 19, 2011

22

PricesKendo UI Complete $699 / developer

Kendo UI Web, Mobile and DataVizOne year free updates (Unlimited tickets, 48h response time)

Kendo UI Web $399 / developer One year free updates (10 tickets, 48h response time)

Kendo UI Mobile $199 / developer One year free updates (10 tickets, 48h response time)

Kendo UI Web $399 / developer One year free updates (10 tickets, 48h response time)

23

Thank youThis document was uploaded to our Team SharePoint

Documents site.

https://raymarkcom.sharepoint.com/SaksCCA/Documents/Research/Kendo UI Mobile research.pptx

Thanks for your time.Have a nice day!