Fermer

avril 9, 2019

L'interface utilisateur de Telerik pour Blazor 0.4.0 vient de paraître


L'interface utilisateur de Telerik pour Blazor vient de publier sa version 0.4.0, qui inclut davantage de composants et de fonctionnalités pour les composants existants! Lisez la suite pour voir ce qu'il y a de neuf.

L'interface utilisateur de Telerik pour Blazor évolue rapidement avec de nouveaux composants et fonctionnalités qui sortent des presses dès que nous les avons prêtes. Toute croissance rapide s'accompagne parfois de problèmes de croissance, ce qui dans ce cas-ci représente un changement radical avec la sortie de UI for Blazor que j'annonce aujourd'hui.

Continuez à lire pour découvrir les nouveautés de l'interface utilisateur Telerik pour Blazor 0.4.0!

Briser les changements

Il n'est jamais facile de discuter de la rupture changements, mais je tiens à noter ce que les changements pour 0.4.0 sont aussi bien que pourquoi nous sommes allés dans cette direction. Nous ne prenons pas les changements de rupture à la légère, même avec des produits en développement précoce, mais nous pensons que c'est un changement nécessaire au succès continu de UI for Blazor, c'est pourquoi nous allons dans cette direction.

Premièrement, le changement réel: nous passons des espaces de noms de à Kendo.Blazor à à Telerik.Blazor . Cela signifie que toute utilisation que vous voyez de Kendo dans vos projets actuels sera remplacée par Telerik .

Comme exemple de notre grille extraite de nos documents, voici l'ancienne méthode. avec 0.3.x:

 @using Kendo.Blazor


    
        
        
    


 @functions {
    public IEnumerable  MyData = Enumerable.Range (1, 50) .Select (x => nouveau {ID = x, TheName = "nom" + x});
}

Voici la même déclaration, mais avec le nouvel espace de noms:

 @using Telerik.Blazor


	
		
		
	


 @functions {
public IEnumerable  MyData = Enumerable.Range (1, 50) .Select (x => nouveau {ID = x, TheName = "nom" + x});
}

Globalement, l'API finit par être assez similaire, mais notez que utilise Telerik.Blazor et toutes les balises qui ont changé.

Pourquoi ce changement est-il en train de se produire?

Il y a plusieurs raisons pour lesquelles nous allons de l'avant avec ce changement, mais je vais me concentrer sur le plus important pour cet article de blog afin de ne pas vous ennuyer: l'utilisation du nom Kendo UI est source de confusion pour les gens.

En particulier, beaucoup des conversations que nous avons eues autour de l'interface utilisateur Telerik pour Blazor portent sur le fait que ces composants ne sont que des enveloppes autour des composants jQuery de l'interface Kendo UI. L’interface utilisateur de Telerik pour Blazor est construite à 100% à partir de la base afin d’assurer une intégration profonde avec le cadre Blazor lui-même. Donc, pour éviter cette confusion et remettre les pendules à l'heure, nous nous éloignons du nom de Kendo pour adopter plutôt Telerik, un nom très familier de quiconque dans le monde .NET (au moins pour vous, le lecteur, puisque vous êtes sur Telerik blog ?).

Ainsi, pour que nous puissions transmettre cela plus facilement aux nouveaux utilisateurs et aux utilisateurs existants, nous avons avancé avec ce changement d’espace de nommage pour la version 0.4.0.

Nous comprenons qu’il s’agit peut-être d’un peu un mal de tête pour les gens, surtout si votre projet Blazor actuel est plus grand. Cependant, nous pensons qu'il s'agit d'un changement nécessaire et qu'il est généralement préférable de le faire maintenant, pendant que le produit en est à ses débuts et qu'il est prévisualisé plutôt que plus tard dans la vie du produit.

Il convient de noter ici que le CSS et le rendu sera toujours le même pour l'interface utilisateur Telerik pour les composants Blazor. Toutes les modifications que vous avez apportées au style ou la possibilité de partager un dessin à travers les projets jQuery / React / Angular / Vue et Blazor sont toujours très valables.

Petite note sur Interops

