Informez les utilisateurs de ce qui se passe : composant de notification Blazor

Plus vos utilisateurs savent ce que fait votre application, mieux votre application fonctionnera pour vos utilisateurs. Le composant Telerik UI for Blazor Notification vous permet de tenir vos utilisateurs informés de ce qui se passe avec votre application.

C’est fondamentalement vrai : dans la conception de l’expérience utilisateur, les commentaires sont importants. Les commentaires guident vos utilisateurs pour qu’ils fassent ce qu’il faut avec vos applications. Plus concrètement, si vous ne donnez pas aux utilisateurs les commentaires qu’ils attendent, ils commenceront à se moquer de certaines parties de votre interface utilisateur, essayant d’obtenir une réponse. La cascade de problèmes qui en résultera sera bien entendu imputée à vous et à votre candidature.

Les notifications jouent ici un rôle clé : les notifications sont votre outil pour tenir l’utilisateur au courant de ce qui se passe lorsqu’il est occupé à interagir avec une autre partie de votre interface utilisateur.

Les notifications peuvent être des informations sur les processus en arrière-plan (« Récupération des données client »), des rapports d’avancement (« 55 lignes sur 200 récupérées »), des mises à jour provenant de sources externes (« Ce projet a eu une nouvelle tâche ajoutée »), des informations rassurantes sur les activités hors écran ( « Votre article a été ajouté à votre panier »), ou simplement informer vos utilisateurs de ce qui ne va pas (« Échec du processus : client introuvable »).

Fondamentalement, une notification est tout ce que vous souhaitez porter à l’attention de votre utilisateur sans interrompre ce qu’il fait dans une autre partie de votre interface utilisateur.

En d’autres termes : les notifications transforment ce qui serait autrement invisible pour vos utilisateurs en une partie de leur expérience utilisateur. Le progrès Interface utilisateur Telerik pour Blazor Composant de notification vous permettra non seulement de fournir toutes les notifications dont votre interface utilisateur pourrait avoir besoin, mais cela rendra la fourniture de ces notifications aussi simple que la mise en œuvre d’une barre de progression. Plus facile, en fait.

Votre première notification

Tout d’abord : pour utiliser le Notification composant, après avoir créé votre projet Blazor, confirmez que le package Telerik UI for Blazor est ajouté. Une fois ce package ajouté, vous pouvez simplifier votre vie de codage en vous assurant que le fichier _Imports.razor de votre projet contient ces instructions :

@using TelerikBlazorNotification.Client
@using TelerikBlazorNotification.Client.Shared
@using Telerik.Blazor
@using Telerik.Blazor.Components

Le moyen le plus simple de faire ces deux choses est de sélectionner Extensions | Télérik | Choisissez le menu Telerik UI for Blazor dans Visual Studio et utilisez l’assistant résultant pour créer et configurer votre projet.

Pour ajouter le composant Notification à une page Razor, placez le balisage suivant où vous le souhaitez dans la zone de balisage de votre fichier Blazor Razor (c’est-à-dire en dehors de votre bloc de code) et ajoutez-y une référence afin que vous puissiez profiter du composant dans votre code. C’est ce que fait cet exemple :

<TelerikNotification @ref="@refNotification"></TelerikNotification>

Dans votre section de code, vous devez définir un champ ou une propriété pour contenir cette référence à votre composant. Cet exemple définit une propriété :

@code {
   private TelerikNotification refNotification { get; set; }

Enfin, vous souhaiterez que votre notification affiche quelque chose. Ce code fera l’affaire en créant un NotificationModel objet, en définissant sa propriété Text sur le message que vous souhaitez afficher, puis en le transmettant NotificationModel s’opposer au composant Show méthode:

protected override Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender == true)
    {
        NotificationModel nm = new NotificationModel();
        nm.Text = "Hello, World";
        refNotification.Show(nm);
    }

La page résultante ressemble à ceci :

Si vous ne parvenez pas à repérer la notification, regardez dans le coin inférieur droit de la fenêtre du navigateur. Et ne tardez pas trop : par défaut, la notification disparaît automatiquement après cinq secondes.

Appliquer les normes de l’organisation

Comme vous pouvez le constater, la première chose que vous souhaiterez faire est de prendre le contrôle de la façon dont votre notification est affichée. Le moyen le plus simple de contrôler l’apparence de votre notification est d’utiliser le modèle de notification. ThemeColor propriété (qui fait plus que simplement contrôler la couleur de la notification, d’ailleurs).

Mais… votre organisation dispose probablement d’un ensemble standard de règles CSS que vous devez appliquer aux notifications de votre application. Vous pouvez appliquer ce CSS prédéfini à l’élément de votre composant Notification à l’aide de l’élément Class attribut (et si vous n’avez pas de CSS standard ou si vous ne souhaitez pas l’utiliser, ne vous inquiétez pas : ignorez cette section et utilisez simplement l’attribut ThemeColor propriété décrite dans la section suivante).

