Fermer

janvier 17, 2019

Présentation de l'interface utilisateur Telerik pour Blazor Early Preview


Progress Software et la marque Telerik soutiennent depuis longtemps la communauté .NET avec des produits tels que l'interface utilisateur Telerik pour ASP.NET AJAX, l'interface utilisateur pour ASP.NET et l'interface utilisateur. pour ASP.NET Noyau. C'est pourquoi nous sommes fiers d'annoncer la sortie en avant-première de l'interface utilisateur Telerik pour Blazor!

  1. Qu'est-ce que Blazor
  2. ? Qu'est-ce que Razor Components
  3. ? Lecture recommandée pour Blazor
  4. Construit à partir de zéro – 100% Native .NET
  5. Expérimenter avec nous
  6. Interface utilisateur Telerik pour un aperçu rapide de Blazor

Qu'est-ce que Blazor

? Blazor est un nouveau cadre développé par l'équipe Microsoft ASP.NET qui introduit une nouvelle génération modèle de composant qui permet aux développeurs d'écrire des applications à une seule page (SPA) sans JavaScript. Si Blazor a l’air nouveau pour vous, c’est qu’il est en développement depuis moins d’un an et en tant que projet expérimental. Initialement, le framework Blazor ciblait le runtime Mono WebAssembly (le runtime .NET compilé pour wasm ), permettant ainsi à .NET de s'exécuter sur le navigateur du client en lui donnant le nom «Blazor» (Navigateur + Razor).

Dans cette configuration, les ressources de l'application, y compris les fichiers .dll sont livrées au client et exécutées à l'exécution Mono WebAssembly . Tandis que le déploiement WebAssembly de Blazor est en cours de développement actif, une option de déploiement côté serveur appelée Composants Razor a été introduite.

Modèle de composant Blazor

Le modèle de composant Blazor est d'une conception simple et rafraîchissante. Les composants peuvent contenir un balisage (HTML) et une logique (C #) dans un seul fichier Razor (cshtml). Le composant est capable de gérer la liaison de données, les événements et l'injection de dépendances, sans JavaScript.

Le composant Counter ci-dessous illustre la composition de base d'un composant Blazor.

Le composant Counter utilise un code HTML de base. bouton pour incrémenter un champ compteur qui est affiché dans une balise de paragraphe. Du fait que Blazor fonctionne comme une application à page unique, toutes les interactions du composant ont lieu sur le client. Les mises à jour du modèle d'objet de document (DOM) du navigateur sont gérées par le framework Blazor via la liaison de données.

Qu'est-ce que les composants Razor

Récemment, Microsoft a annoncé son intention de prendre en charge le framework lorsque le serveur est exécuté dans un mode appelé Razor Components. . Encore plus récemment, il a été annoncé que le même modèle de composant serait rétrocompatible avec ASP.NET Core (MVC) et Razor Pages. Notre équipe de Telerik est enthousiasmée par l’avenir du développement de ASP.NET dans toutes les nouvelles et les dernières avancées de Blazor. Tout comme Blazor sur WebAssembly, Razor Components permet aux développeurs d’écrire des applications à une seule page (SPA) sans JavaScript.

La principale différence entre Blazor et Razor Components réside dans le mode de déploiement de l’application. Au lieu que Blazor s'exécute via WebAssembly sur le client, la structure Blazor s'exécute sur le serveur en tant qu'exécutable. Dans ce mode, ASP.NET Core héberge l'application et fournit un canal de communication utilisant la technologie SignalR. À l'aide de SignalR, l'application envoie des mises à jour de l'interface utilisateur et reçoit les modifications et les événements sous forme de paquets binaires de données via une connexion de socket Web. Etant donné que seuls les changements sont envoyés sur la connexion, la charge utile est petite et efficace.

Étant donné que Razor Components utilise le framework Blazor, les composants peuvent être utilisés dans les deux types de déploiement.

Si tout cela C’est nouveau pour vous, et il est fort probable que c’est le cas, alors nous avons quelques articles de blog pour vous tenir au courant de tout ce qui concerne Blazor. Les articles suivants devraient vous mettre au courant, ou si vous vous mordez les ongles pour vérifier ce qui suit, nous avons également inclus le TLDR:

TLDR

