Fermer

mai 15, 2019

Nouveautés de la version R2 2019 pour l'interface utilisateur Telerik pour ASP.NET MVC & Core10 minutes de lecture

Telerik R2 2019 Release_870x220


La version R2 2019 pour l'interface utilisateur Telerik pour ASP.NET MVC et l'interface utilisateur pour ASP.NET Core est arrivée. Découvrez les nouveautés les plus récentes, telles que les nouveaux composants tels que le visionneur et le tiroir PDF, ou les nouvelles fonctionnalités telles que le défilement sans fin dans ListView et la liaison de données pour le menu.

Mai est arrivé et j'apporte la bonne nouvelle à propos du R2 2019. version pour UI pour ASP.NET MVC et UI pour ASP.NET Core! Ces produits partagent beaucoup de points communs, je voulais donc les couvrir tous les deux dans un seul article de blog. Il y a beaucoup à couvrir ici, alors allons droit au but:

Prise en charge d'ASP.NET Core 3.0 Preview 5

La première grande chose que je veux annoncer ici est que l'interface utilisateur de Telerik pour les composants ASP.NET Core sont maintenant compatibles avec ASP.NET Core 3.0 Preview 5 . Cela garantit que ceux d'entre vous qui étudient déjà ASP.NET Core 3.0 peuvent tester nos composants dans cette version d'aperçu et nous préparer pour la version officielle d'ASP.NET Core 3.0.

Nouveau composant: Visionneuse PDF

 Interface utilisateur pour MVC et composant PDF Viewer principal avec contenu pdf lorem ipsum

Le composant PDF Viewer est une nouveauté de cette version. Il est conçu pour permettre à vos utilisateurs de visualiser et d’interagir avec les fichiers PDF sans avoir à télécharger le fichier et à l’utiliser localement. . L'interface utilisateur de ASP.NET MVC et l'interface utilisateur de ASP.NET La visionneuse PDF principale doit être liée à un fichier PDF lors du chargement initial, ou un utilisateur peut même ouvrir un fichier local pour l'afficher dans leurs applications. Les utilisateurs peuvent bien sûr télécharger le fichier en cours de visualisation sur leur propre ordinateur. L'interface utilisateur est entièrement réactive et adaptative, ce qui signifie que la visionneuse PDF fonctionne aussi bien dans les scénarios de bureau que de mobile.

Un élément important à souligner ici est que la visionneuse PDF est déjà livrée avec la virtualisation dans sa première version! Pour nous assurer que nous pouvons adapter tous les scénarios hautes performances, nous souhaitions en faire une partie intégrante de notre première version.

Enfin, pour le traitement des fichiers PDF, vous avez la possibilité de travailler avec vous ] PDF.js ou avec la bibliothèque de traitement de documents Telerik pour aider à traiter vos fichiers PDF pour les visualiser et les sauvegarder.

Nouveau composant: tiroir

 Interface utilisateur pour tiroir MVC & Core widget développé en mode modal

Le widget Drawer est un autre nouveau composant de R2 2019. Bien que ce composant soit devenu une référence pour la navigation dans les applications du monde entier, le menu du tiroir est, tout comme un récapitulatif rapide, un menu qui s’agrandit et s’effondre lorsque vous cliquez sur un bouton (comme un bouton hamburger dans de nombreux scénarios mobiles). Il s’agit généralement à gauche ou à droite de la page et offre un moyen simple d’avoir une navigation avec un impact minimal sur l’immobilier.

Afficher ou masquer le menu, ce qui peut être fait de manière modale (superposition au-dessus de contenu) ou en poussant le contenu sur le côté, peut être facilement basculé en cliquant sur le bouton du tiroir ou même en utilisant notre API. Chaque élément de menu est associé à une combinaison de texte et d'icône, mais vous pouvez également personnaliser l'apparence de chaque élément de menu à l'aide de modèles.

Le tiroir dispose également d'un mode «mini» qui vous permet de l'afficher tout en affichant le rendu. icônes que vous avez choisies – un moyen très compact d’ajouter de la navigation à vos applications Web.

Gros plan sur le composant Tableur

Un composant qui méritait une attention particulière au cours des deux derniers mois était le composant Tableur, qui était associé à R2. 2019, nous apportons une tonne de fonctionnalités très demandées à ce composant.

Support d'image

