Kendo UI et Telerik UI Web, mise à jour d'octobre des composants .NET MAUI

Dans cet article de blog récapitulatif, nous couvrons ce sur quoi les équipes Kendo UI et Telerik UI Web Components ont travaillé au cours des deux dernières semaines. Cette mise à jour apporte de nouveaux composants à l'interface utilisateur Telerik pour Blazor et .NET MAUI, l'interface utilisateur Kendo pour Vue, ainsi que de nouvelles fonctionnalités et des améliorations de la qualité de vie dans l'interface utilisateur Kendo pour Angular.

Les équipes derrière votre interface utilisateur Kendo ou Telerik Web UI préférée. bibliothèque de composants sont toujours à pied d'œuvre pour fournir de nouveaux composants, fonctionnalités et outils que nous savons que les développeurs adoreront utiliser. Habituellement, nous faisons un ensemble d'annonces autour de chacune des grandes versions majeures tout au long de l'année avec R1, R2 et R3.

Plutôt que de faire attendre tout le monde pendant quelques mois, dans le billet de blog d'aujourd'hui, je veux prendre le temps de souligner certains des fonctionnalités et des composants sur lesquels les équipes ont travaillé au cours des deux dernières semaines ! Cela ne couvrira pas tous les produits Web, seulement ceux qui ont récemment poussé une mise à jour dont vous pouvez profiter. Donc, si vous ne voyez pas votre produit préféré dans la liste ci-dessous, ne vous inquiétez pas, d'autres mises à jour seront à venir !

Table des matières

1. Telerik REPLs
2. Telerik UI for Blazor
3. Telerik UI for . NET MAUI
4. Kendo UI pour Angular
5. Kendo UI pour Vue

Telerik REPLs

Pour lancer cette mise à jour d'octobre, nous sommes ravis de partager les nouvelles de deux nouveaux terrains de jeux interactifs basés sur un navigateur— Progress Telerik REPL pour ASP.NET Core et Telerik REPL pour Blazor . Les coureurs REPL (Read-Eval-Print Loop) ne nécessitent aucune installation et vous pouvez commencer à coder tout de suite. Vous pouvez écrire, exécuter et partager vos extraits de code avec des collègues, ainsi que publier des questions-réponses dans les forums de développeurs, les réseaux sociaux ou les e-mails. Vous avez également la possibilité de partager un extrait de code directement depuis votre IDE – Visual Studio ou Visual Studio Code – directement vers un REPL.

Les REPL Telerik s'intègrent de manière transparente avec l'interface utilisateur Telerik pour Blazor et l'interface utilisateur pour ASP.NET Core et vous permettent d'interagir avec les composants de l'interface utilisateur pour le cadre respectif sans aucune configuration nécessaire. Vous pouvez appliquer différents styles avec l'un des thèmes et échantillons prêts à l'emploi disponibles. .

Interface utilisateur Telerik pour Blazor

Interface utilisateur Telerik pour la version Blazor 2.28

Avec cette mise à jour d'octobre, je suis ravi de partager que l'interface utilisateur Telerik pour Blazor vient d'avoir 90 ans ! Oui, cette bibliothèque d'interface utilisateur Blazor vraiment native comprend désormais plus de 90 composants Blazor natifs et nous passerons la prochaine partie de cet article de blog à couvrir les nouveautés de l'interface utilisateur Telerik pour Blazor 2.28.

Nouveau composant de graphique Blazor Heatmap

Le nouveau Le composant d'interface utilisateur Heatmap Chart vous permettra de visualiser des données bidimensionnelles dans une amplitude de couleurs. Une Heatmap est essentiellement une structure en grille avec des cellules correspondant à un axe X et un axe Y. La valeur de chaque cellule décide de la couleur à remplir, avec une gradation de teintes allant du blanc à une couleur totalement remplie et tout le reste. Certaines des fonctionnalités du nouveau composant Heatmap sont :

