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 :
Learn Microfot - Use Fluent UI Web Components with Blazor
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 !
Fluent UI Web Components for Blazor - Using Web Component
Et la Documentation complète en live :
Microsoft - Fluent UI Web Components for Blazor#getting-started
Il y a plain d'autres chose plus ou moins officielles qui traînent sur Internet concernant FluentUI pour Blazor.
Voilà, avec ces trois liens, pas plus, vous avez de quoi démarrer votre développement avec Fluent UI Officiel for Blazor.
Là où j'ai perdu du temps c'est avec /@fluentui
Dans l'installation à faire au sein de votre projet Blazor, vous avez la ligne suivante :
<script type="module" src="https://cdn.jsdelivr.net/npm/@fluentui/web-components/dist/web-components.min.js"></script>
à insérer de préférence dans le ficher :
\\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 :
<script type="module" src="https://cdn.jsdelivr.net/npm/@Html.Raw("@")fluentui/web-components/dist/web-components.min.js"></script>
Voici les premiers résultats avec FluentUI for Blazor :
 |
| FluentUI for Blazor Officielle |
Pour le reste, je vous laisse avec un dernier lien :
Microsoft - Fluent UI Web Components for Blazor#using fluent UI
Le gros du problème, c'était bien /@fluentui.
Microsoft.Fast.Templates.FluentUI for Blazor
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é Code Description Projet Fichier Ligne État de la suppression
Erreur Le 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 :
 |
| Installation NuGet Microsoft.Fast.Templates.FluentUI |
Le projet et son code source dans le GitHub :
GitHub - BlazorServer FluentUI App
Problèmes avec FluentUI for Blazor
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 !
La solution se trouve sans doute dans :
Sinon, plus simple pour utiliser les icônes de Bootstrap pour ASP.NET Core Blazor :
https://github.com/windperson/BlazorBootstrapIconsdDemo
Mais là on va voir qu'il s'agit des icônes de bootstrap, et non FluentUI.
Et encore un autre lien vers des Icônes :
Et finalement peut être la seule page utile :
Fluent UI Blazor components demo page
A moins que vous ayez envie de naviguer Ici :
Fluent-components.azurewebsites.net
Tout ceci ne me parait pas bien sec, il y a beaucoup trop de sites qui se veulent parler de FluentUI.
Où encore par ici :
GitHub - fast-blazor/Update Icons.md at main
Aucun commentaire:
Enregistrer un commentaire
Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.