Zastosowanie frameworka Kendo UI w aplikacjach ASP.NET MVC Dobrze, to co teraz zobaczylismy to taki maly trailer tego co na dzisiejszej prezentacji. Nazywam sie Tomasz Margalski dzis chcialbym wam przedstawic framework Kendo UI i jego zastosowanie w aplikacjach asp.net mvc. Kendo poznałem przez przypadek, szukajac kontrolek do aplikacji asp mvc, poczytałem troszke o kendo o jego widgetach i szybko doszedlem do wniosku ze ten framework jest warty poznania i was zaciekawi. Czy w ogole ktos z was co czytał/słyszał o kendo? A ile osob robiło coś w jquery ui? Tomasz Margalski 2

Agenda Kendo UI – co to jest i do czego służy Kendo UI vs jQuery UI Kendo UI Web w Twoim projekcie Przykłady zastosowania widgetow Kendo UI Web Podsumowanie Pytania Co w dzisiejszej prezentacji? Na poczatku przedstawie i mowie wam owy framewok, pozniej dla wszystkich tych ktorzy mysla sobie 'hey po co mi Kendo UI skoro mam jQuery UI' postaram sie przedstawic wady i zalety frameworka Kendo. Nastepnie przejdziemy do Visuala zalozymy porjekt i wrzucimy do niego kendo, potem pokaze Wam kilka przykładów zastosowania widgetow Kendo UI Web, bo na tym wlasnie elemencie z frameworka Kendo sie skupimy na dzisiejszej prezentacji. Na koniec małe podsumowanie i pytania mam nadzieje i odpowiedzi :) 3

Czym jest Kendo UI? „Kendo UI is everything professional developers need to build HTML5 & JavaScript sites and mobile apps.” - kendoui.com A wiec... czym jest kendo Ui, jest to framework dzieki ktoremu w prosty sposob zbudujemy nowoczesne aplikacje webowe i mobilne. Kendo UI to kompletny framework do tworzenia aplikacji w standardzie HTML5. Zawiera wszystkie niezbędne składniki potrzebne do budowania nowoczesnych, intuicyjnych, interaktywnych aplikacji HTML5. Dostarcza mechanizmy JQuery dla takich obiektów, jak bindowanie danych po stronie klienta, animacje i technikę przeciagnij-i-upuść. 4

Kendo UI Framework Kendo UI składa się z trzech elementow(produktow): Kendo UI Web – główne funkcjonalności framework-a, podstawowe komponenty oraz efekty; Kendo UI DataViz – kolekcja komponentów wizualizacji danych; Kendo UI Mobile – zestaw widgetów do tworzenia stron i aplikacji na urządzenia mobilne. Każdy z produktów można kupić oddzielnie lub jako kompletne narzędzie, które da się uzupełnić o mechanizmy wspierające ASP.NET MVC 5

Web Duża ilość widgetów Data Source Szablony Walidacja Globalizacja Drag-and-Drop (dotykowe) ThemeBuilder Kendo to jednolity framework oparty o jquery, zawiera duża ilośc przydatnych w codziennej pracy webdevelopera kontrolek, o ktorych szerzej opowiem za chwile, w skład frameworka wchodzi równiez komponent data source ktory w pełni obsluguje CRUD, create read update i destroy, operacje na danych zapewnia lokalnie jak i po stronie serwera, wpiera stronicowanie, filtrowanie grupowanie. Szablony czyli szablony html lub js. Walidacja czyli walidacja po stronie klienta Globalizacja czyli opcje pozwalajace na tworzenie wielokulturowych aplikacji, formaty dat, nazway, formaty liczb itp Drag and drop czyli przeciaganie i upuszczanie kazdego elementu w DOMie ThemeBuilder nic innego jak zmienne skroki widgetow, kendo udostepnił na swojej stronie mozliwosc definiowania i budowania własnych styli dla kontrolek. 6

DataViz Oparte o HTML5 Dostępne wykresy: Kołowy Liniowy Kolumnowy Punktowy Powierzchniowy Bąbelkowy DataViz czyli wizualizacja danych oparta o html5, co czyni wykresy kendo bardzo lekkimi Dostępne są rozne rodzajow wykresów takich jak wykres kolowy, liniowy, kolumnowy, punktowy, powierzchniowy czy babelkowy 7

