Comment choisir et utiliser un modèle de toast (applications de style Metro en JavaScript et HTML)

Article
07/09/2012

[Cette documentation est une version préliminaire qui peut faire l’objet de modifications.]

Cette rubrique explique comment spécifier un modèle pour une notification toast, puis définir le contenu de cette notification.

Ce que vous devez savoir

Technologies

Windows Runtime

Prérequis

Bonnes connaissances des termes et des concepts de vignette et de notification. Pour plus d’information, voir Vignettes, badges et notifications.
Aptitude à créer une application élémentaire de style Metro en JavaScript à l’aide des API Windows Runtime.
Bonne connaissance de XML.
L’option Compatible toast doit avoir la valeur « Oui » dans le manifeste de votre application pour permettre l’envoi ou la réception de notifications toast. Pour plus d’informations, voir Comment sélectionner les notifications toast.

Instructions

Étape 1: Spécifier un modèle

var template = Windows.UI.Notifications.ToastTemplateType.toastImageAndText01;

Étape 2: Récupérer le contenu du modèle

Récupérez un modèle XML vide via la méthode ToastNotificationManager.getTemplateContent.

var toastXml  = Windows.UI.Notifications.ToastNotificationManager.getTemplateContent(template);

Étape 3: Fournir des images et du texte pour renseigner le modèle

ToastNotificationManager.getTemplateContent renvoie un XmlDocument. Utilisez les fonctions DOM (Document Object Model) standard pour fournir des images et du texte au modèle. Le modèle toastImageAndText01 utilisé ci-dessus contient une seule image et une seule chaîne de texte, que le code suivant fournit.

   
 var toastTextElements = toastXml.getElementsByTagName("text");
 toastTextElements[0].appendChild(toastXml.createTextNode("A toast!"));
 
 var toastImageElements = tileXml.getElementsByTagName("image");

 toastImageElements[0].setAttribute("src", "images/redWide.png");
 toastImageElements[0].setAttribute("alt", "red graphic");

De nombreux modèles contiennent plusieurs images ou plusieurs chaînes de texte, ou les deux. Chacun de ces éléments possède un ID qui vous permet spécifier qui va où. Le code suivant montre comment récupérer et énumérer une collection d’éléments de texte.

 var toastTextElements = toastXml.getElementsByTagName("text");

 for (var textElementIndex = 1; textElementIndex < toastTextElements.length + 1; textElementIndex++) {
     var text = "textField" + textElementIndex;
     toastTextElements[textElementIndex - 1].appendChild(toastXml.createTextNode(text));
 }

Étape 4: Spécifier un son à lire lorsque la notification toast apparaît

Windows émet un son bref lorsqu’une notification toast est déclenchée. Ce son peut être lu une seule fois ou en boucle en cas de notification toast de longue durée. Dans cet exemple, le son de la notification par messagerie instantanée n’est lu qu’une seule fois.

var audio = toastXml.createElement("audio");
audio.setAttribute("src", "ms-winsoundevent:Notification.IM");
toastNode.appendChild(audio);

Dans cet exemple, le son de l’alarme est en boucle.

var toast = toastXml.getElementsByTagName("toast");                        
toast.setAttribute("duration", "long");
                        
var audio = toastXml.createElement("audio");
audio.setAttribute("src", "ms-winsoundevent:Notification.Looping.Alarm");
audio.setAttribute("loop", "true");
toastNode.appendChild(audio);

À ce stade, votre modèle est prêt à être empaqueté dans une notification toast, puis envoyé à l’application. Voir Démarrage rapide : envoi d’une notification toast.