L’exemple suivant ajoute un élément de style à la page pour définir une règle CSS nommée styleNotefication pour contrôler l’affichage des notifications du composant (cet exemple définit également certaines règles prédéfinies fournies par Telerik). L’exemple applique ensuite la règle au composant de notification, en utilisant le composant Class attribut:

<style>
.styleNotification .k-notification-container .k-notification {
            width: 300px;
            height: 50px;
            background-color: lightblue;
            font-size: 1.5em;
            text-align: center;
            align-items: center;
   }
</style>

<TelerikNotification @ref="@refNotification" Class="styleNotification"></TelerikNotification>

Ces paramètres particuliers vous donneront une notification qui ressemble à ceci :

Si vous souhaitez tirer parti des styles fournis par Telerik, vous devrez alors inclure une balise de lien comme celle-ci dans votre application (si vous avez utilisé l’assistant d’extension Telerik pour créer et configurer votre projet, celle-ci aura été ajoutée pour vous et adapté au thème que vous avez sélectionné) :

<link rel="stylesheet" type="text/css"
        href="https://blazor.cdn.telerik.com/blazor/4.5.0/kendo-theme-default/swatches/default-ocean-blue.css" />

Se faire remarquer

Vous êtes maintenant prêt à prendre le contrôle de vos notifications. Vous pouvez commencer par utiliser des attributs sur l’élément du composant pour contrôler l’endroit où les notifications apparaissent, l’animation utilisée pour présenter une notification (vous avez plus d’une douzaine de choix) et la durée d’une animation (en millisecondes).

Cet exemple déplace les notifications vers le coin supérieur gauche de la page et passe à une animation qui provoque l’augmentation des notifications sur une période de deux secondes :

<TelerikNotification @ref="@refNotification"
VerticalPostion=NotificationVerticalPosition.Top
HorizontalPosition=NotificationHorizontalPosition.Left
                     AnimationType=AnimationType.PushUp
	      AnimationDuration=2000
                     Class="styleNotification">
</TelerikNotification>

Ensuite, vous souhaiterez configurer le message pour qu’il s’affiche et fasse la distinction entre les différents types de notifications. Faire la distinction entre les types de notifications est important car vous ne le faites pas souhaitez que toutes vos notifications se ressemblent : les messages de réussite doivent être différents des messages d’erreur qui doivent être différents des messages d’information, etc.

C’est là que le NotificationModel ThemeColor la propriété entre en jeu. Pour contrôler l’apparence de votre notification, il vous suffit de définir le ThemeColor propriété à l’une des 10 constantes prédéfinies dans le ThemeConstants.Notification.ThemeColor énumération. Cet exemple définit le ThemeColor au Error constante:

NotificationModel nmError = new NotificationModel();
nmError.Text = "Something has gone wrong";
nmError.ThemeColor = ThemeConstants.Notification.ThemeColor.Error;
refNotification.Show(nmError);

Vous pouvez créer plusieurs notifications en créant des NotificationModel objets et en passant chacun au composant Hide méthode séparément. Cet exemple affiche deux messages avec des Text et ThemeColor paramètres, par exemple :

NotificationModel nmError = new NotificationModel();
nmError.Text = "Something has gone wrong";
nmError.ThemeColor = ThemeConstants.Notification.ThemeColor.Error;
refNotification.Show(nmError);

NotificationModel nmSuccess = new NotificationModel();
nmSuccess.Text = "Congratulations!";
nmSuccess.ThemeColor = ThemeConstants.Notification.ThemeColor.Success;
refNotification.Show(nmSuccess);

Comme vous pouvez le voir sur cette capture d’écran des deux messages, les thèmes donnent à vos notifications un aspect différent en appliquant une couleur d’arrière-plan, une couleur de police et une icône appropriées à la notification :

Si vous le souhaitez, vous pouvez utiliser le NoficationModel Icon propriété pour remplacer l’icône utilisée et utiliser la ShowIcon propriété pour contrôler si l’icône est affichée du tout.

Le ThemeColor le style, en passant, est tiré du Telerik thème auquel vous avez lié votre candidature. Cela signifie que vous pouvez compter sur votre ThemeColor paramètre correspondant au thème général que vous avez sélectionné lors de la configuration du projet, quel que soit le thème (ou échantillon dans un thème) que vous avez sélectionné.

Le paramètre de thème est également fusionné avec tous les paramètres de style CSS que vous avez utilisés pour contrôler l’apparence générale de vos notifications. En cas de conflit entre les thèmes prédéfinis et vos paramètres de style, vos paramètres de style l’emportent (puisque les paramètres CSS reflètent probablement les normes de votre organisation, c’est ce que vous voulez).

