Démarrage rapide : envoi d’une mise à jour de badge (HTML)

Article
12/11/2015

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Remarque Vous n’utilisez pas JavaScript ? Voir Démarrage rapide : envoi d’une mise à jour de badge (XAML).

Cette rubrique vous montre comment créer ou mettre à jour un badge sur une vignette. Vous allez envoyer une notification de badge incluant un glyphe ou une valeur numérique. Vous verrez également comment supprimer votre badge de la vignette.

Un badge est un chiffre ou un glyphe affiché sur la vignette pour indiquer l’état d’une application. Il est superposé à la vignette et ne fait pas partie de la vignette proprement dite. Il peut apparaître à plusieurs endroits sur la vignette :

dans l’angle inférieur droit sur Windows dans une langue qui se lit de gauche à droite comme le français ;
dans l’angle inférieur gauche sur Windows dans une langue qui se lit de droite à gauche comme l’arabe ;
dans l’angle supérieur droit sur Windows Phone 8.1 dans une langue qui se lit de gauche à droite ;
dans l’angle supérieur gauche sur Windows Phone 8.1 dans une langue qui se lit de droite à gauche.

Le badge est manipulé via ses propres API et schéma, et il est mis à jour via ses propres notifications. Cette rubrique vous indique la procédure à suivre pour définir le contenu d’un badge, l’envoyer par le biais d’une notification et le supprimer lorsqu’il n’est plus nécessaire. La démonstration de ces actions est effectuée à l’aide d’une notification locale, le type de notification le plus simple à implémenter.

Remarque Dans cette rubrique, vous allez manipuler le contenu de la notification directement via le modèle DOM (Document Object Model) XML. Une approche facultative est disponible via la bibliothèque NotificationsExtensions, présentant le contenu XML sous forme de propriétés d’objet, y compris IntelliSense. Pour plus d’informations, voir Démarrage rapide : utilisation de la bibliothèque NotificationsExtensions dans votre code. Pour accéder au code de cette rubrique exprimé à l’aide de NotificationsExtensions, voir l’exemple de vignettes et de badges d’application.

Prérequis

Conditions préalables à la compréhension de cette rubrique :

Bonnes connaissances des termes et des concepts de badge et de notification. Pour plus d’informations, voir Vignettes, badges et notifications.
Bonne connaissance du schéma XML des badges. Pour plus d’informations, voir Schéma des badges.
Aptitude à créer une application élémentaire Windows Store en JavaScript à l’aide des API Windows Runtime. Pour plus d’informations, voir Créer votre première application du Windows Store en JavaScript.
Bonne connaissance du langage XML et de sa manipulation via les API DOM (Document Object Model).

Instructions

1. Facultatif : Déclarer une variable d’espace de noms

Cette étape permet d’utiliser un nom court à la place du nom complet de l’espace de noms. Elle équivaut à l’instruction « using » dans C# ou « Imports » dans Visual Basic. Elle vous permet de simplifier votre code.

Remarque Le reste du code dans cette rubrique part du principe que cette variable a été déclarée.


var notifications = Windows.UI.Notifications;

2. Choisir d’afficher un numéro ou un glyphe

Un badge peut afficher un numéro compris entre 0 et 99 ou un glyphe d’état figurant dans un ensemble de glyphes d’état définis par le système. Le badge que vous choisirez dépendra de votre scénario. Par exemple, un programme de courrier électronique peut afficher le nombre de messages non lus ou le glyphe « nouveau message » à l’arrivée d’un nouveau message. Pour plus d’informations sur les glyphes disponibles, voir Vue d’ensemble des badges. Pour plus d’informations sur la pertinence d’utiliser des numéros ou des glyphes, voir Recommandations et liste de vérification sur les vignettes et les badges.

Remarque À compter de Windows Phone 8.1, seuls les glyphes d’état « alerte » et « attention », ainsi que les chiffres, sont pris en charge pour les badges pour téléphone. L’envoi de tout autre glyphe au téléphone efface le badge.

Les badges numérotés et les badges avec glyphe sont définis à l’aide d’un modèle de badge spécifique. Vous devez extraire le modèle approprié pour le type de badge que vous avez choisi. Cet exemple de code récupère le modèle pour un badge numérique.


var badgeType = notifications.BadgeTemplateType.badgeNumber;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);

Cet exemple de code récupère le modèle pour un badge avec glyphe.


var badgeType = notifications.BadgeTemplateType.badgeGlyph;
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);

3. Affecter une valeur à votre badge

Cet exemple récupère l’élément badge à partir du modèle et lui affecte une valeur numérique.


var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "7");

Cet exemple affecte une valeur de glyphe au badge.


var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "newMessage");

4. Créer la notification de badge et l’envoyer au badge

Cet exemple de code empaquette dans une notification le code XML que vous avez défini et l’envoie au badge.


var badgeNotification = new notifications.BadgeNotification(badgeXml);
notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

5. Facultatif : effacer le badge s’il n’est plus valide

Si les informations transmises par le numéro ou le glyphe d’un badge sont obsolètes ou ne sont plus utiles, vous devez supprimer le badge. Le code suivant permet de supprimer le badge actuel de la vignette de l’application appelante. Vous pourriez aussi envoyer la valeur « none » comme mise à jour de badge au lieu d’appeler la méthode Clear.

Remarque Contrairement aux vignettes, un badge peut être effacé par l’intermédiaire du Cloud.


notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().clear();

Récapitulatif et étapes suivantes

Dans cette rubrique de démarrage rapide, vous avez défini et envoyé un nouveau contenu à un badge sur la vignette de votre application, puis l’avez supprimé lorsqu’il a cessé d’être valide.

La mise à jour du badge a été envoyée sous la forme d’une notification locale. Vous pouvez également explorer les autres méthodes de remise de notification : planifiée, périodique et Push. Pour plus d’informations, voir Remise de notifications.