Mobile Natywnie na każdym urządzeniu Wsparcie dla WinPhone8, iOS, Android, BlackBerry Kolejnym elementem jest kendo ui Mobile. Kendo Ui Mobile daje developerom mozliwosc programowania pod takie systemy jak WInPhone8, iOS, Android czy BlackBerry, aplikacji wygladajacych na natywne. Nasza aplikacje napisana dzieki kendo mobile, systarczy przekompilowac uzywajac PhoneGap'a i mamy gotowa apke do publikacji w store 8

vs Ok, teraz czas na mały pojedynek, pomiedzy kendo ui a jquery ui ;) 9

10 Dwojka pracownikow Telerika zalozyla strone 'jqueryuivskendoui.com' Jeden z nich to evangelista z zespolu Kendo UI, a drugi to czlonek zespolu jQuery UI. Ta tabelka pochodzi wlasnie z owej strony. Co my tu mamy... Jak widac ilosc widgetow dostarczanych w paczce przez kendo bije niezle na glowe jquery... i to wlasnie jedna z wielu zalet Kendo, mamy kendo a w nim np prosty grid, w jquery ui juz tak nei ma, musimy sobie sciagnac skrypt jqgrid... No ale.. o widgetach kendo za chwile. Ilosc interakcji jest taka sama, czyli standardowo dragable, dropable, filtrable, resizable, sortable, pageable... Kendo posiada Szablony ktorych nie ma jquery ui, posiada znany datasource, umozliwia korzystanie z mvvm, i z wizualizacji danych, czego nie potrafi jquery ui. Kendo rowniez ma mozliwosc validacji po stronie klienta, Wsprawcie dla przegladarek, praktycznie na podobnym poziomie, z tym ze jquery ui nie za bardzo jest obslugiwane w smartfonach, i kuleje w nich np drag n drop. http://jqueryuivskendoui.com/ 10

Kendo UI Web w Twoim projekcie http://www.kendoui.com/download.aspx <link href="styles/kendo.common.min.css" ... /> <link href="styles/kendo.default.min.css" ... /> <script src="js/jquery.min.js" ..></script> <script src="js/kendo.web.min.js" ..></script> PM > Install-Package KendoUIWeb Dobra, przejdzmy teraz do tego co najlepsze czyli visuala :) 11

Przykłady zastosowania widgetów Kendo UI Web w aplikacjach ASP.NET MVC

Licencja Kendo UI Web - GPL-3.0 Kendo UI Complete for ASP.NET MVC – $999/rok, 1 developer Kendo UI Web– $399/rok, 1 developer Kendo UI Mobile – $199/rok, 1 developer Kendo UI DataViz– $399/rok, 1 developer Kendo UI Web udostepnione jest jako open source na licencji GLP w wersji trzeciej. Kompletny framework ktory zawiera kendo mobile, web i dataviz kosztuje prawie Tysiac dolrawo, mozna oczywiscie rozbic na licencje tylko dla web za 400 dolarow, mobile za 200 dolarow i dataviz dla 400 dolarow 13

Podsumowanie Alternatywa dla jquery ui, jqgrid.. Itd. Jeden framework, a tyle widgetow, elementów... Oferty pracy: „Dodatkowym atutem będzie znajomość: Kendo UI (Telerik);” Framework Kendo UI to ciekawa alternatywa dla takich frameworkow jak jquery ui, jqgrid itp. Jeden Framework a tyle widgetow i elementow, nie martwimy sie o nowe wersje skryptow widgetow z ktorych korzystamy. Oferty pracy, tak to jeden z glowniejszych powodow dla ktorych warto poznac kendo. Czesto spotyka sie na portalach z ofertami pracy dla programistow webowych wlasnie taki zapis, 'Dodatkowym autotem bedzie...'. Mysle ze faktycznie, warto bedzie poznac Kendo UI wlasnie dla posiadania takiego atutu w cv :) 14

Pytania? margalski@boo.pl @tmargalski