Comment utiliser les notifications dans l’interface utilisateur Telerik pour ASP.NET Core

Le composant Notification de la bibliothèque Telerik UI pour ASP.NET Core facilite l’ajout, la personnalisation et la définition d’événements. Découvrez comment vous l’approprier.

Un bref historique des notifications

L’évolution des notifications d’applications Web est une histoire qui se déroule parallèlement aux progrès de la technologie Web et aux transformations des paradigmes de l’expérience utilisateur.

Au départ, le Web était un domaine quelque peu statique dans lequel les boîtes d’alerte JavaScript fonctionnaient comme des outils de notification primitifs. Ces avertissements étaient ennuyeux, empêchant l’interaction de l’utilisateur jusqu’à ce qu’ils soient ignorés manuellement. C’était une époque de simplicité mais d’intrusion, rappelant l’époque où l’interactivité sur le Web en était à ses balbutiements.

Les techniques de sondage sont apparues comme une approche plus dynamique pour récupérer des informations à mesure que le Web mûrissait. Les applications Web envoient périodiquement des requêtes HTTP aux serveurs pour obtenir de nouvelles données. Bien que cette solution soit plus engageante que les boîtes d’alerte, elle était gourmande en ressources et présentait des problèmes de latence.

Simultanément, des plugins tiers tels que Flash fournissaient un moyen non standard mais visuellement plus attrayant de présenter les notifications, semblable à un service postal élaboré mais incohérent.

Alerte JavaScript sur Windows 7.

La vulgarisation d’AJAX (Asynchronous JavaScript and XML) a constitué un tournant décisif. Cette technologie a permis aux pages Web de mettre à jour des parties en temps réel sans actualisation complète de la page. Ce changement a permis de placer les notifications directement dans les pages Web sous forme de bannières ou de fenêtres contextuelles, améliorant considérablement l’expérience utilisateur en fournissant un flux moins perturbateur.

Avec l’arrivée du HTML5, le paysage des notifications a encore progressé. Les WebSockets, par exemple, permettaient une communication bidirectionnelle en temps réel entre le client et le serveur. Ce changement de donne a permis de fournir des mises à jour en temps réel rapidement et efficacement.

L’API Notifications a également été publiée, qui fournissait des notifications système natives pouvant être affichées en dehors de la fenêtre du navigateur, similaires aux notifications du bureau. Les notifications sonores et les modifications dynamiques du favicon (la petite icône affichée dans un onglet du navigateur) étaient également réalisables, ajoutant des couches supplémentaires à l’expérience utilisateur.

Un autre ajustement a été nécessaire en raison de l’omniprésence des appareils mobiles. Les conceptions sont devenues plus simples et moins invasives pour s’adapter à des écrans et des interfaces tactiles plus petits. Les notifications push sont devenues une fonctionnalité importante, en particulier sur les smartphones Android, car elles uniformisent les règles du jeu dans leur capacité à engager les clients via des alertes sur les applications en ligne et natives.

Les notifications ont été rendues exploitables, permettant aux utilisateurs d’effectuer des tâches directement à partir du volet de notification. Une approche centrée sur l’utilisateur a été mise en œuvre en incorporant des fonctionnalités permettant à l’utilisateur de personnaliser les types de notifications et leur livraison. Pour résoudre le problème de la fatigue des notifications, la conception a commencé par regrouper des types de messages comparables et en fournissant des résumés.

L’introduction des applications Web progressives (PWA) marque l’apogée actuelle du progrès. Ils ont permis de recevoir des notifications même lorsque l’application Web n’était pas ouverte dans un onglet du navigateur, ce qui a permis d’obtenir une expérience semblable à celle d’une application native.

Interface utilisateur Telerik pour la notification ASP.NET Core

Le Notification composant en cours Interface utilisateur Telerik pour ASP.NET Core rationalise la façon dont les messages sont envoyés aux utilisateurs dans le monde du développement Web en constante évolution. Ce composant fonctionne de manière similaire à un messager polyvalent, délivrant des messages rapides, tels que des alertes, des confirmations, des mises à jour de statut ou des avertissements. Sa polyvalence le distingue : il est conçu pour s’adapter à un large éventail de scénarios, des pages Razor aux mises en page de droite à gauche (RTL), en passant par des modèles sur mesure et bien plus encore.

