Quoi de neuf dans Kendo UI avec R3 2019

La R3 2019 est arrivée et elle comporte plusieurs mises à jour dans l’interface utilisateur de Kendo, avec de nouveaux composants et des fonctionnalités très demandées, qui arrivent dans nos suites jQuery, Angular, React et Vue.

couvrez ici les grandes lignes de chaque bibliothèque et renvoyez à des articles plus détaillés couvrant chaque saveur plus en détail.

jQuery

Nouveaux composants

Nouveau composant: Timeline

Ce nouveau et unique composant de l'interface utilisateur fournit un moyen astucieux de présenter les événements qui se produisent sur une période donnée. Besoin de mettre en valeur les communiqués que votre équipe a réalisés au fil des ans? Peut-être une page d'histoire de votre entreprise? Le composant de la chronologie est idéal pour ce type de scénario.

Les événements contiennent des champs par défaut auxquels vous pouvez vous connecter, mais vous pouvez bien sûr fournir des modèles pour vous assurer que le contenu correspond aux conceptions souhaitées.

19659006] Avec le composant Card, les composants jQuery ajoutent un autre élément de présentation pour aider les développeurs à configurer des conceptions d'applications belles et modernes. Popularisé avec Bootstrap et Material Design, ce composant de présentation peut être utilisé seul ou en tant que partie d'un modèle pour d'autres composants tels que ListView afin de créer une expérience utilisateur fascinante.

Nouveau composant: Classement

loin, mais le nouveau composant jQuery Rating fournit un moyen simple de permettre à vos utilisateurs de saisir une évaluation ou une valeur particulière sur l’échelle dont vous avez besoin (1-5, 1-10 ou toute autre plage). Ce composant contient des icônes intégrées, mais vous pouvez également personnaliser des éléments pour fournir un modèle et vos propres icônes afin de garantir que le widget Notation s'insère dans le reste de votre application!

Nouveau composant: Filtre

Avec le nouveau filtre Composant vos utilisateurs finaux peuvent créer des expressions de filtre complexes avec une interface intuitive. Cette expression de filtre peut être directement liée aux composants de Kendo UI liés aux données tels que la grille, ou vous pouvez utiliser le composant en tant que widget autonome d'où vous extrayez des informations de filtre afin d'effectuer votre propre filtrage.

Composants existants

PDFViewer – Améliorations diverses

Le PDFViewer a fait l’objet de beaucoup d’attention depuis son lancement initial en mai. Sur la base des commentaires de nos clients, nous avons mis en œuvre certaines des fonctionnalités les plus demandées afin de garantir aux développeurs de tirer exactement parti de ce nouveau composant! Les nouvelles fonctionnalités comprennent les fonctionnalités de zoom et d’échelle ainsi que la possibilité de configurer des documents pour FitToWidth et FitToPage dans le document PDF ainsi Fonctionnalité d'impression intégrée .

DataSource – En-têtes de demande

L'élément de structure DataSource est vraiment le bourreau de travail de la plupart des composants de Kendo UI basés sur jQuery (du moins ceux qui sont databound). Une fonctionnalité manquante particulièrement importante pour les configurations de sécurité est la possibilité de configurer des en-têtes personnalisés avec vos demandes. Eh bien, avec la R3 2019, nous avons introduit la possibilité d’ajouter vos propres en-têtes personnalisés pour toute demande provenant de DataSource! Cela signifie que vous pouvez configurer quelque chose comme un en-tête Authorization lors de la lecture de votre serveur existant.

Grid – Panneau de recherche intégré

Bien que la grille de Kendo UI ait la capacité de filtrer et fournissez un modèle personnalisé pour la barre d’outils; jusqu’à présent, toute tentative de rechercher un champ de recherche sur l’ensemble de la grille était une affaire de code personnalisé. Bien que cela ait fonctionné, ce n’est pas aussi simple qu’une option de configuration. C’est pourquoi avec la R3 2019, nous avons introduit un panneau de recherche intégré pour la grille jQuery de Kendo UI.

Cette fonctionnalité peut être configuré pour définir un nombre quelconque de champs filtrés lors de la recherche d'un utilisateur. Cela signifie que le panneau de recherche peut être configuré pour filtrer sur un seul champ, voire sur tous les champs disponibles dans la grille.

Améliorations globales de l'accessibilité