Une fonctionnalité attendue de longue date: l'ajout d'images à votre feuille de calcul est désormais possible avec R2 2019! Vous pouvez ajouter des images à n’importe quelle cellule, glisser-déplacer les images et bien sûr les supprimer. Toutes les images que vous ajoutez à votre document seront bien sûr exportées chaque fois que vos utilisateurs enregistreront également la feuille de calcul localement.

Commentaires de cellule

Ceci est assez explicite, mais il est maintenant possible pour les utilisateurs d'ajouter des commentaires. dans toutes les cellules – combler les lacunes encore davantage avec les fonctionnalités existantes des solutions de tableur basées sur un ordinateur de bureau.

Evénements supplémentaires

Cet événement a été important, d'autant plus qu'il permet de personnaliser davantage le tableur lui-même. Avec R2 2019, nous avons introduit toute une série de nouveaux événements:

  • Modification
  • DataBinding
  • DataBound
  • Paste
  • Cut
  • Copie

C’est un choix assez solide pour assurer que vous pouvez prendre le contrôle total du composant Tableur pour ASP.NET MVC ou ASP.NET Core afin de répondre aux exigences de votre application.

Rendu mobiles et adaptatifs

Pour éviter que nos développeurs ne soient obligés de choix entre desktop ou mobile, et pensez plutôt à une conception réactive et à des applications Web progressives (PWA), nous avons déjà mis à jour et amélioré / amélioré la façon dont deux de nos composants les plus importants gèrent les appareils mobiles. Plus précisément, nous avons commencé à réfléchir au rendu adaptatif, qui est un peu différent de la simple conception réactive.

Le rendu adaptatif vous permet de prendre en charge davantage de ports de vue et de réellement vous adapter à un appareil mobile. Plutôt que de changer ce qui est montré ou caché lorsque sur des écrans plus petits, le composant montrera une autre UX afin de mieux correspondre à la fonctionnalité des composants.

