Nowy rok rozpoczął się nowym wydaniem frameworka Kendo UI R1 2021. Poprzednie wersje – R2 2020 i R3 2020 zostały wydane odpowiednio w maju i we wrześniu.

Kendo UI zawiera wszystkie niezbędne składniki potrzebne do zbudowania nowoczesnych, interaktywnych i intuicyjnych aplikacji HTML5. Najnowsze wydanie ma kilka aktualizacji w bibliotekach React, Vue, jQuery oraz Angular.

Kendo UI R1 2021 – nowości dla React

W tegorocznym Kendo UI przede wszystkim znajduje się osiem nowych komponentów interfejsu użytkownika. Przypomnieniem jest wiadomość, że framework wspiera najnowszego Reacta 17. „Siedemnastka” nie posiada żadnych nowych funkcji, a Kendo ogłosił wsparcie dla nowego wydania dla wszystkich komponentów KendoReactUI już tego samego dnia.

Nowe komponenty

Jednym z nowych komponentów jest składnik TileLayout. Pozwala on tworzyć interaktywne pulpity nawigacyjne przy pomocy pojedynczego komponentu UI. Użytkownik końcowy ma możliwość przeciągania i zmieniania rozmiaru wyświetlanych wskaźników KPI. Ponadto komponent posiada specjalny zestaw opcji konfiguracyjnych. Parametry definiuje się przy pomocy wierszy i kolumn (jak w siatce).

Komponent TileLayout

Oprócz tego nowym komponentem jest także DropDownTree, łączący dwa wcześniejsze komponenty – TreeView oraz komponent rozwijany. Kolejnym składnikiem jest MutiColumnComboBox, który podobnie jak DropDownTree jest rozwijalną listą elementów, w układzie siatki – każdy z elementów wyświetla wiele pól w wierszu.

Komponent MultiColumnComboBox

Kolejną nowością jest FloatingActionButton (pływający przycisk akcji), który służy do określenia podstawowej lub najczęstszej akcji w aplikacji. Następnym składnikiem jest klawisz nawigacji, który pozwala na przemieszczanie się między głównymi miejscami docelowymi w aplikacji. Każdą z opcji reprezentuje odpowiednia ikona i opcjonalnie – tekst. Ten składnik jest responsywny, więc będzie reagował na wszelkie zmiany rozmiaru.

Komponent BottomNavigation – dolny klawisz nawigacji

Ostatnie nowości w KendoReact UI to komponenty ListBox oraz Icon i SVGIcon. Pierwszy z nich zapewnia interfejs do wyświetlania listy pozycji w zdefiniowanym, przewijanym obszarze. Co więcej, przy połączeniu kilka ListBoxów można stworzyć wrażenie przenoszenia elementów między listami.

ListBox

Komponenty Icon i SVGIcon są odpowiedzialne za wyświetlanie ikon w aplikacji. Pierwszy z nich wyświetla je jako ikony czcionek, a drugi renderuje swoje ikony jako elementy SVG.

Zmiany we wcześniejszych komponentach

W Kendo UI R1 2021 dla React pojawiły się także zmiany dla istniejących komponentów – Siatki, TreeList, Edytora czy Wykresu Gantta. Do każdego z tych komponentów wprowadzono wbudowaną nawigację za pomocą klawiatury. Ponadto teraz programista może samodzielnie przypisywać skróty klawiszowe do akcji. Do komponentu związanego z wykresem Gantta dodano funkcję edycji. Dzięki temu użytkownik końcowy może modyfikować i aktualizować zadania znalezione w Gantcie.

Harmonogram

Ostatnie zmiany dotyczą Harmonogramu. Wprowadzono znacznik wskazujący aktualny czas, co ułatwi późniejszym użytkownikom sprawdzać, bez konieczności odwoływania się do zegara, jakie wydarzenia zaplanowali oraz aktualny czas.

Kendo UI dla Vue

Wśród nowości dla środowiska Vue znajdują się nowe komponenty MultiSelect, Window, elementy związane z datą i czasem oraz Slider. Ponadto wprowadzono kilka zmian w istniejącym już komponencie Siatka.