Je tiens à souligner que vous verrez un fichier JavaScript mentionné dans certains de nos articles, à savoir telerik-blazor.js . Ce n'est en aucun cas une indication d'une tendance à passer à une implémentation plus conviviale de Telerik UI pour Blazor, mais nous avons compris que nous devions inclure à ce stade certaines fonctionnalités pour que notre components ce qu'ils sont.

Ceci est juste une ressource JS qui a quelques fonctions d'interopérabilité pour aider à fournir une navigation au clavier dans les éléments d'entrée, ainsi que le rendu SVG et canvas que nous utilisons pour nos graphiques.

Nouveaux composants et fonctionnalités

Passons maintenant à tous les trucs amusants! Nous avons un ensemble de nouveaux composants prêts à fonctionner, ainsi que de nouvelles fonctionnalités pour les composants existants, jetons donc un coup d'œil à la nouveauté de la version 0.4.0 Intéressons-nous d'abord aux nouveaux composants.

Calendrier [19659007]  Interface utilisateur Telerik pour le composant Blazor Calendar présentant un mois complet

Le nom l'indique, mais le composant Calendrier est tout simplement un calendrier que vous pouvez ajouter à n'importe quelle page! Ceci est complètement autonome et offre aux utilisateurs la possibilité de naviguer dans le calendrier pour choisir leur date de préférence. La sélection intervient à la fois en un ou plusieurs jours et vous pouvez empêcher certaines dates d'être sélectionnées en les définissant comme désactivées.

Pour une plongée plus en profondeur dans le calendrier, y compris l'API réelle, passez à . documentation du composant Calendrier .

Carte

 Interface utilisateur Telerik pour Blazor Composant Carte affichant quelques séries de lignes

C’est un gros problème! Avec la version 0.4.0, nous publions notre bibliothèque de graphiques pour Blazor! Ceci est déjà prêt à sortir avec quelques types de séries et de graphiques, à savoir:

  • Graphique en secteurs
  • Graphique à barres
  • Graphique à colonnes
  • Graphique en anneau
  • Graphique en courbes
  • Graphique en secteurs

Cela prend également en charge une tonne de fonctionnalités, y compris les modèles d'étiquette de multiples axes la série d'empilement de séries multiples et plus encore! Honnêtement, il y a beaucoup à apprendre, alors consultez la documentation du composant Interface utilisateur Telerik pour Blazor Chart pour connaître toutes les fonctionnalités et savoir comment utiliser ce composant d'interface utilisateur aujourd'hui.

DateInput

[1965 Interface utilisateur Telerik pour le composant DateInput de Blazor avec un masque mois jour année

Le composant DateInput étend la liste des éléments de formulaire disponibles en fournissant un widget de saisie fournissant un masque de date prédéfini. Vous pouvez personnaliser la mise en forme, définir un espace réservé et bien sûr tenir compte de la valeur de tout modèle disponible. Il s'intègre également de manière native au cadre de validation Blazor, mais plus encore dans ce post.

DropDownList

 L'interface utilisateur de Telerik pour Blazor DropDownList affichant des exemples de données dans un menu déroulant

liste des données que vous souhaitez attribuer à une seule entrée? La DropDownList est votre réponse! Comme nos autres composants DropDownList, cela donne à vos utilisateurs une liste d’options de sélection sans avoir besoin de saisir du texte personnalisé ou de faire une recherche dans la liste. Dès le départ, nous prenons en charge des fonctionnalités telles que les modèles et l'intégration à la validation Blazor afin de nous assurer qu'il répond aux exigences de votre application.

TextBox

 Interface utilisateur Telerik pour composant TextBox de Blazor "title =" Interface utilisateur Telerik pour composant TextBox de Blazor "/></p data-recalc-dims=

Simple et facile. Longueur minimale / min, modèles de saisie valides et attribution d'une étiquette avec une option de configuration, nous avons décidé de créer le composant d'interface utilisateur Telerik pour Blazor TextBox, qui prend bien évidemment également en charge la validation, que nous verrons dans la section suivante! ] Intégration de la validation de blazor native

 Exemple d’interface utilisateur Telerik pour la validation de blazor avec un composant zone de texte