Une autre caractéristique distinctive du composant Telerik UI pour ASP.NET Core Notification est sa facilité d’installation. Cet article vous guidera à travers les étapes nécessaires à la création de l’élément, de la préparation du fichier CSHTML à l’initialisation de la notification, qui comprend le contenu principal et un bouton d’action. Cela ne s’arrête pas là : cela couvre également le masquage de la notification avec un bouton, la gestion des événements de notification et le référencement des instances de composants existantes.

Commençons!

1. Créez votre projet Telerik UI pour ASP.NET Core :

2. Choisir entre HTML et Tag Helpers :

Pendant le processus de création du projet, vous pouvez choisir entre HtmlHelper et TagHelper. Ce choix pourrait avoir un impact significatif sur votre flux de travail de développement. Par conséquent, je vous recommande de discuter avec votre équipe de l’option qui correspond le mieux à vos compétences collectives. Ci-dessous, vous pouvez visualiser le fonctionnement de chaque type.

3. Sur la page cible, ajoutez le composant de notification :

Aide HTML

@(Html.Kendo().Notification()
    .Name("notification")
    .Position(p=>p.Top(120).Left(20))
    .Button(true)
    .HideOnClick(false)    
    .Events(e => e.Show("show")
     )
)

Aide-étiquette

<kendo-notification name="notification">
    <position top="120" left="20"></position>
</kendo-notification>

Choisissez le meilleur endroit pour placer votre notification en définissant la position en haut et à gauche.

4. Créez une fonction pour afficher des messages si vous affichez plusieurs messages.

1.	function showNotification(message, typeMessage)
2.	{
3.	    if (typeMessage == undefined) typeMessage = "success";
4.	    var notification = $("#notification").data("kendoNotification");
5.	    notification.show(message, typeMessage);
6.	}

HtmlHelper et TagHelper fonctionnent avec le script ci-dessus.

5. Appelez la notification en fonction du type de message et d’événement. Ci-dessous le code et ensuite une image des messages :

1)	function deleteItem(key) {
2)	        
3)	    if (key == "2") {
4)	        showNotification("Error while deleteing!", "error");
5)	        return;
6)	    }
7)	    if (key == "3") {
8)	        showNotification("You can delete one item each 10 minutes!", "warning");
9)	        return;
10)	    }
11)	
12)	    $("#item_" + key).remove();
13)	    $("#previewItem_" + key).remove();
14)	
15)	    showNotification("Item deleted successfully!");
16)	}
17)	
18)	function cancelItem() { 
19)	    showNotification("Edition cancelled!", "info");
20)	}
21)	
22)	function saveItem() {
23)	    showNotification("Item saved successfully!");
24)	}

La figure ci-dessus montre les types : avertissement, succès, information et erreur.

Personnalisation du comportement de la notification

Des paramètres tels que « Masquer au clic », « Masquer automatiquement après » et « Autoriser le masquage après » sont très importants pour permettre aux utilisateurs de se connecter et d’utiliser plus facilement une interface.

Le paramètre « Masquer au clic » vous permet de masquer un élément lorsqu’on clique dessus. Ceci est utile pour se débarrasser des e-mails ou des messages déjà vus. Avec « Auto Hide After », vous pouvez masquer automatiquement des pièces après une heure spécifique. C’est idéal pour afficher des alertes temporaires. Avec « Autoriser le masquage après », en revanche, les utilisateurs peuvent choisir de masquer eux-mêmes une partie après un certain temps.