• Visualisation des valeurs de données sous différentes formes
• Utilisation de différentes échelles de couleurs
• Ajout d'info-bulles qui vous permettent d'afficher des informations supplémentaires
• Choix parmi une variété de fonctions intégrées et des thèmes et échantillons personnalisés.

Nouveau composant ColorGradient

Le nouveau composant Blazor Color Gradient permet vous pouvez choisir une couleur dans un dégradé de manière simple et flexible. Les utilisateurs peuvent soit faire glisser une indication pour choisir la couleur primaire, révélant ses valeurs HEX et RVB équivalentes, soit entrer les valeurs directement dans les entrées HEX et RVB. En plus de les nombreuses options de configuration pour l'opacité et les différents formats, vous pouvez également profiter de la navigation et de l'accessibilité du clavier intégré.

Nouveau composant FlatColorPicker

Le nouveau Composant Telerik Blazor FlatColorPicker est un puissant outil d'édition de couleurs qui vous permet d'appliquer différentes personnalisations via ses vues Palette et Dégradé. Le composant a un en-tête et un pied de page affichant divers boutons pour basculer entre les vues, appliquer ou annuler des modifications, prévisualiser ou revenir en arrière, etc. Vous pouvez facilement les personnaliser et afficher du contenu personnalisé à l'aide des modèles disponibles.

Nouveau composant ColorPicker

Le nouveau Telerik Blazor ColorPicker est un puissant composant d'édition des couleurs qui s'affiche dans une fenêtre contextuelle et vous permet de basculer entre deux vues différentes : Palette et Dégradé. La vue Palette vous permet de choisir la couleur préférée parmi un ensemble prédéfini de couleurs , tandis que la vue Dégradé vous permet de choisir la couleur souhaitée soit en la sélectionnant sur la vue, soit en la saisissant précisément au format RVB ou HEX. Vous pouvez personnaliser le composant à votre guise en affichant/masquant ses boutons d'action et en modifiant son en-tête, pied de page et l'icône du bouton divisé.

Nouveau composant de code QR Blazor

La nouvelle Telerik UI pour le composant Blazor QR Code est une étiquette lisible par machine qui contient des données pour un localisateur, un identifiant ou un tracker, dirigeant les utilisateurs vers un site Web ou une application lorsqu'ils sont numérisés avec n'importe quel appareil intelligent. Vous pouvez personnaliser le composant de différentes manières en y affichant vos propres logos et images personnalisés. Vous pouvez configurer davantage sa taille, sa largeur, son remplissage, ses bordures, ses niveaux de correction d'erreur, ses couleurs et les paramètres de superposition du code QR.

En plus des personnalisations, vous pouvez également encoder plusieurs formats de données tels que les URL, les numéros de téléphone, adresses e-mail, coordonnées et géolocalisations. Le composant prend également en charge la génération de codes QR suisses.

Data Grid & TreeList Enhancements

Adapter la largeur de la colonne au contenu
Vous avez désormais un contrôle total sur le dimensionnement des colonnes lors du rendu des grilles de données et des listes d'arbres. Avec la version actuelle, nous avons exposé trois nouvelles méthodes qui vous permettent de redimensionner la largeur des colonnes pour s'adapter au contenu , à savoir :

• AutoFitColumn(string id) : redimensionne une seule colonne en fonction de l'ID
• AutoFitColumns(IEnumerable ids) : redimensionne les colonnes en fonction de l'identifiant ou de la collection en tant que paramètre
• AutoFitAllColumns() : redimensionne toutes les grilles de données colonnes

Déclencher OnEdit, OnUpdate, OnCancel sur chaque cellule dans Incell EditMode
InCell EditMode des composants Grid et TreeList déclenche désormais des événements CRUD o n chaque cellule ainsi que de les déclencher par ligne, ce qui vous permet de décider vous-même si vous souhaitez mettre à jour le modèle de manière conditionnelle ou pour chaque champ. champ de saisie et fournissez des descriptions pour les parties de format pour plusieurs composants DateInputs. Par exemple, vous pouvez spécifier si la saisie du mois est demandée sous la forme « mois » ou « MM » en choisissant entre un affichage large, étroit, court et direct de la section de format. Les espaces réservés de format sont pris en charge pour les composants suivants :

