Un aspect très important du développement des applications web comme avec ASP.NET Core, ce sont les contrôles utilisateurs. Il est important de faire, au départ, le bon choix de contrôles utilisateurs sinon cela peut être catastrophique. Démarrer avec une mauvaise librairie de contrôles utilisateurs peut vous faire perdre un temps précieux.
Alors aujourd'hui, je m'en vais explorer Fluent UI for Blazor.
Si vous faites cette recherche dans votre moteur favoris, vous allez sans doute trouver des choses un peu vieilles, allons à l'essentiel :
En suite vous trouvez le Nuget Package Officiel à installer dans votre projet Blazor :
Nuget - Microsoft.Fast.Components.FluentUI Cette page est importante pour mettre en oeuvre FluentUI au sein de votre projet Blazor, des instructions importantes sont en bas de la page. Il y a bien une "Note" à propos d'escape du caractère @ mais les explications données : Razor Pages syntax documentation ne suffisent pas !
\\Visual Studio 2022\Samples\ASP.NET Core Blazor\BlazorServerFluentUIApp\Pages\_Layout.cshtml
Le sujet c'est un escape caractère pour que le @ ne soit pas interprété mais lu comme un caractère autorisé dans une url.
Alors je vous laisse cherche un peu ...
Ajouter $ ou \ ou / ou bien encore @ voir doubler @@ ou tout autre %40 ne fonctionnera pas ... avec les navigateurs actuels, là encore de nombreuses vieilles choses traînent sur Internet c'est dommage et cela vous fait perdre votre temps.
Solution à l'erreur : /@fluentui c'est @Html.Raw("@") comme dans :
Il est dit dans la doc que des Templates d'application peuvent être installés par la commande :
>dotnet new install {path to package}\Microsoft.Fast.Templates.FluentUI.{version}.nupkg
Pour moi, le résultat fut le suivant :
Microsoft.Fast.Templates.FluentUI.{version}.nupkg
J'ai trouvé ce Template à installer dans la gestion des packages de la Solution mais là encore impossible de l'installer.
GravitéCodeDescriptionProjetFichierLigneÉtat de la suppression
ErreurLe package 'Microsoft.Fast.Templates.FluentUI 2.0.3' a un type de package 'Template' non pris en charge par le projet 'BlazorWebAssemblyFluentUIApp1'.
Grrr, dommage !
Du coup j'installe le NuGet en passant par : Bouton droit sur le projet -> Gérer les packages NuGet :
Je ne parviens pas encore à afficher les icônes, non ce n'est pas une question d'install, j'ai une application Blazor qui fonctionne :
FluentUI for Blazor
Mais quand j'essaye d'activer l'Accordion avec le code suivant :
<FluentAccordion ActiveId="@activeId" OnAccordionItemChange="HandleOnAccordionItemChange"> <FluentAccordionItem Heading="Panel one"> <FluentIcon Slot="start" Name="@FluentIcons.Globe" Size="@IconSize.Size20" Color="@Color.Neutral" /> Panel one content, using the 'start' slot for extra header content (in this case an icon) </FluentAccordionItem> ...
Et bien, c'est une erreur :
requested Icon Globe Size20 Regular is not available in the collection
Comme si l'icône Globe n'existait pas dans la solution.
Je n'ai pas plus de temps à perdre avec cette histoire d'icône FluentUI, je verrai cela plus tard !
Je recherche la meilleure documentation pour bien démarrer avec Blazor. Je me méfie de la documentation MS qui est bien trop souvent pléthorique. Donc je me fais un post rapide avec les concepts et les liens utiles pour bien démarrer votre développement avec Blazor.
Type d'authentification : il n'y a pas de Windows parce que Docker n'est pas une option
Configuration HTTPS
ASP.NET core Hosted
Application Web Progressive (PWA pour une utilisation hors connexion)
Une option : N'utilisez pas d'instruction de niveau supérieur (de méthode Main ou d'instructions supérieures)
Formation avec Blazor
J'ai trouvée quelques vidéos :
HTS Learning - Acheter le cours "Développement web avec Blazor" Dans "Les bases de Blazor" comment séparer la Vue et le Code ... C'est intéressant de la séparer la Vue du Code et la technique démontrée ici est permise par Blazor alors pourquoi s'en priver ?
Comme avec toute technologie, les contrôles utilisateur sont le nerf du développement d'applications. Il faut les choisir correctement dès le début du projet.
Composants intégrés
La page la plus importante pour comprendre le comportement des contrôles utilisateurs, c'est le cycle de vie des composants ASP.NET Core Blazor Razor :
On retrouve Telerik, Infragistic, DevExpress pour les composants payants. Je ne suis pas contre le fait de payer des composants contrôles utilisateur mais les stratégies de ces fournisseurs sont un peu agressives, le prix, il devient difficile de les comparer et de faire son choix.
Je vous laisse faire le votre ou trouver des comparatifs, je crois qu'on peut les départager avec un critère comme l'utilisabilité des composants les plus complexes comme les DatasGrid.
Microsoft.Fast.Components.FluentUI
Microsoft Learn - Fluent UI Web Components Overview Microsoft.Fast.Components.FluentUI Dans la doc il est fait mention de la commande d'install : >npm install --save @fluentui/web-components Mais npm n'est plus pris en charge on le trouve dans les nugets ...
Blazorise - Templates Guide Très intéressant car on définit les couleurs du Thème que l'on souhaite utiliser pour une UI dédiée, pour un client qui souhaiterait avoir des couleurs spécifiques c'est certainement intéressant.
Radzen
A set of 70+ free and open source native Blazor UI controls.
Radzen Blazor Studio Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Fast.
Comparaison des Blazor Tooling (contrôles utilisateurs ++)
Comment comparer ces différents ensembles de contrôles utilisateurs, autrement qu'en passant des jours à les installer, à les utiliser et découvrir leurs fonctionnalités ?
Visual Studio Magazine - What's New in Third-Party Blazor Tooling Voici une page de comparaison les fonctionnalités des différents intervenants, je n'ai pas encore découvert Syncfusion mais il semble qu'il y a une licence "community" ... pas de Blazorise dans cette comparaison.
Je cherche des exemples d'application de développements avec Blazor, au plus proche de la communauté officielle. Il est légitime qu'une technologie soit démontrée par un nombre conséquent d'exemples.
On trouve Ici :
GitHub - dotnet/blazor-samples Samples to accompany the official Microsoft Blazor documentation Blazor Server with EF Core Sample App
Tout un tas d'exemples avec Blazor dans les catégories suivantes :
Créer des Pages Razor (Blazor) avec du Code Séparé
Depuis le début, je m'escrime à créer des composants Blazor avec la directive @code puis à créer une class avec le nom MyComponent.razor.cs puis à déplacer le code dedans.
J'ai même regardé une vidéo où le formateur blazor passe dix minutes à vous décrire comment faire quelle perte de temps !
Et puis je découvre dans Bouton droit sur le Projet -> Ajouter -> En ligne -> Blazor Component CodeBehind Templates (VS2022) pour ajouter des Templates :
Créer des Page Razor avec le code séparé ou code behind
Ce qui veut sans doute dire qu'il faut attendre Visual Studio 2022 pour pouvoir l'installer mais je clique sur l'install et me voilà avec les deux Templates suivants :
Empty Razor Page Component with Code Behind
Ce n'est pas exceptionnel, le Template Empty n'a pas le code html c'est tout mais c'est déjà ça !
Bon, il manque la directive @inherit MaPageBase, mais bon ...
Bon la class est partial alors que pour mettre protected comme on a appris qu'il ne faut pas faire ça, mais bon ...
C'est déjà ça !
Si vous utilisez l'héritage depuis ComponentBase et @inherit, n'oubliez pas de mettre les propriétés à protected pour qu'elles soient accessible depuis la page ...
Se méfier de la directive @page "/" car elle crée une erreur d'un autre monde !?