Nowe komponenty

Kendo wprowadził kilka nowych elementów dla Vue. Są to komponenty MultiSelect, Window, Slider oraz opcja wyboru daty i czasu. Pierwszy z nich wyświetla listę opcji i pozwala użytkownikowi dokonać wielokrotnego wyboru z listy. Ponadto obsługuje niestandardowe renderowanie elementów pojawiających się i tagów. Wybrane elementy mogą pojawić się jako lista wpisów, wyszczególniona jako ciąg lub token.

Komponent MultiSelect

Kolejnymi nowymi składnikami w Kendo UI R1 2021 dla Vue są komponenty wyboru daty i czasu. Jeden z nich pozwala wybrać godzinę z listy rozwijalnej. Można również wprowadzić go ręcznie, przy pomocy klawiatury lub automatycznie wybrać aktualny czas. Drugi komponent – DateTimePicker – łączy wyżej opisany TimePicker z istniejącym już wcześniej DatePicker. Użytkownik może więc wybrać w jednym interfejsie datę i godzinę.

DateTimePicker – interfejs wyboru daty i godziny

Tak jak w komponencie TimePicker użytkownik może ręcznie wprowadzić datę i czas z klawiatury, wybierając ją lub ustawić automatycznie aktualną datę i czas.

Kolejnym komponentem jest Window – wyświetla on zawartość w niemodalnym oknie HTML, które można przesuwać i zmieniać jego rozmiar.

Komponent Window

Ostatnią już nowością jest Slider. Pozwala on użytkownikom wybrać wartość za pomocą tzw. suwaka. Jest on zamiennikiem dla zwykłego podawania danych wejściowych. Programiści mogą określić minimalne i maksymalne wartości zakresu.

Slider

Vue Grid – zmiany

Jedyne wprowadzone zmiany związane są z Kendo dla Vue Grid. Tak jak w React dodano nawigacje przy pomocy klawiatury. Drugą zmianą jest wielokrotny wybór w menu kolumny. GridColumnMenuCheckboxFilter pozwala na filtrowanie danych kolumny przez listę pól wyboru.

Nowe ustawienia wyboru w kolumnach

Zmiany jQuery w Kendo UI R1 2021

Kendo dostarczył do jQuery kilka nowych komponentów oraz wprowadził kilka nowości do wcześniejszych – Siatki, ListView oraz TileLayout.

Nowości dla jQuery

Przede wszystkim nowością jest pływający przycisk akcji. Wspomnieliśmy już o nim w kontekście nowości w React. Także jQuery otrzymał ten składnik, wykonujący akcję na stronie. FloatingActionButton dostarcza nowoczesne doświadczenia użytkownika w aplikacjach. Przycisk ma także możliwość definiowania „szybkiego wybierania”.

Komponent FloatingActionButton – pływający przycisk akcji

Do Kendo jQuery dodano także Klawisz nawigacji i panel rozszerzeń. Panel pozwala tworzyć listę treści, które można rozwijać i zwijać.

Komponent Panel rozszerzeń

Komponent jest podzielony na dwie części – nagłówek i obszar zawartości. Nagłówek jest wyświetlany cały czas, a obszar pokazuje się w momencie rozwinięcia panelu rozszerzeń.

Kolejny komponent CheckBoxGroup zapewnia opcje zarządzania dwoma lub więcej powiązanymi polami wyboru.

CheckBoxGroup

Poprawki we wcześniejszych komponentach

Najwięcej nowości dostarczono do komponentu Kendo UI Grid. Wprowadzono kontrolę eksportu na podstawie kolumny. W R1 2021 jest możliwość określenia czy kolumna ma być częścią eksportowanego pliku. Do projektu dodano także przykład pokazujący jak dołączyć obraz do pliku podczas eksportowania go do Excela.

Ostatnie poprawki dotyczą kolumn w siatce. Zaktualizowano wygląd menu kolumny oraz dodano w nim opcję sortowania i grupowania.