Visual Studio & Visual Studio Code Enhancement

Configuration des thèmes et des nuances
Les assistants Créer un nouveau projet pour Visual Studio et Code Visual Studio offrent désormais l'option de configuration des thèmes et des nuances.Vous pouvez désormais styliser votre projet à ce moment-là de sa création et configurer à la fois le thème et les nuances spécifiques dans l'assistant en un clic.

Nouveau modèle de tableau de bord administrateur
Un tout nouveau modèle de projet de tableau de bord administrateur a été ajouté aux modèles disponibles dans les deux Create New Project Wizards for Visual Studio et Visual Studio Code. À l'aide du modèle de projet Admin Dashboard, vous pouvez facilement démarrer un projet avec le pré-bui Disposition et fonctionnalité : réorganisez la disposition selon vos besoins, branchez simplement vos données et liez-les aux composants, notamment la grille, la disposition en mosaïque, le tiroir, le calendrier, le formulaire, divers types de graphiques, la carte, etc.

Compatibilité avec .NET 6 Release Candidate 2

La version 2.28 de l'interface utilisateur Telerik pour Blazor est compatible avec la nouvelle version .NET 6 Release Candidate 2 et le modèle d'applications hybrides via les contrôles Microsoft BlazorWebView pour WPF, WinForms et MAUI. Cela vous permet d'intégrer la fonctionnalité Blazor et l'un des 90+ composants Telerik Blazor dans les applications de bureau Windows existantes basées sur .NET 6. Découvrez un exemple de référentiel qui présente des scénarios hybrides.

En attendant novembre avec impatience. lorsque nous visons à fournir un support officiel pour .NET 6 peu de temps après sa sortie par Microsoft.

Telerik UI pour .NET MAUI

Avec cette version d'octobre, nous sommes ravis d'annoncer que tous nos contrôles prennent désormais en charge . Aperçu NET MAUI 9 . De plus, nous ajoutons huit nouveaux composants à notre bibliothèque en pleine croissance Telerik UI for .NET MAUI !

Pickers

Composants DatePicker et TimePicker
Certains des nouveaux ajouts à l'interface utilisateur Telerik pour la famille .NET MAUI sont DatePicker et TimePicker contrôles. Ces sélecteurs sont visualisés dans une fenêtre contextuelle et fournissent un moyen pratique pour les utilisateurs de votre application .NET MAUI de sélectionner une date ou une heure.

Les composants peuvent vous faciliter la vie en fournissant des fonctionnalités intéressantes telles que Plage de dates[1 9459042]/Plage de temps. Ces propriétés vous permettent de définir une date ou une plage horaire lors de la définition de la date/heure minimale et maximale et de choisir une valeur intermédiaire. Les composants fournissent également une API de style flexible et une prise en charge des commandes.

ListPicker
Telerik ListPicker pour .NET MAUI est visualisé dans une fenêtre contextuelle et vous permet de sélectionner un élément dans une liste de éléments.

Le contrôle fournit un moyen simple de boucler ses éléments à l'infini lors du défilement. En outre, vous pouvez entièrement personnaliser l'apparence de la boîte de dialogue styliser les éléments de la liste et définir des modèles pour les éléments et pour celui sélectionné.

TimeSpanPicker
Si vous voulez un moyen simple de sélectionner une durée, alors le TimeSpanPicker pour .NET MAUI est fait pour vous.

Voici quelques-unes des fonctionnalités clés du contrôle :

