Kendo UI Mobile research document

1. CCA 2.0 Research & Development
HTML5 Widgets
Javascript Framework
Draft by Simon Zhou
Nov 7th, 2012

2. 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
3

4. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
4

5. Widgets
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
5

6. Widgets
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
6

7. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
7

8. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
8

9. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
9

10. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
10

11. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
11

12. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
12

13. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
13

14. Widgets
ActionSheet
ActionSheet
Button
ButtonGroup
ListView
ModalView
NavBar
PopOver (tablet)
Scroller
ScrollView
Switch
TabStrip
14

15. Programming
 JavaScript frameworks base on JQuery
 MVVM design pattern
 Data source and Data binding
15

16. Design Tools - KenDo UI Dojo
16

17. Customize Tools - themebuilder
17

18. Datasource
 DataSource 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.
18

19. Integration
Is able to Work with:
 PhoneGap
 Kendo UI Web
 Kendo UI DataViz (Data Visualizations Chart Widgets)
19

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>
20

21. Version
 Q3 2012 Beta Oct 25, 2012
 Q2 2012 SP1 Sep 14, 2012
 Q2 2012 Jul 11, 2012
 Q1 2012 SP1 May 15, 2012
…
 CTP Nov 19, 2011
21

22. Prices
 Kendo UI Complete $699 / developer
 Kendo UI Web, Mobile and DataViz
 One 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)
22

23. Thank you
This 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!
23