Cet exemple utilise l’élément de style de l’exemple précédent avec le paramètre background-color supprimé afin que l’élément de style contrôle simplement la taille et le texte de la notification.

Vous pouvez exercer encore plus de contrôle sur le format de votre notification en fournissant votre propre modèle pour le contenu de la notification.

Gestion de plusieurs notifications

Une fois votre notification affichée, vous pouvez mettre à jour le message affiché par votre notification simplement en modifiant le Text propriété sur le message NotificationModel:

nm.Text = "Hello, World";
refNotification.Show(nm);

 nm.Text = "Goodbye, World";

Cela vous donne deux stratégies pour gérer plusieurs notifications : mettre à jour un NotificationModel existant ou créer plusieurs NotificationModels.

Dans une stratégie, vous disposez d’un seul NotificationModel partagé entre toutes les parties de l’application. Cette stratégie aurait du sens, par exemple, avec des notifications associées à un processus de longue durée : différentes parties de l’application pourraient modifier le Text et ThemeColor propriétés de l’objet NotificationModel partagé pour afficher la progression du processus.

Dans l’autre stratégie, chaque partie de l’application possède ses propres NotificationModels qui sont transmis au composant TelerikNotification partagé. Show méthode. Cette stratégie est logique lorsque, par exemple, le composant TelerikNotification est utilisé pour définir une « zone de notification » dans l’interface utilisateur de l’application à laquelle chaque partie de l’application peut ajouter des notifications.

Et bien sûr, il existe des solutions hybrides qui combinent les deux stratégies pour créer une solution aussi sophistiquée que nécessaire.

Rejet des notifications

Mais, au fur et à mesure que les notifications apparaissent, vous devez également les faire disparaître (sinon, elles ne feront qu’encombrer l’écran). Par défaut, toutes les notifications disparaissent automatiquement après cinq secondes. Les utilisateurs peuvent également fermer les notifications manuellement en cliquant sur le x à l’extrémité droite de la notification.

Vous pouvez prendre le contrôle de ces deux options. Si vous voulez vous assurer qu’une notification reste aussi longtemps que vous le souhaitez, vous pouvez empêcher les utilisateurs de fermer une notification en définissant le paramètre NotificationModel. Closable propriété à false. Vous pouvez également contrôler la durée d’affichage d’une notification spécifique en définissant le paramètre NotificationModel. CloseAfter propriété à un certain nombre de millisecondes. Si vous définissez le modèle de notification CloseAfter propriété à 0, la notification ne sera jamais fermée automatiquement.

Cet exemple garantit que la notification reste à l’écran pendant dix secondes en définissant le paramètre NotificationModel. CloseAfter propriété à 10 000 millisecondes et en définissant la Closable propriété à false :

NotificationModel nmUpdates = new NotificationModel();
nmUpdates.Text = "Updates Available";
nmUpdates.ThemeColor = ThemeConstants.Notification.ThemeColor.Info;
nmUpdates.Closable = false;
nmUpdates.CloseAfter = 10000;

refNotification.Show(nmUpdates);

Même avec Closable défini sur false et CloseAfter réglé sur 0, vous pouvez toujours faire disparaître les notifications en utilisant le composant Hide et HideAll méthodes. Vous pouvez faire disparaître n’importe quelle notification spécifique en passant son NotificationModel au composant Hide méthode. Le composant HideAll La méthode, en revanche, supprime toutes les notifications affichées par le composant. Ces deux méthodes, par exemple, pourraient être utiles pour ignorer les notifications :

public void closeUpdatesMessage()
{    
   refNotification.Hide(nmUpdates);
}

public void closeAllMessages()
{    
   refNotification.HideAll();
}

Les notifications rendent visible à votre utilisateur ce qui lui serait autrement invisible : les notifications s’ajoutent aux commentaires dont les utilisateurs ont besoin pour comprendre comment utiliser votre application afin d’atteindre leurs objectifs (et, également, pour rassurer vos utilisateurs sur le fait qu’ils font ce qu’ils font. bonnes choses pour atteindre leurs objectifs). En réalité, plus vos utilisateurs en savent sur votre application et ce qu’elle fait, mieux votre application fonctionnera pour vos utilisateurs. C’est finalement tout ce qui compte.

Essayez l’interface utilisateur Telerik pour Blazor

Essayez le composant Notification, ainsi que plus de 100 autres composants Blazor véritablement natifs et faciles à personnaliser pour répondre à toutes les exigences. Essayer Interface utilisateur Telerik pour Blazor gratuitement avec notre essai de 30 jours et profitez de notre assistance de pointe.

Essayez maintenant