Ces paramètres sont cruciaux pour l’approbation du système car ils aident les utilisateurs à savoir ce qu’ils font et à trouver l’interface facile à utiliser. L’interface reste propre et aide les utilisateurs à se concentrer sur leur travail en permettant aux pièces d’être masquées automatiquement ou manuellement. De plus, permettre aux utilisateurs de choisir quand les pièces sont couvertes rend l’expérience plus personnalisée et plus facile à utiliser. Dans l’ensemble, ces choix rendent le système plus facile à utiliser et plus accessible, ce qui le rend plus attrayant pour les utilisateurs.

Aide HTML

@(Html.Kendo().Notification()
  .Name("notification")
  // Hide automatically after seven seconds.
  .AutoHideAfter(7000)
  // Prevent accidental hiding for one second.
  .AllowHideAfter(1000)
  // Show a Hide button.
  .Button(true)
  // Prevent hiding by clicking on the Notification content.
  .HideOnClick(false)
)

Aide-étiquette

<kendo-notification  name="notification"
  auto-hide-after="7000"
  allow-hide-after="1000"
  button="true"
  hide-on-click="false">
</kendo-notification>

De plus, nous pouvons bricoler la notification et créer un message personnalisé. Dans mon exemple, j’ai ajouté une notification de journalisation :

Comment faites-vous?

1. Choisissez une balise. J’ai choisi « inconnu ».

1.	$(document).ready(function () {                
2.	    showNotification("Starting connection...", "unknown");
3.	    showNotification("Loading types...", "unknown");
4.	    showNotification("Writing data...", "unknown");
5.	    showNotification("Closing connection...", "unknown");
6.	    showNotification("Commands successfully completed!");
7.	});

2. Modifiez le CSS pour masquer l’espace des icônes par défaut :

span[title="unknown"] { display: none !important; }

CSS avec le !important est généralement considérée comme une mauvaise pratique car elle modifie l’apparence par défaut du composant Notification. Une meilleure façon d’y parvenir est d’utiliser un modèle.

J’ai envisagé d’utiliser ce CSS avec !important comme une astuce pour un résultat immédiat. Il faut y voir une dette technique.

3. Appelez la fonction de notification :

1.	showNotification("Starting connection...", "unknown");

L’exemple utilise CSS et le unknown est une astuce. N’oubliez pas qu’il ne s’agit pas d’un type valide pour le composant Notification. Les options valides sont info, succès, avertissement et erreur. Il est possible d’avoir un type personnalisé. Cependant, pour que cela fonctionne, un modèle doit être défini. Par exemple:

1.	<span id="notification"></span>
2.	
3.	<script>
4.	function getNotificationMessage() {
5.	    return {
6.	        myMessage: "foo text"
7.	    }
8.	}
9.	
10.	var notificationWidget = $("#notification").kendoNotification({
11.	    templates: [{
12.	        type: "unknown",
13.	        template: "<div>System alert: #= myMessage #</div>"
14.	    }]
15.	}).data("kendoNotification");
16.	
17.	notificationWidget.show(getNotificationMessage, "unknown");
18.	</script>

Voir plus dans le Documentation de notification pour le show méthode.

Ou directement :

1.	var notification = $("#notification").data("kendoNotification");
2.	notification.show(message, typeMessage);

Modification de la couleur et de la couleur d’arrière-plan :

Modifiez le CSS en fonction de votre balise, dans ce cas « inconnu » :

.k-notification-unknown { color: white;  background-color: #ff6633; }

Conclusion

L’interface utilisateur Telerik pour le composant ASP.NET Core Notification incarne la variété et la convivialité. Il offre une approche diversifiée de la présentation des notifications tout en gardant la procédure de configuration aussi simple que possible, équilibrant les idéaux d’une communication utilisateur efficace avec les aspects pratiques d’un développement Web rapide.

Téléchargez une version d’essai de l’interface utilisateur Telerik pour ASP.NET Core et commencez à utiliser l’interface utilisateur Telerik immédiatement. Rassurez-vous, vous pouvez contacter l’équipe d’assistance légendaire pour obtenir de l’aide à tout moment, même pendant la période d’essai.

Encore mieux, télécharger une version d’essai de Telerik DevCraft et jetez un œil à la puissante suite d’outils que vous pouvez obtenir dans cet ensemble.

Les références