Post on 20-Mar-2017
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!