Avec 0.4.0, Telerik UI for Blazor s’intègre officiellement aux formulaires et à la validation dans Blazor. Ceci est pris en charge de manière générale pour tous les éléments d’entrée Telerik UI for Blazor. Nos composants d'interface fonctionnent immédiatement avec ces éléments de Blazor lorsqu'ils sont placés dans un EditForm et répondent aux modifications EditContext tout en fournissant des styles non valides par défaut. En passant, cela ne se produit pas uniquement sur OnSubmit, cette validation se produit en temps réel.

En s'inspirant de de notre documentation voici les étapes de base pour valider l'interface utilisateur de Telerik pour les composants d'entrée Blazor:

  1. Définissez un modèle avec attributs d'annotation de données
  2. Prenez les éléments en entrée que vous souhaitez représenter votre modèle dans un EditForm
  3. Ajoutez un DataAnnotationsValidator ] dans le formulaire
  4. Utilisez la syntaxe bind-Value pour attribuer une valeur de liaison à vos éléments d'entrée

Et c'est tout!

Ce billet de blog étant plus long, je vais le diriger Passez à la section sur la validation de notre documentation où vous pourrez voir d'autres exemples de cela en action.

Nouvelles pages de démonstration

Nous essayons quelque chose de nouveau avec Telerik UI for Blazor et nous en publions les résultats plus tôt et plus tard. juste comme ils sortent du four. Dans ce cadre, nous développons également les ressources disponibles pour créer des éléments concrets, à l'instar de tous les autres produits d'interface utilisateur Telerik.

Je peux également annoncer que nous avons publié le document officiel à ce jour. Page de démonstration de l'interface utilisateur de Telerik pour Blazor ! Comme toutes nos autres bibliothèques d'interface utilisateur, il s'agit d'un ensemble interactif de démos qui vous permet de voir les composants en action, de consulter rapidement le code source fourni avec la démonstration et d'obtenir des liens utiles vers les articles de documentation.

Obtenir les bits

Si vous avez déjà utilisé l'interface utilisateur Telerik pour Blazor, vous devriez voir 0.4.0 dans le flux Telerik NuGet. Après cela, vous pouvez simplement suivre nos instructions de documentation relatives à l'ajout de l'interface utilisateur Telerik pour Blazor dans un projet existant .

Si vous ne vous êtes pas encore inscrit à la prévisualisation, il vous suffit de vous lancer. sur la page principale de Telerik UI for Blazor et cliquez sur «Télécharger la prévisualisation». Si vous êtes connecté à un compte Telerik.com, vous aurez automatiquement accès à l'interface utilisateur Telerik pour Blazor. Si vous n'avez pas encore ouvert de compte Telerik.com, il vous sera demandé de cliquer sur ce bouton.

À partir de là, vous pouvez suivre notre article détaillé sur la documentation Premiers pas pour vous aider à obtenir votre premier projet Blazor opérationnel, comment utiliser le flux Telerik NuGet et comment ajouter des composants Telerik UI pour Blazor à votre application!

Nous voulons avoir de vos nouvelles!

La première question que je reçois après l’annonce de la sortie est la question suivante: «Que se passera-t-il ensuite? sur la prochaine version de l'interface utilisateur Telerik pour Blazor, nous continuerons à afficher des pages utiles, y compris une page de feuille de route officielle. (comme le filtrage et le regroupement) et ajouter d'autres éléments de formulaire dont vous pourriez avoir besoin. En plus de cela, nous avons bien sûr d’autres composants populaires que nous verrons dans les suites de notre interface utilisateur pour voir quand nous pourrons livrer.

entendre vos commentaires! S'il vous manque des fonctionnalités ou des composants dont vous avez besoin, merci de nous le faire savoir! Nous avons le portail officiel de commentaires pour cette raison exacte. Proposez vos idées pour de nouveaux composants et fonctionnalités, ou votez et commentez ceux qui existent déjà, nous en tiendrons compte lors de la publication de prochaines versions!




Source link