Razor Components est ce qui a commencé à l'origine sous le nom de Blazor Server-Side au début de 2018. Blazor est un framework .NET (SPA) généralement associé à .NET s'exécutant sur Web Assembly. Toutefois, Blazor est capable de fonctionner sous plusieurs scénarios, dont Razor Components côté serveur.

  • Razor est une syntaxe de balisage de modèle populaire pour .NET
  • (Navigateur + Razor) . Blazor est. une infrastructure Web basée sur .NET qui peut s'exécuter sur le client à l'aide de WebAssembly ou en tant que:
        

    • Composants de rasoir : Le framework Blazor s'exécutant sur le serveur via SignalR
    • Composants de rasoir via les “ circuits ” – Composants de rasoir exécutés sous ASP.NET Pages de base / rasoir
    •     

  • Tous les modèles d'hébergement Blazor, côté client et côté serveur, utilisent des API C # au lieu de JavaScript
  • Razor Components devrait être livré à ASP.NET Noyau 3.0

Construit à partir de zéro – 100% Natif .NET

L'interface utilisateur de Telerik pour Blazor ne n'enveloppera pas les produits jQuery / JavaScript existants en C # et prétendra que c'est quelque chose de nouveau. Avec Telerik UI for Blazor, nous partons de zéro et écrivons des composants avec .NET autant que possible. Autrement, nous aurions pu décider d’envelopper les composants jQuery existants sous forme de chemin à court terme. Toutefois, nous pensons que le modèle de programmation du wrapper est une abstraction qui fuit qui pourrait «revenir en arrière» dans la couche de l’API .NET. En outre, nous pensons qu'une approche .NET native représente un investissement à long terme qui générera des gains plus importants à long terme. Considérez ceci comme une histoire moderne opposant tortue et lièvre.

Nous ne saurions trop dire à quel point les écosystèmes JavaScript et .NET sont importants pour nous. Nous avons des bibliothèques d'interface utilisateur pour les développeurs de tous types de compétences, mais un segment de la communauté .NET a exprimé le besoin d'outils Web frontaux ne nécessitant pas de JavaScript et nous sommes heureux d'avoir l'occasion de servir cette communauté via Blazor. [19659032] Experiment With Us

Blazor est une perspective prometteuse pour les développeurs .NET car il nous permet de créer une application Web .NET à pile complète. Nous avons reçu d'innombrables commentaires nous demandant de l'aide pour cette plate-forme de prochaine génération.

Initialement, nous proposons Telerik UI For Blazor en avant-première. Ce modèle de développement ressemble beaucoup aux efforts déployés par Microsoft avec Blazor dans la mesure où nous visons à publier de petits ensembles de fonctionnalités dans l’espoir d’obtenir des retours et des informations sur la manière dont nos clients utilisent le produit. Pendant la phase expérimentale, l'interface utilisateur de Telerik pour Blazor constituera un essai gratuit pour tous et nous espérons que vous continuerez à nous communiquer vos cas d'utilisation, expériences, blocages routiers et bogues.

Après avoir téléchargé Telerik UI for Blazor, vous recevrez un e-mail contenant des instructions sur la manière de nous faire part de vos commentaires, de vos souhaits et de vos expériences avec Blazor.

Interface utilisateur Telerik pour aperçu préliminaire Blazor

L’offre initiale sera restreinte, avec seulement quelques composants populaires, notamment les grilles de données ensembles de tabulations et boutons . Grâce aux commentaires des clients, nous prévoyons d’augmenter le nombre de composants et le nombre d’API. Nous pensons que la clé du succès est de satisfaire les besoins et les recommandations de nos clients.

Conditions préalables

  1. Installez le SDK Blazor en suivant les étapes de décrites sur le site Web de Blazor

        

  2.     

    Télécharger le interface utilisateur Telerik pour le package Blazor NuGet directement

        

  3.     

    (facultatif) Utilisez le flux Telerik NuGet comme source de paquetage

Votre premier projet Blazor

Nous vous recommandons de commencer par «Blazor (côté serveur en ASP / NET ]. ) ”Type de projet lorsque vous utilisez la boîte de dialogue Nouveau projet. Ce type de projet est également connu sous le nom de «Composants de rasoir» et sera éventuellement livré avec ASP.NET Core 3.0 . Cependant, l’interface utilisateur de Telerik pour Blazor s’appliquera à tous les types de projets Blazor.

Avec le nouveau projet créé, nous devrons installer notre interface utilisateur Telerik pour la dépendance Blazor NuGet. Avant d’ajouter le package, assurez-vous d’accéder au projet contenant l’interface utilisateur de l’application. Ce sera .App ou .Client selon le modèle choisi.

  1. Installez le package Telerik.UI.for.Blazor NuGet. Cela ajoutera la bibliothèque de composants à votre application.

        

  2.     

    Enregistrez les composants dans l'application. Dans la racine de l'application, recherchez le fichier _ViewImports.cshtml et ajoutez le code suivant:

 @using Kendo.Blazor

@addTagHelper *, Kendo.Blazor 
  1. Nous devrons également faire référence à la feuille de style nécessaire pour les composants. Localisez le fichier index.html dans le dossier / wwwroot et ajoutez la ligne suivante:

Notez que nous ne référençons aucun fichier JavaScript, car il n'y en a pas. dépendances. Vous êtes maintenant prêt à tester l'interface utilisateur de Telerik pour Blazor.

Blazor Data Grid

L'interface utilisateur de Telerik pour Blazor Data Grid comporte de nombreuses fonctionnalités. La grille de données de cette version est capable de: liaison de données, tri, pagination, thèmes modèles et édition en cellule, qui ne prend en charge que int string ] et Champs DateTime .

Voyons ces fonctions en action en remplaçant le tableau codé à la main de l'exemple Fetch Data par le tableau de données Telerik. Prenez d'abord un moment pour parcourir et explorer l'exemple de Fetch Data dans localhost / fetchdata .

Recherchez le code correspondant à Fetch Data dans le dossier / Pages . Remplacez l'élément de tableau entier par un composant de KendoGrid . Les composants de l'interface utilisateur Telerik pour Blazor utilisent l'espace de noms Kendo car il s'agit d'une référence familière à nos bibliothèques front-end existantes et partage le code CSS avec ces bibliothèques.

 else
{
  
    
      
    
    
    
    
  
}

Le composant de KendoGrid lie la propriété Data aux prévisions qui est un tableau de l'objet WeatherForecast . La grille contient également les propriétés Pageable PageSize et Sortable . À l'intérieur du composant de KendoGrid nous définissons des composants enfants pour chaque champ que nous aimerions voir affiché dans la grille. Comme il s’agit de tout le code C #, nous pouvons définir la propriété Field avec le nom de l’opérateur de C # qui nous donne la sécurité de type. En outre, les modèles peuvent être utilisés pour afficher des formats personnalisés, des images et même d'autres composants de l'interface utilisateur. Ici, un modèle est utilisé pour formater le champ Date .

Blazor Tab Set

L'autre composant principal inclus dans ce communiqué est le KendoTabSet . Le KendoTabSet prend en charge plusieurs positions de tabulation: Haut (par défaut), Bas, Gauche et Droite. Nous pouvons utiliser l’attribut bind de Blazor pour illustrer les positions des onglets au moment de l’exécution. Recherchez la page index.cshtml sous le dossier / pages . Remplacez le contenu de la page par le code suivant:

 @using Kendo.Blazor.Components.TabStrip

Bonjour, monde!

22 ºC

Temps ensoleillé à Sofia

24 ºC

en partie Temps nuageux à New York

21 ºC

Temps pluvieux à Paris

@functions {   KendoTabPosition tabPosition = KendoTabPosition.Top; }

Dans cet exemple, nous commençons par créer un élément de liste simple select avec toutes les valeurs de position KendoTabStrip KendoTabPosition. . Plus important encore, KendoTabPosition est un type standard C # enum, nous obtenons donc des valeurs fortement typées et intellisense ici. Ensuite, un composant KendoTabStrip est créé avec plusieurs composants KendoTab qui affichent certaines données de prévision météorologique. La propriété TapPosition est liée à l'élément select et à KendoTabStrip via un champ de support simple tabPosition déclarée dans à une fonction. .

Etant donné que select utilise l'attribut bind il met automatiquement à jour la valeur tabPosition lorsque l'option est modifiée, cela nous permet de modifier la position au moment de l'exécution.

Résumé

Nous sommes ravis de faire partie de la prochaine génération d’applications ASP.NET en soutenant Blazor. L'interface utilisateur Telerik pour Blazor Early Preview est disponible gratuitement aujourd'hui . Le package inclut actuellement des composants Data Grid, Tab Set et Button écrits à partir de la base pour tirer parti de Blazor sans dépendances JavaScript (il n’ya pas de jQuery pour le moment). Tout au long de l’année, Microsoft travaillera sur Blazor (alias Razor Components) dans le cadre de ASP.NET Core 3.0. Nous prévoyons de maintenir l'interface utilisateur de Telerik pour Blazor à jour au fur et à mesure de l'avancement du projet et nous attendons avec impatience vos commentaires, voir ce que vous avez construit et savoir quels composants il vous faut pour votre prochaine application.

19659009] Voir, c'est croire, alors inscrivez-vous pour découvrir toutes les nouvelles fonctionnalités – Les webinaires vont vite! Cela vous aidera à suivre facilement si vous téléchargez la dernière version ici .

Telerik

Date / heure: vendredi 18 janvier de 11h00 à 12h00 HNE S'inscrire Now

Kendo UI

Date / Heure: Mardi, 22 janvier à 11h00 HE – 12h00 HE S'inscrire maintenant


Les commentaires sont désactivés en mode aperçu.




Source link