• Spinner Format : utilisez soit un o standard r format de période personnalisé. En fonction du format défini, le sélecteur visualise les contrôles de la flèche avec des valeurs préremplies à sélectionner.
• DisplayString Format : vous pouvez choisir le texte à afficher lorsqu'un intervalle de temps est sélectionné.
• Modèles : TimeSpanPicker fournit des modèles pour son en-tête et son pied de page. En outre, nous avons exposé des modèles pour l'espace réservé du sélecteur et le texte d'affichage.
• Plage de temps : définissez une plage de temps en définissant des valeurs de temps minimum et maximum, afin que l'utilisateur puisse choisir un temps entre les deux.[19659020]Sélection de l'intervalle de temps : vous pouvez définir un intervalle de temps actuellement sélectionné pour le TimeSpanPicker ou définir un intervalle de temps en surbrillance par défaut.
• Pas de temps incrémentiel : modifier les pas de valeurs d'intervalle de temps par défaut. pour le jour, l'heure, la minute et la seconde.

TemplatedPicker
Si les sélecteurs ci-dessus ne correspondent pas à votre scénario d'application .NET MAUI, alors le TemplatedPicker vient sauver la journée ! Il s'agit d'un contrôle entièrement personnalisable qui vous permet de créer un sélecteur personnalisé en fonction du scénario que vous souhaitez réaliser.

Vous pouvez placer n'importe quelle liste d'éléments dans la fenêtre contextuelle parmi laquelle l'utilisateur peut choisir et afficher la valeur sélectionnée dans un format défini.

MaskedEntry

Le nouveau MaskedEntry permet aux utilisateurs de formater et de contraindre le texte à un modèle prédéfini ou un modèle qu'ils définissent. Le composant fournit une validation d'entrée et des masques prédéfinis, tels que Text, Regex, IP, Email et Numeric.

Vous pouvez trouver ci-dessous tous les contrôles/masques prédéfinis/pris en charge ainsi que des informations sur chacun d'entre eux :[19659019]Text : RadTextMaskedEntry est utilisé pour gérer les entrées utilisateur standard (alphanumériques). La valeur résultante est l'objet String.

En plus de l'ensemble d'outils intégré des contrôles de masque, il expose également des événements pratiques qui vous permettent de réaliser n'importe quel scénario. Pour plus de détails, consultez notre documentation produit sur MaskedEntry.

BusyIndicator

Le Telerik BusyIndicator for .NET MAUI vous permet d'afficher une notification chaque fois qu'un processus de longue durée est géré par l'application. Cela rend l'interface utilisateur plus informative et l'expérience utilisateur plus fluide.

Il est livré avec un ensemble d'animations intégrées et la prise en charge de la définition de contenu personnalisé. Vous trouverez plus d'informations à ce sujet dans la section BusyIndicator de notre documentation d'aide.

Rating

Telerik Rating for .NET MAUI est un composant d'interface utilisateur qui permet aux utilisateurs de sélectionner intuitivement une valeur nombre prédéfini d'éléments.

En plus des formes de notation prédéfinies, d'autres Les principales caractéristiques du contrôle sont :

• Prise en charge des modèles d'éléments personnalisés
• Mode lecture seule
• La possibilité de personnaliser les formes

Kendo UI for Angular

Angular Editor Enhancements

Editor Redimensionnement
Avec cette dernière mise à jour, l'interface utilisateur de Kendo pour l'éditeur angulaire a reçu la possibilité pour les utilisateurs finaux de redimensionner librement l'éditeur angulaire une fois qu'il a été rendu sur une page. Cela peut aider les utilisateurs finaux à ajuster la taille ou la taille de l'éditeur lorsqu'ils utilisent le composant pour éditer du texte enrichi. Grâce aux options de configuration disponibles, le redimensionnement disponible peut être limité pour aider à maintenir l'éditeur contenu à une certaine taille maximale, ou vous pouvez laisser les capacités de redimensionnement être illimitées et permettre à l'utilisateur de redimensionner à sa guise.

