Przy ciągłym rozwoju ekosystemów .NET i JavaScript, Kendo stara się podążać za tymi zmianami. Połowa września oznacza kolejne wydanie aktualizacji frameworka. Wcześniejsze, z oznaczeniem R2 wydano w maju. Nowa wersja Kendo UI R3 2020 zawierają wiele nowych funkcji. R3 zawiera ponad 45 nowych komponentów oraz ulepszenia w WinUI i Blazor. Dzięki aktualizacji programiści tworzą swoje aplikacje zgodnie z najnowszymi trendami.

Zacznijmy od React

KendoReact zaprojektowano z myślą o rozwoju React. Biblioteka posiada natywne komponenty UI zoptymalizowane pod kątem React w 100%.

Reactowe komponenty w Kendo UI R3 2020

Jednym z pierwszych nowych komponentów w tym wydaniu jest wykres Gantta. Pomaga on tworzyć diagram Gantta, wykorzystywany przy zarządzaniu projektami. Uwzględnia się w nim podział projektu na poszczególne zadania, a także ich rozplanowanie w czasie. Nowy komponent zawiera wiele funkcji, które wzbogacą aplikacje wymagające wbudowanego wykres Gantta.

Wykres Gantta

Kolejny komponent zaprojektowano, by umożliwić programistom łatwiejsze umieszczenie stylowego nagłówka aplikacji. AppBar jest elastyczny, zawiera elementy nawigacyjne, tekst, przyciski akcji i wiele innych.

Nowym składnikiem jest również widżet: Rating. „Ocena” integruje funkcje oceniania z aplikacjami, niezależnie od tego, czy wymaga ona ustawiania oceny przez użytkowników, czy też jest wyłącznie do odczytu. Z kolei Odznaka pasuje do scenariuszy, w których inne elementy UI zapewniają pewne odczucia użytkownika. Chodzi tu m.in. o wskazywanie powiadomień lub nieprzeczytanych wiadomości.

Ostatnimi dwoma nowymi komponentami jest Text Area oraz Loader. Ten pierwszy, znany także jako Multi-Line TextBox rozszerza elementy formularza w KendoReact. Drugi z kolei jest samodzielnym wskaźnikiem ładowania. Wbudowane style i możliwości modyfikacji poprzez opcje konfiguracji dają możliwość dopasowania komponentu do każdego projektu.

Nowe funkcje w starszych komponentach

Istniejące już komponenty otrzymały kilka nowych funkcji. Siatka ma teraz możliwość przypinania wierszy oraz kolumn przez menu kolumnowe. Oprócz tego deweloperzy React mogą całkowicie przejąć UX pagera KendoReact Grid. Podstawowy mechanizm nadal obsługuje Grid, jednak ogólne wrażenia stronicowania są całkowicie zależne od tego, co wprowadził programista.

Z kolei w Edytorze dodano okno dialogowe wstawiania obrazu z lokalnego systemu plików oraz nowe narzędzie do obsługi koloru czcionki i tła treści w edytorze reakcji. Ciekawą funkcją jest narzędzie Znajdź i zamień – zastępuje on fragment tekstu w całej zawartości edytora.

Przejdźmy do Vue – Kendo UI R3 2020

Kendo UI dla Vue jest biblioteką z ponad 60 komponentami do tworzenia nowoczesnych i bogatych w funkcje aplikacji Vue.

Nowe komponenty dla Vue

Przede wszystkim interfejs Kendo dla Vue oficjalnie obsługuje najnowszą wersję kandydata do wydania – Vue 3.0. Nowością są także trzy komponenty natywne – ComboBox, MaskedTextBox oraz AutoComplete. Pierwszy z nich jest komponentem formularza, rozszerzającym element <select>. Ponadto obsługuje on filtrowanie i wiązanie danych, a także możliwość wprowadzania niestandardowego tekstu. MaskedTextBox pozwala na określanie formatu przy wpisywaniu przez użytkowników końcowych danych, np. numeru telefonu czy kodów pocztowych. Ostatnią nowością w Vue jest auto uzupełnianie formularzy. Dzięki temu użytkownik może wybrać wartości z pojawiającego się okienka.

Kendo UI R3 2020 dla jQuery

Jednym z nowych komponentów dla Query jest kreator (Wizard), który łączy cechy i funkcjonalność wcześniejszych dwóch komponentów – Stepper oraz Form. Dzięki niemu prostsze będzie rozłożenie złożonych formularzy na kilka kroków. Jednocześnie pomocny UX pozwala na nawigację między każdym krokiem. Kolejną nowością jest Loader, który wyświetla animacje podczas przetwarzania procesu w aplikacji. Komponent zapewnia kilka wbudowanych typów animacji, dzięki którym programiści dostosują je do własnych potrzeb.

Nowe funkcje

Większość wprowadzonych nowych funkcji dotyczy komponentu Gantt. Programiści w Kendo UI dla Query mają teraz więcej możliwości w zakresie kolumn – nowe menu kolumnowe oraz udostępnianie niestandardowych szablonów dla dowolnych kolumn w module Gantta. Oprócz tego wprowadzono przełączanie interfejsu. Użytkownik końcowy może przełączać się między wyświetlaniem zadań z ich rzeczywistym stanem lub w trakcie ich planowania. Dzięki temu opóźnione zadania mają unikalny styl, a z kolei zadania na czas mają inny.

Zaktualizowano także moduły TreeList (wybór pozycji), arkusz kalkulacyjny (niestandardowy kod HTML w komórkach) oraz zaktualizowano dostępność w harmonogramie.

Last but not least – Angular!

Nowym komponentem jest ListView. W przypadku dużych list danych, wymagających unikatowego szablonu do renderowania, ten moduł jest idealny. Breadcrumb jest modułem przydatnym dla dużych aplikacji z wieloma stronami. Zapewnia łatwiejsze przechodzenie do wyższych poziomów w hierarchii stron, bez konieczności naciskania Wstecz. Nowymi komponentami są także: Loader, AppBar oraz RangeSlider, których działania są podobne do opisanych wyżej w innych bibliotekach.

Zaktualizowano także jeden komponent – Siatka, dzięki któremu użytkownik może wybierać pojedyncze komórki. Wystarczy kliknąć na nie lub przeciągnąć obszar zaznaczenia.

Seminarium na żywo

Twórcy Kendo UI R3 2020 we wtorek 29 września o godzinie 11:00 oraz w środę, 30 września o godzinie 11:00 czasu wschodniego poprowadzą seminarium internetowe opisujące nowości w R3 2020. We wtorek opisane zostaną postępy z React i Vue, a w środę nowości z Angular i jQuery.

Źródło: Telerik