Cela fait partie de nos composants Grid et Scheduler depuis un certain temps, mais c'était spécifiquement axé sur l'interface utilisateur mobile hybride plutôt que sur une approche plus moderne de la combinaison de bureau et mobile. Nous avons donc mis à jour les éléments intégrés aux composants eux-mêmes (plutôt que de nous appuyer sur notre cadre d'interface utilisateur hybride), ainsi que des directives plus modernes en matière de conception UX.

The Grid

 Interface utilisateur Telerik pour ASP.NET MVC et Core Grid présentant un rendu adaptatif qui s'adapte pour fournir une UX plus applicable pour mobile

La conception réactive normale est développée avec la grille. Nous devons penser aux colonnes à afficher ou à masquer et aux autres éléments peut soit supprimer, soit compresser (le téléavertisseur se réduit à une liste déroulante plutôt qu'à un téléavertisseur complet, par exemple).

Toutefois, la grille dispose de filtrage, tri, contrôle par l'utilisateur pour afficher et masquer les colonnes. Toutes ces fonctionnalités requièrent des éléments d'interface utilisateur pour être gérées, et le plus souvent, les variantes d'ordinateur de bureau permettant d'interagir avec elles peuvent être un peu maladroites sur mobile. Les menus contextuels sont assez difficiles à gérer sur mobile très honnêtement. Avec le rendu adaptatif, nous avons cela à l’esprit et nous avons créé une expérience utilisateur alternative pour les interactions avec la grille.

Voici un exemple de rendu adaptatif en action. Voici la page qui apparaît lorsque vous appuyez sur l'icône d'en-tête:

 L'interface utilisateur Telerik pour ASP.NET MVC & Core Grid présentant un rendu adaptatif fournissant une vue en liste avec des commutateurs pour les paramètres de colonne.

Rather qu’un autre popup, nous avons maintenant un ListView avec diverses options que nous pouvons basculer (tri), ainsi que des commutateurs pour afficher et masquer les colonnes. Au-delà, nous voyons également avec le symbole > qu'il existe un autre niveau de filtrage qui affichera également une liste d'options (ListView).

Remarque: il ne s'agit pas ici du comportement par défaut de la grille. . Par défaut, nous supposons que vous souhaitez utiliser une conception réactive. Cependant, ce type de fonctionnalité n’est qu’une option de configuration.

Le Planificateur

 L’UI Telerik pour ASP.NET MVC & Core Scheduler présente une vue quotidienne avec une expérience utilisateur adaptée pour mobile [19659008] Semblable à la grille, le planificateur est un composant plus volumineux qui peut tirer parti du style de rendu adaptatif plutôt que d’essayer de tout réduire dans un écran plus petit.

 L’UI Telerik pour ASP.NET MVC et le planificateur principal avec un vue agenda adaptée aux ports de vue mobile

L'image ci-dessous présente la vue agenda, une des nombreuses vues fonctionnant sur mobile, avec un regroupement autour des ressources. En tapant sur l’un de ces éléments, vous obtenez un formulaire modifiable doté d’une interface utilisateur plus conviviale pour l’aide à l’édition sur les appareils mobiles.

Tout comme pour la grille, ce n’est pas l’option par défaut. Au lieu de cela, cela est proposé via une option de configuration permettant d'activer ou de désactiver.

Le DateRangePicker

Le DateRangePicker a été ajouté à la R1 2019 et nous avons presque immédiatement reçu des informations sur ce que nous pouvons faire pour les appareils mobiles. Bien que cela ait fonctionné, nous pourrions certainement nous améliorer. Ainsi, avec R2 2019, DateRangePicker offre une expérience mobile améliorée qui devrait vous permettre de présenter le composant sur n'importe quel périphérique sans souci!

ListView obtient un défilement sans fin

Le défilement sans fin continue d'être un moyen populaire de défiler dans notre liste plus grande- composants à base. Ce type de défilement fonctionne en chargeant plus de données une fois que l'utilisateur a fait défiler l'écran jusqu'en bas de la page en cours, puis l'ensemble de données suivant est chargé. Ainsi, sous le capot, il fonctionne de la même manière que la pagination, mais pour l'utilisateur final, il semble qu'ils peuvent simplement continuer à faire défiler l'écran.

ListView ne fait pas exception à la règle: cette requête est très populaire. fonctionnalité dans notre portail de commentaires jusqu'à maintenant. Avec R2 2019, nous pouvons maintenant marquer cette demande de fonctionnalité comme terminée, car ListView prend officiellement en charge le défilement sans fin!

Améliorations diverses

Lier Menu à DataSource

Avec R2 2019, le composant Menu prend en charge la liaison de données via une source de données! Cela signifie que vous pouvez connecter votre menu à n’importe quel serveur (WebAPI peut-être?) Et extraire les éléments de données de votre magasin de données.

DataSourceResult & DataSourceRequest Obtenir leur propre package

Auparavant, le DataSourceResult La fonctionnalité DataSourceRequest sur laquelle repose l'interface utilisateur pour ASP.NET MVC et l'interface utilisateur pour ASP.NET Core a été intégrée aux bibliothèques. Cependant, avec ces deux produits et notre nouvelle interface utilisateur pour Blazor tirant tous parti de ce code, nous voulions rendre les choses un peu plus modulaires. Ainsi, avec R2 2019, nous avons séparé cette fonctionnalité du package Telerik.DataSource. Cela signifie que vous pouvez l'utiliser lorsque vous utilisez le filtrage, le tri, le regroupement et la pagination sur le serveur, le tout sans dépendre de MVC.dll ou Kendo.MVC.dll !

Une remarque rapide à faire est que, bien que nous vous recommandons de migrer vers Telerik.DataSource dans la mesure du possible, nous n'avons pas encore supprimé le code en interne dans nos bibliothèques pour nous assurer de ne pas introduire la rupture modifications!

Interface utilisateur améliorée pour ASP.NET MVC et les documents de base

Nous avons également examiné les ressources existantes de documentation de MVC et de base et avons tenté de mettre à jour les sections de l'API pour les deux produits. Bien que nous essayions toujours d'améliorer la documentation entre chaque publication, je tenais particulièrement à souligner cela, car nous avons passé du temps à faciliter la navigation dans l'API de ces deux bibliothèques.

Prochain webinaire R2 2019

Vous souhaitez tout voir élevé ici en action? Vous recherchez plus d'informations sur les autres bibliothèques .NET UI de Telerik? Vous avez de la chance car mercredi, le 29 mai à 11 h 00, nous avons le webinaire officiel R2 2019 Telerik ! Les places sont limitées, alors assurez-vous de cliquer sur le lien que je viens de poster et réservez votre place aujourd'hui!




Source link