L'accessibilité est une partie importante de l'un des composants de l'interface de Kendo et nous suivons. WCAG 2.1 (donc conforme à la section 508) et normes WAI-ARIA pour tous les composants. Cela étant dit, il y a toujours des améliorations à apporter! L’équipe de Kendo UI s’est penchée plus avant sur nos composants pour mettre en œuvre toute une série d’améliorations au niveau de l’accessibilité – toutes disponibles avec la R3 2019!

Pour plus d’informations

Pour consulter des images, des gifs et des informations plus détaillées Pour en savoir plus sur les composants jQuery les plus récents et les plus performants de la Kendo UI, consultez le Nouveautés de la publication Composants Kendo UI de jQuery pour R3 2019!

Angular

Prise en charge de Angular 8

Angular continue de livrons de nouvelles versions et notre équipe Kendo UI pour Angular suit de près. Au cours des derniers mois, la version officielle Angular 8.0.x est tombée et les derniers packages de Kendo UI pour Angular sont compatibles!

Bien sûr, je ne peux pas parler de Angular 8 sans parler de Ivy. Bien que le nouveau moteur de rendu du framework Angular ne soit pas encore le moteur par défaut (bien que les versions de prévisualisation commencent à suivre cette voie), nous travaillons fort pour que Kendo UI pour les composants Angular soit compatible avec Ivy. Gardez un œil sur les nouveautés sur ce front au cours des prochains mois!

Nouveaux composants

Nouveau composant: Tiroir

Les tiroirs sont aujourd'hui un standard de navigation dans les applications Web modernes. C'est un composant qui fonctionne bien pour les applications de bureau, les applications mobiles et, bien entendu, les applications Web réactives. C’est pourquoi nous sommes très heureux d’apporter cela à la suite de composants angulaires natifs offerts par Kendo UI! Le widget Tiroir angulaire fournit un tiroir standard doté de fonctionnalités d’agrandissement et de réduction, définissant des icônes et du texte pour chaque élément de navigation, ainsi que des fonctions telles que le mode mini permettant d’afficher uniquement les icônes de chaque élément afin de minimiser les effets réels. domaine occupé par le composant.

Nouveau composant: DateTimePicker & nbsp;

Le DateTimePicker combine deux de nos sélecteurs populaires, le DatePicker et le TimePicker, en un seul composant. Avec une seule entrée et une liste déroulante, vos utilisateurs peuvent désormais sélectionner à la fois une date et une heure!

Nouveau composant: ProgressBar

Un composant ProgressBar peut être très utile dans des scénarios comme des assistants, des indicateurs de chargement ou tout simplement montrez que quelque chose se produit dans votre application lorsque les utilisateurs interagissent avec votre interface utilisateur. Avec la R3 2019, l’équipe Kendo UI pour Angular a créé sa propre itération d’un ProgressBar pouvant être implémentée en tant que widget autonome ou étroitement liée aux autres composants angulaires natifs proposés par Kendo UI. Bien sûr, vous pouvez vous lier à une valeur constamment mise à jour ou définir manuellement la progression actuelle.

Nouvelles fonctionnalités des composants existants

Angular Scheduler est maintenant RTM!

Avec la R3 2019, nous sommes très heureux d'annoncer que la Kendo UI pour Angular Scheduler a abandonné sa balise bêta et est maintenant officiellement lancé en tant que RTM! Parallèlement aux améliorations sous-jacentes de la stabilité et aux mises à jour de l'API, nous avons ajouté des éléments à la navigation au clavier et à la conformité d'accessibilité avec cette nouvelle version.

Éditeur – Table de dialogue

dans l'éditeur de texte riche angulaire, nous avons ajouté l'outil Table de dialogue à son ensemble déjà riche de fonctionnalités. Il s'agit d'une étape importante et cruciale dans l'évolution de l'éditeur angulaire pour atteindre son stade RTM et l'interaction avec les tables est l'une des fonctionnalités les plus demandées à ce jour.

Grid – Header Aggregates

Avec la fonctionnalité de regroupement de n'importe quelle table de données, nous souhaitons souvent afficher des informations supplémentaires dans l'en-tête du groupe. Bien que nous ayons eu jusqu’à présent quelques fonctionnalités de modèles dans nos en-têtes, nous n’avions pas été en mesure de travailler avec des agrégats. Eh bien, avec la R3 2019, nous avons introduit la fonction Agrégats d'en-tête de groupe dans la grille angulaire! Cela vous donne accès à des calculs tels que compter et somme sur toutes les colonnes disponibles dans la grille.

Grille – Colonnes à redimensionnement automatique