Zmiany w komponencie Siatka

Dzięki temu użytkownik końcowy otrzymuje jeszcze więcej opcji interakcji z kolumnami siatki w menu kolumn.

W komponencie ListView wprowadzono opcję grupowania. Dane można teraz grupować według dowolnego, zdefiniowanego pola. Do Edytora także wprowadzono dwie poprawki. Przede wszystkim teraz można stworzyć listę przy pomocy liczb rzymskich. Drugą opcją jest narzędzie do wyrównywania tabel HTML w treści edytora. Użytkownik może wyrównać tabelę do lewej, prawej strony lub do środka dokumentu.

Narzędzie wyrównywania tabel

Ostatnim rozszerzeniem jest opcja dodawania i usuwania kafelek w TileLayout po jego początkowym renderowaniu. Jest to opcja, na którą czekało wielu użytkowników.

Komponent TileLayout

Kendo UI R1 2021 – Angular

Ostatnie przedstawione zmiany dotyczą biblioteki Angular. Tutaj także wprowadzono kilka nowości i znacznie więcej ulepszeń do wcześniej powstałych komponentów.

Jednak najważniejszą wiadomością jest wsparcie dla najnowszej wersji Angulara 11, który pojawił się w listopadzie. Z drugiej strony obsługa Angulara 11 oznacza koniec wsparcia dla starszych wersji – 6 i 7.

Angular – nowości

Kendo UI Angular otrzymał nowe komponenty tj. pływający przycisk akcji czy komponent DropDownTree (wspomniane przy UI dla React), komponenty MultiColumnBox i TileLayout oraz panel rozszerzeń i TextArea.

Komponent DropDownTree jest bogatszą wersją elementu <select>. Renderuje on dane w strukturze drzewa oraz daje możliwość wybrania pojedynczej, zdefiniowanej wartości.

Komponent DropDownTree

Kolejną nowością jest składnik MultiColumnComboBox, czyli komponent listy rozwijanej. Teraz można wyświetlić wiele pól dla każdego elementu w kolumnach dla każdego pola. Komponent Tile Layout, tak jak w Kendo UI dla Vue tworzy dynamiczne i interaktywne układy.

Ostatnim nowym komponentem jest TextArea. Dzięki temu użytkownik może wprowadzić dłuższy tekst. Wcześniej taka opcja była dostępna wyłącznie w niektórych stylach CSS. Teraz, jako osobny element daje możliwość wprowadzenia dodatkowych funkcji.

Komponent TextArea

Poprawki we wcześniejszych komponentach

Przede wszystkim nowością w starszych komponentach jest Responsive Pager w komponentach Siatka i TreeList. Zapewnia on, że wbudowane funkcje stronicowania są automatycznie responsywne – elementy użytkownika będą się dynamicznie zmieniać, zgodnie z obszarem wyświetlania składników. Twórcy w Wykresach wprowadzili także wizualną zmianę – lepsze wyróżnianie serii.

Wyróżnianie serii na wykresie

Komponent ListView otrzymał interfejs do edycji elementów znajdujących się w nim. Dzięki temu otrzymuje się więcej interaktywności do komponentu. Do tego komponentu dodano także nawigację przy pomocy klawiatury.

Ostatnie zmiany dotyczą Edytora i komponentu TimePicker. Do Edytora dodano obsługę większej liczby elementów HTML oraz niestandardowych schematów. Z kolei komponenty TimePicker i DateTimePicker obsługują teraz milisekundy jako część ich danych wejściowych i rozwijanych interfejsów.

Podsumowanie Kendo UI R1 2021

Zespół tworzący framework przygotował specjalne seminaria przedstawiające szczegółowo jego funkcje. Odbędzie się ono w czwartek 28 stycznia o godzinie 11:00 czasu wschodniego. Liczba miejsc jest ograniczona. Zapisy i więcej szczegółów na stronie telerik.com

Źródła: Kendo Angular, Kendo jQuery, Kendo React, Kendo Vue