formats

Des Toasts tartinés au JS

Cela peut sembler enfantin mais on peut perdre pas mal de temps à déclencher sa première « Toast Notification », voici donc les étapes pour affronter cette tâche sereinement…

Première étape : rendez-vous dans votre package.appxmanifest !

Toast notifications - package.appxmanifest

Il faut sélectionner "Yes" dans la liste déroulante "Toast Capable"

Jusqu’ici tout va bien…

Deuxième étape : créez une fonction qui envoie des Toasts

On doit d’abord récupérer le format du Toast qui nous intéresse (les différents formats de Toasts possibles sont là :  http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.notifications.toasttemplatetype.aspx)

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

l’objet renvoyé se manipule comme un XmlDocument, on peut donc modifier quelques valeurs telles que l’image et le texte associés

var images = toastXml.getElementsByTagName('image');
if (images.length > 0)
  images.getAt(0).attributes.getNamedItem('src').nodeValue = imgUrl;
var texts = toastXml.getElementsByTagName('text');
texts[0].innerText = title;
texts[1].innerText = text;

pour enfin instancier et envoyer le Toast

var toast = new Windows.UI.Notifications.ToastNotification(toastXml);
var toastNotifier
  = Windows.UI.Notifications.ToastNotificationManager.createToastNotifier();
toastNotifier.show(toast);

Ce qui donne au final (avec un peu d’améliorations) une fonction comme celle-ci :

function SendToast (text, title, imgUrl) {
var template =Windows.UI.Notifications.ToastTemplateType.toastImageAndText02;
  var toastXml = Windows.UI.Notifications.ToastNotificationManager
   .getTemplateContent(template );

  if (!title || title.length == 0) title = 'Win8Dev toast';
  if (!imgUrl || imgUrl.length == 0) imgUrl = 'ms-appx:///images/logoWin8dev.png';

  var images = toastXml.getElementsByTagName('image');
  if (images.length > 0)
   images.getAt(0).attributes.getNamedItem('src').nodeValue = imgUrl;

  var texts = toastXml.getElementsByTagName('text');
  texts[0].innerText = title;
  texts[1].innerText = text;

  var toast = new Windows.UI.Notifications.ToastNotification(toastXml);
  var toastNotifier
    = Windows.UI.Notifications.ToastNotificationManager.createToastNotifier();
  toastNotifier.show(toast);
};

Dernière étape : appelez la fonction

Une fois la fonction visible depuis votre code, il vous suffit de l’appeler en spécifiant au moins un des trois paramètres

SendToast('Santé !');
Toast notifications JS - résultat

Et voici ce que ça donne !

La page qui m’a permis d’y arriver est celle-ci : http://msdn.microsoft.com/en-us/library/windows/apps/hh465448.aspx

5 Responses

  1. Merci, cela m'a servi aujourd'hui mais en C# :-p !

    • Pierre Segalen

      Ravi que ça ait servi !
      Et c’est vraiment cool que les mappings WinJS soient (pour l’instant) identiques à la manipulation de WinRT en .NET !

  2. [...] Les plus assidus auront reconnu la fonction créée pour les besoins de ce post. [...]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Home HTML5 / CSS3 / JS / WinJS Des Toasts tartinés au JS

Switch to our mobile site