Nous avons eu la possibilité Pour ajuster automatiquement les colonnes à leur contenu via notre API (voir cette section de la documentation relative à autoFitColuomns ), nous voulions prendre le temps nécessaire pour la R3 2019 et nous concentrer sur un moyen de faire en sorte que les colonnes de la grille adapter à leur contenu lors de la définition de votre grille d'une manière plus déclarative. Avec la dernière version du composant Angular Grid, cette fonctionnalité est désormais intégrée!

DropDowns – Virtualization

Nous avons taquiné cette fonctionnalité pendant un moment, mais nous sommes heureux de dire que les dernières itérations de l'interface de Kendo pour les menus déroulants angulaires ont une virtualisation intégrée! Nous avions cela en place depuis un moment, mais nous voulions souligner cette fonctionnalité cruciale, car elle avait été publiée entre la version R2 et la R3 2019.

Barre d'outils – Barre d'outils réactifs

Une barre d'outils peut être utilisée dans de nombreux scénarios différents. , y compris les implémentations autonomes et intégrées à d’autres composants (comme les outils présentés dans l’éditeur angulaire). Un élément crucial d’un tel composant est de pouvoir s’intégrer dans l’immobilier existant qui lui est alloué, ce qui implique notamment de s’assurer que la barre d’outils peut être réactive. Avec la R3 2019, nous avons introduit la fonctionnalité responsive de la barre d’outils qui permet aux outils listés de ne plus être listés horizontalement mais de tomber dans un menu déroulant, réduisant ainsi une longue liste d’objets dans l’écran d’affichage d’un seul élément. 19659051] Pour plus d'informations

Pour consulter des images, des gifs et des informations plus détaillées sur les nouveautés de Kendo UI pour la sortie angulaire, rendez-vous sur la page . Nouveautés de Kendo UI Angular Components pour R3 2019 article de blog!

Réagissez

Nouveaux composants

Nouveau composant: Planificateur

L’équipe de KendoReact a travaillé dur pour créer des composants natifs de React afin de créer la bibliothèque de composants d’interface utilisateur la plus avancée pour React. Dans le cadre de cet effort, nous avons travaillé d'arrache-pied au développement de l'un des composants les plus demandés: le Scheduler .

Avec la R3 2019, les développeurs de React peuvent tirer parti d'une interface similaire à celle de Google Calendar ou. fonction de calendrier dans Outlook en important le planificateur KendoReact!

Cette version initiale contient une liste assez importante de fonctions, notamment:

• Création, mise à jour et suppression d'événements
• Déplacement d'événements avec le glisser-déplacer dans le calendrier [19659060] Modification de la longueur des événements en les redimensionnant
• Modification des événements en cliquant sur l’événement pour plus de détails
• Prise en charge intégrée de la récurrence
• Gestion des ressources

Il y a beaucoup à dire sur ce composant nous vous recommandons donc de lire davantage à ce sujet dans l'article de blog spécifique à React, dont le lien est ci-dessous.

Nouveau composant: TreeList

Semblable au planificateur, un autre composant important avec lequel nous avons travaillé dur est le nouveau TreeList . Cela combine la structure hiérarchique d'un TreeView avec la structure en colonne du composant Grid. Il contient déjà plusieurs fonctionnalités critiques pour de nombreux composants, telles que:

• Filtrage
• Tri
• Sélection de lignes
• Modification (en ligne, en cellule ou formulaire)

Il y a plus à voir ici, mais pour cela, je vous recommande de vous rendre au billet de blog en profondeur de React, lié à la fin de cette section

Nouveaux composants: ColorPicker, ColorGradient & amp; ColorPalette

Bien que ColorPalette ColorGradient et ColorPicker soient tous des composants distincts, ils sont très liés entre eux.

Le widget ColorPalette autorise les utilisateurs. sélectionner des couleurs dans une palette prédéterminée représentant des valeurs avec des blocs simples.

Le ColorGradient permet la sélection des couleurs en offrant un dégradé avec réticule pour sélectionner une couleur préférée.

Avec le ColorPicker Les deux composants ci-dessus sont rassemblés dans un menu déroulant (pour vous aider à économiser de l'argent à l'écran) et peuvent être configurés pour offrir l'un des composants ci-dessus, ou les deux, comme moyen de sélectionner une couleur particulière.

Nouveau Composant: Pager

