Kendo UI jest kompletnym frameworkiem do tworzenia aplikacji w standardzie HTML5. Zawiera on wszystkie niezbędne składniki potrzebne do zbudowania nowoczesnych, interaktywnych i co najważniejsze – intuicyjnych aplikacji HTML5.

Twórcy właśnie udostępnili wersję Kendo UI R2 2020. Wydanie zawiera kilka aktualizacji w bibliotekach Angular, jQuery, React i Vue.

Na początek — Angular

Wskazówki dotyczące formularza

Aplikacje potrzebują formularzy, a budowanie ich od podstaw jest trudne. Dlatego stworzono interfejs Kendo UI for Angular Form Guidelines. Jest to kompletny przewodnik do budowania formularzy w Angular. Do stworzenia takiego formularza używać można elementów HTML lub Kendo UI dla Angular.

Nowe komponenty — Stepper, Pager i wiele innych

Stepper jest komponentem, który pomoże rozbić każdy proces na małe kroki. Każdy krok jest w pełni kontrolowany pod względem zawartości. Sam komponent zawiera style dla przeszłych, bieżących, a także przyszłych kroków.

Zewnętrzna strefa zrzutu

Następnym komponentem jest zewnętrzna strefa zrzutu. Dzięki niemu programiści mogą dodać obszar do którego użytkownicy będą mogli przeciągać i upuszczać pliki ze swojego systemu, w celu jego obsługi w aplikacji Angular. Dodatkowo komponent jest również oferowany jako dyrektywa, która dodaje funkcję przeciągnij i upuść do dowolnego komponentu, do którego została zastosowana.

W nowym wydaniu Kendo UI wprowadzony został interfejs Pager, który pozwala wszystkim programistom Angular na intuicyjny sposób przeglądania stron przez użytkowników końcowych.

Label

Komponent Label zapewnia dodatkowe funkcje, m.in. pozwala wyświetlać opcjonalnie etykiety. Z kolei nowe komponenty FormField, Hint i Error pomagają tworzyć formularze i łączyć poszczególne jego pola z grupami komponentów, np. z danymi wejściowymi czy etykietami. Oprócz tego komponent zawiera nowe wskazówki i etykiety błędów.

Funkcje w istniejących komponentach

Interfejs TreeList został oficjalnie wydany jako RTM. W związku z tym dodano wielu nowych funkcji, tj.:

• Wybór (Selection)
• Wirtualizacja (Virtualization)
• Nawigacja za pomocą klawiatury (Keyboard Navigation)
• Zgodność z ułatwieniami dostępu (Accessibility Compliance)

Do komponentu TreeView dodano przycisk „Load more”. Funkcja ta rozkłada konkretny poziom w TreeView i ładuje fragmenty danych w jednym węźle zamiast wszystkich danych jednocześnie. Dodanie tej funkcji ma na celu zwiększyć wydajność Kendo UI.

Przycisk “Load more”

Do interfejsu użytkownika Angular Grid dodano możliwość zachowania stanu rozwijania/zwijania wierszy szczegółów w siatce danych.

Komponenty jQuery Kendo UI z R2 2020

Przede wszystkim komponenty Query Kendo UI obsługują najnowszą wersję jQuery 3.5.1. Podobnie jak w przypadku dodatków do Angulara, dodanymi komponentami są formularze i Stepper.

Nowością jest składnik Text Box — wcześniej dostępny jako prymitywy CSS. Poprzednio można go było dodawać do zwykłego elementu wejściowego HTML. Kolejnym nowym komponentem jest TileLayout. Składa się z kilku bloków konstrukcyjnych, zwanych kafelkami, które można skonfigurować w sposób podobny do siatki CSS. Użytkownik końcowy może przeciągać i upuszczać kafelki, aby spersonalizować swoje ustawienia.

Harmonogram — zmiany

Wirtualizacja jest kluczową funkcją do obsługi dużych zestawów danych w dowolnym komponencie. Program Kendo UI Scheduler ma teraz wbudowaną wirtualizację. Pomaga ona przewijać duże kolekcje wydarzeń w programie, w wyniku utrzymując płynność działania. Oprócz tej funkcji do harmonogramu dodano także obsługę iCal. Jest to popularny format danych dla systemów planowania i kalendarza. Dodanie obsługi formatu iCal umożliwi programistom, a także użytkownikom łatwiej importować i eksportować zdarzenia.

W interfejsie użytkownika, w jego górnej części, pojawiło się także pole wyszukiwania. Pozwala ono użytkownikom filtrować zdarzenia na podstawie dowolnego łańcucha dodanego do pola tekstowego.

Kendo UI dla React

W ramach ułatwienia tworzenia formularzy stworzono Wytyczne formularzy KendoReact. Jednym z nowych komponentów jest element ListView, który pozwala tworzyć przewijalną listę przedmiotów. Każdy z elementów listy może być odpowiednio dostosowany, można korzystać z kilku różnych układów (np. jako karty lub tradycyjna lista).

Nowe komponenty

Aby podkreślić postęp w aplikacji React wprowadzono dwa elementy — Progress Bar & Chunk Progress Bar. Pierwszy z nich zapewnia pasek, który pokazuje plan od początku do końca. Natomiast drugi z nich jest podzielony na bloki, które wypełniają się wraz ze wzrostem wartości.

Podobnie jak we wcześniejszych frameworkach dodano komponenty Stepper, Label, Hint i Error. Nowością jest tak zwany Range Slider. Jest to oparty na istniejącym suwaku komponent, ale zamiast oferowania jednej wartości umożliwia użytkownikom końcowym przeciąganie wokół uchwytów w celu zdefiniowania wartości minimalnej i maksymalnej.

Do istniejących komponentów dodano także nowe funkcje. Wraz z obsługą dużych zestawów danych i poprawą wydajności, KendoReact TreeList ma wbudowany komponent pager, który pomaga nawigować po stronach danych w większych kolekcjach. Oprócz tego w TreeList dodano funkcję przeciągania i upuszczania. Elementy można teraz przenosić z jednego poziomu hierarchii na następny, razem ze wszystkimi potencjalnymi węzłami potomnymi.

Za pomocą jednego przycisku można teraz eksportować zawartości TreeList do formatu PDF lub Excel. Wyeksportowaną treść można również dostosować, aby dodać dodatkowe informacje lub zmienić styl.

Vue

Zespół Kendo UI Vue rozpoczął przygotowania do najnowszej wersji Vue 3.0, która ostatnio weszła w wersję beta. Wśród nowych komponentów natywnych (zbudowanych od podstaw) znajduje się komponent kalendarza.

Zapewnia on intuicyjny interfejs do wybierania pojedynczej daty w widoku miesiąca. Jako element formularza dodano także komponenty DateInput i Date Picker. Pierwszy z nich pozwala użytkownikom wprowadzić ciąg daty, zachowując określony format. Natomiast drugi używa kalendarza podręcznego do wybierania daty zamiast konieczności ręcznego jej wpisywania.

Źródła:

• https://www.telerik.com/blogs/whats-new-kendo-ui-r2-2020
• https://www.telerik.com/blogs/whats-new-kendo-ui-angular-components-r2-2020
• https://www.telerik.com/blogs/whats-new-kendo-ui-jquery-components-r2-2020
• https://www.telerik.com/blogs/whats-new-kendoreact-r2-2020
• https://www.telerik.com/blogs/whats-new-kendo-ui-vue-components-r2-2020