Asp.net mvc - Better User Experience with Kendo UI
Download as PPTX, PDF4 likes3,975 views
The document introduces Kendo UI, a HTML5 and JavaScript framework that provides widgets, data binding, MVVM capabilities and wrappers for ASP.NET MVC to help build dynamic web and mobile applications. It discusses the components of Kendo UI including widgets, data source, templates and themes. The document also demonstrates how to use Kendo UI widgets by initializing them with JavaScript and handling events.
Asp.net mvc - Better User Experience with Kendo UI
- 1. THE WAY OF HTML5
- 2. Who am I ? Lohith G N – Developer Evangelist – Telerik, – Lohith.nagaraj@telerik.com – Bangalore Dot Net (BDotNet) User Group Lead, – Microsoft MVP, – @kashyapa, – http://kashyapas.com, www.telerikhelper.net
- 3. Agenda ASP.NET Introduction to Building Apps MVC Kendo UI with Kendo UI
- 4. ASP.NET MVC - Primer facebook.com/telerik @telerik
- 5. What is ASP.NET MVC - Powerful, Pattern Based way to build dynamic websites - Enables clean separation of concerns - Full control over markup - TDD friendly development
- 6. /Home/Index Controll er Model View
- 7. Kendo UI - Introduction facebook.com/telerik @telerik
- 8. What is Kendo UI ? Everything you need to build HTML5 + JavaScript sites & APPS “Kendo UI solves an important problem faced by JavaScript and HTML5 developers. It delivers a unified framework backed by professional support. It's easier to learn, easier to upgrade, ultimately making it easier to build apps with HTML5.” -Todd Anglin, VP – HTML5 Web & Mobile Tools, Telerik
- 9. Kendo UI Blocks ASP.NET MVC Wrappers Kendo UI Kendo UI Kendo UI Web DataViz Mobile Kendo Framework Elements
- 10. Kendo Building Blocks a.k.a F/W DataSource Validation Globalization Templating MVVM Drag & Drop
- 11. Everything you need in one place, Not hundreds of plug-ins - UI Widgets - MVVM Framework - Datasource - Templates - Themes
- 12. Ready for Touch - Full support for Touchscreen - D & D also Touch Enabled
- 13. Fast JavaScript for performance - Every aspect built from ground up - Not another Jquery UI Clone - Lightweight, templating library faster than jquery templates - Optimized animations
- 14. Great UX across devices and browsers - IE7+ - FF ESR - Chrome - Safari 4+ - Opera 10+
- 15. Manage rich views and models the MVVM way - Inbuilt MVVM framework - Declarative binding, two-way sync - Can be used with other lib like Backbone.js
- 16. Customize themes Customize themes to match the look & feel of your site and app - ThemeBuilder tool to customize
- 17. Kendo UI Widgets DateTimePick AutoComplete Calendar ComboBox DatePicker er DropDownList Editor Grid ListView Menu NumericTextB PanelBar Slider Splitter TabStrip ox TimePicker TreeView Upload Window
- 18. Using Kendo UI 1. Download Kendo UI 2. Configure page to use Kendo UI Scripts & Styles, Define basic HTML 3. Initialize with JavaScript 4. Use rich API to configure behavior, handle events 1. Attribute Based 2. JavaScript Based
- 19. DEMO facebook.com/telerik @telerik
- 20. Kendo UI Wrappers for ASP.NET MVC facebook.com/telerik @telerik
- 21. Power of JavaScript, Productivity of Server Simply program on the server and the Kendo UI wrappers will handle the HTML and JavaScript
- 22. Simple server-side data binding and CRUD server-wrappers help configure JavaScript data sources to work directly with your data, even for CRUD operations.
- 23. Complete Server & Client-side APIs Complete control via complete server- side APIs. Server wrappers output Kendo UI JavaScript. You have full access to the Kendo UI client-side API for maximum control in the browser
- 24. • Supports ASP.NET MVC 3+ • Use with any ViewEngine (Razor, ASPX) • Automate AJAX data binding • Visual Studio helpers for faster configuration
- 25. Q3 2012 Demo
- 26. Q&A facebook.com/telerik @telerik
- 27. Resources Kendo UI Mobile Home Page http://www.kendoui.com/mobile.aspx Kendo UI Mobile Demos http://demos.kendoui.com/mobile/overview/index.html Kendo UI Mobile Documentation http://docs.kendoui.com/api/mobile Kendo UI Dojo http://www.kendoui.com/dojo.aspx