Le composant Pager est intégré à la grille KendoReact depuis un certain temps déjà, mais nous souhaitions l’offrir en tant que composant autonome au développeur utilisant KendoReact! Le Pager offre un moyen intuitif de parcourir des données et donne aux utilisateurs le moyen de personnaliser leurs vues (nombre d'éléments par page, etc.). Il est livré avec diverses options de configuration permettant de personnaliser l'aspect et la convivialité du composant. well.

Nouvelles fonctionnalités des composants existants

Grille – Bas de page

Les tableaux de données doivent souvent afficher des informations supplémentaires sur leur ensemble de données en dehors du rendu réel desdites données en lignes et en colonnes. Des éléments tels que les en-têtes, les colonnes simples ou multiples, les en-têtes de groupe et d'autres éléments sont certainement utiles, mais parfois, des informations globales sont également nécessaires. C'est pourquoi avec la R3 2019, nous avons introduit la fonctionnalité footer row dans la grille KendoReact afin de fournir une zone dans laquelle vous pouvez utiliser des agrégats colonne par colonne. Bien sûr, vous pouvez entièrement prendre en charge le rendu et fournir votre propre personnalisation pouvant prendre toute une ligne si vous en avez besoin!

Méthodes de cycle de vie obsolètes supprimées

Dans le cadre de notre engagement à être compatible avec les dernières et le meilleur en ce qui concerne le cadre React, l'équipe KendoReact a passé du temps à supprimer les méthodes de cycle de vie obsolètes de tous nos composants React. Vous avez peut-être remarqué que des messages d'avertissement apparaissent sur votre console lorsque vous utilisez les composants dotés de la dernière version de React. Bien qu'ils fonctionnent tous même avec ces avertissements, ces messages devraient appartenir au passé avec les mises à jour que nous avons effectuées! Il y a peut-être un composant ici ou là qui affiche toujours le message, mais ce problème sera résolu dans les prochaines semaines pour disparaître complètement de la bibliothèque entière.

Pour plus d'informations

Pour consulter des images, des gifs, etc. Des informations détaillées sur les nouveautés introduites par la version de KendoReact dans le Nouveautés de KendoReact dans le billet de blog R3 2019

Vue.js

Mises à jour sur Vue.js Components

Sur Depuis le site Vue.js, nous avons effectué des travaux sous le capot avec la grille native ainsi que des références mises à jour avec les composants encapsulés dans jQuery afin de s’assurer que les correctifs de stabilité sont fournis dans ces composants existants. Cependant, les nouveaux composants publiés ne sont pas encore intégrés à Vue.js, car nous souhaitons concentrer notre attention sur les composants natifs à l'avenir, éliminant ainsi la nécessité de commencer à envelopper les composants.

En parlant de composants plus natifs pour Vue.js – nous avons entendu les commentaires des développeurs, qu'ils soient nouveaux ou existants, et nous savons que vous choppez de plein fouet pour plus de composants d'interface utilisateur natifs pour Vue! Bien que la R3 2019 n’apporte aucun nouveau composant, il convient de noter que les prochains mois et la future feuille de route incluront davantage de composants natifs pour la suite Vue.js. Ne perdez donc pas de vue ce qui se passera dans les semaines à venir. come!

Feedback

C'est beaucoup de contenu pour un seul poste, même si j'ai lié à des articles de blog plus spécifiques avec même plus pour chaque bibliothèque JavaScript / framework nous supportons! Tous ces composants et fonctionnalités ont été demandés par nos utilisateurs. Si vous avez un nouveau composant ou une nouvelle fonctionnalité dans un composant existant qui vous manque, faites-le nous savoir! Il est fort probable que la version à venir soit publiée (peut-être même en R1 2020!?), Alors rendez-vous sur nos portails de commentaires et soumettez vos idées ou vos commentaires sur ceux qui existent déjà.

• jQuery Feedback Portal [19659060] Portail de rétroaction angulaire
• Portail de réaction Réaction
• Vue.js Portail de rétroaction

Inscrivez-vous à notre Webinar en direct R3 2019

Le Kendo L’équipe de l’interface utilisateur organise un webinaire en direct le 8 octobre qui couvrira tout ce qui est mentionné dans ce billet de blog couvrant jQuery, Angular et React. Il y a des sections dédiées à chaque technologie, et nous partons du 8 octobre de 11h00 à 12h30 HE! Pour une plongée complète dans chaque section, ainsi que pour la possibilité de décrocher l'un des sièges limités, rendez-vous sur notre page Webinar dédiée pour vous inscrire.

Source link