Obtenir le texte sélectionné
Une amélioration de la qualité de vie qui a été ajoutée avec cette mise à jour est pour l'éditeur angulaire est le champ selectionText  qui peut être utilisé pour extraire tout texte sélectionné par l'utilisateur. Cela simplifie les scénarios dans lesquels le texte sélectionné de l'éditeur met à jour d'autres composants, ou les développeurs doivent extraire le texte sélectionné pour modification ou utilisation ultérieure ailleurs .

Appliquer les commandes aux mots
Cette fonctionnalité spécifique est une qualité de -amélioration de la vie t qui peut être activé ou désactivé en fonction des préférences de l'utilisateur. Plus précisément, cette nouvelle fonctionnalité aborde la manière d'aborder l'application de commandes à des mots ou à des blocs de texte dans l'éditeur angulaire en fonction de la sélection.

Avant cette mise à jour, si un utilisateur cliquait dans un seul mot dans l'éditeur zone de contenu mais n'a sélectionné aucun texte, donc le curseur était juste assis entre deux caractères, puis a utilisé le bouton Gras de la barre d'outils, rien ne se passerait. La "commande" de mettre en gras quelque chose ne fonctionnerait qu'en fonction de la sélection.

Avec cette nouvelle mise à jour, une nouvelle configuration permet de modifier ce comportement. Au lieu de ne pas mettre le mot du tout en gras, le mot actuel au milieu duquel se trouve le curseur sera désormais mis en gras. Cela peut sembler être un petit changement de comportement, mais c'est une fonctionnalité que de nombreux utilisateurs finaux de l'éditeur ont demandée, nous sommes donc très heureux de la proposer au grand public dès aujourd'hui. ]Classes et attributs CSS personnalisés lors de l'ouverture via le service Cette fonctionnalité est utilisée lorsque les développeurs doivent utiliser un service angulaire afin de créer dynamiquement une instance de dialogue. Avec cette mise à jour, les développeurs peuvent désormais appliquer des classes CSS et des attributs HTML personnalisés via les propriétés cssClass et htmlAttributes.

Prise en charge RTL lors de l'ouverture via un service
De la même manière que ci-dessus, lors de l'utilisation du composant Kendo UI pour Angular Dialog via DialogService et Angular Services, les développeurs peuvent également spécifiez que la  Angular Dialog doit être affichée de droite à gauche. Cela peut être fait via la propriété htmlAttributes où nous proposons un champ dir qui peut être défini sur rtl.

Améliorations de la fenêtre angulaire

Classes et attributs CSS personnalisés lors de l'ouverture via un service
Tout comme avec la boîte de dialogue Angular, le Kendo UI pour le composant Angular Window  recevoir également ed la possibilité de définir des classes CSS personnalisées et des attributs HTML lors de l'utilisation de la fonctionnalité WindowService pour créer des instances de la fenêtre angulaire de manière dynamique. via WindowService"/>

Prise en charge RTL lors de l'ouverture via le service
La fenêtre angulaire a également reçu la possibilité de rendre le composant et son contenu en mode RTL (droite à gauche) lors de l'utilisation l'approche WindowService pour afficher Windows. Ceci est également exposé via la propriété htmlAttributes où RTL peut être activé en définissant le champ dir de manière appropriée.

Angular PanelBar Updated Design

Kendo UI for Angular n'est qu'un produit sur neuf au total qui partagent un rendu commun. Au fur et à mesure que chacun de nos produits se développe de manière organique en fonction des commentaires des clients, il peut y avoir des fonctionnalités ou des ajustements ajoutés à partir d'une bibliothèque qui affectent les autres, ou nous pouvons faire évoluer l'apparence du composant au fil du temps. Dans le cadre de cela, nous avons récemment effectué une mise à jour rapide de la conception du composant Angular PanelBarunifiant l'apparence avec le reste des bibliothèques d'interface utilisateur qui partagent des thèmes.

Ces modifications sont principalement apportées. sous la forme d'un rendu HTML mis à jour et de classes appliquées sous le capot, il n'y a donc pas de grands changements d'interface utilisateur que l'on puisse repérer à l'œil nu. La seule grande différence réside dans les flèches d'expansion et de réduction modifiées, qui sont désormais une flèche en chevron par rapport à un triangle rempli.

Nouveau composant de barre d'outils Vue

Le nouveau Kendo UI pour le composant de barre d'outils Vue s'appuie sur la liste déjà croissante de composants d'interface utilisateur natifs pour Vue afin de fournir un élément graphique pour la tenue et l'organisation de divers éléments de bouton. Généralement, cela se trouve en haut de nos composants d'éditeur de texte enrichi, mais cela peut également être utilisé comme un composant autonome. />

Nouveau composant Vue SplitButton

En étendant les types de boutons disponibles, avec cette mise à jour, nous avons ajouté le UI Kendo pour le composant Vue SplitButton. Ce bouton, comme son nom l'indique, est divisé entre un bouton normal qui offre un comportement par défaut lorsqu'on clique dessus, ainsi qu'une flèche sur laquelle on peut cliquer pour afficher une liste déroulante, qui fournira une liste d'actions prédéfinies supplémentaires dans une liste.

Nouveau composant Vue DropDownButton

Le Kendo UI pour le composant Vue DropDownButton est un bouton qui, lorsqu'il est cliqué, affiche une liste déroulante d'éléments d'action parmi lesquels l'utilisateur peut sélectionner.Le bouton Vue peut utiliser du texte, des icônes ou un mélange des deux lors de la définition de l'apparence de l'élément de bouton.

Avec cette mise à jour, nous avons ajouté le nouveau Kendo UI for Vue Menu component—un composant à plusieurs niveaux destiné à afficher des options hiérarchiques dans une interface de menus. Ce composant est souvent utilisé comme menu contextuel pour d'autres composants Kendo UI pour Vue UI, mais peut bien fonctionner seul pour les scénarios qui nécessitent une navigation dans les menus similaire à celle des applications de bureau ou des menus qui apparaissent sur les éléments de la barre des tâches des principaux systèmes d'exploitation.

Nouveau composant de filtre Vue

Offrir aux utilisateurs la possibilité de filtrer les données peut être difficile à réaliser à partir d'une expérience utilisateur perspective. Au-delà d'un simple champ de recherche, la conception peut rapidement devenir lourde à utiliser et à comprendre. C'est là que le nouveau composant Kendo UI for Vue Filter brille vraiment. Ce composant permet aux utilisateurs finaux de créer des éléments complexes et détaillés. filtrer les expressions pour filtrer les données sous-jacentes vers un ensemble d'éléments très spécifique.Ces expressions peuvent être extraites seules ou combinées avec d'autres composants Kendo UI pour Vue UI comme la grille de données pour fournir un fichier plus détaillé ter des composants.

Étiquettes pour toutes les entrées et sélecteurs

Une amélioration que nous avons ajoutée à toutes les interfaces utilisateur Kendo pour les composants Vue Input et Picker est la nouvelle propriété label. Cela a été ajouté pour faciliter l'attribution d'une étiquette flottante à chaque composant en configurant simplement la propriété label pour afficher l'étiquette appropriée. Auparavant, cela nécessitait un peu de travail supplémentaire pour envelopper le composant applicable avec un composant FloatingLabel. Maintenant, tout ce qui est nécessaire est de passer une chaîne à une seule propriété et vous êtes prêt à partir. faites-en plus alors que nous poursuivons notre travail vers la R1 2022. Toutes nos équipes d'ingénieurs travaillent d'arrache-pied pour fournir de nouvelles fonctionnalités, composants et bien sûr des corrections de bugs tout au long de ce cycle de publication, il y aura donc plus à partager dans quelques semaines. Si un produit que vous utilisez activement aujourd'hui est manquant ici, ne vous inquiétez pas, il fera très probablement partie de la prochaine mise à jour ! Si vous avez trouvé ce type de mise à jour utile, faites-le nous savoir dans les commentaires ci-dessous. A la prochaine !