Windows 8 – Afficher des pop-ups de type Toast

Dans une des précédents tutoriaux Windows 8 Metro en HTML5, on a vu comment afficher une fenêtre de type « alert », grâce à la classe Windows.UI.Popups.MessageDialog. Cette pop-up est modale et parfois, vous avez simplement besoin d’afficher un message en fond, sans troubler la navigation de l’utilisateur.

Pour cela, Windows a implémenté les notifications de type Toast. Celles-ci fonctionne en partie comme la mise à jour des tuiles du menu démarrer:

http://html5-tutorial.fr/windows-metro-clouder-14-modifier-la-tile-du-menu-demarrer-avec-notifications-et-tileupdatemanager/

Modification du manifest de l’application

Pour que votre application puisse afficher des Toast, vous devrez l’indiquer dans le manifest de l’application. Ouvrez donc le fichier package.appxmanifest dans Visual Studio et dans l’onglet « Application UI » vous trouverez l’option « Toast Capable (not set) ». Indiquer « Yes ». Sauvegardez.

Envoi d’une notification toast simple

On commence par ajouter un simple bouton dans notre interface:

<button id="sendNotification">Send Notification</button>

Puis on ajoute un listener en JavaScript dans le fichier JS correspondant:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/home/home.html", {

        onSendNotification : function(){

        },

        ready: function (element, options) {
            var btn = document.getElementById("sendNotification");
            btn.addEventListener("click", this.onSendNotification, false);
        }
    });
})();

Ensuite, cela se passe un peu comme les tuiles du menu démarrer Windows 8 (Live Tile). Vous allez choisir un template prédéfini (un XML) que vous allez remplir avec vos informations (textes, images) et utiliser une méthode de WinJS pour envoyer cette notification.

Exemple simple:

    onSendNotification : function(){
        var template = Windows.UI.Notifications.ToastTemplateType.toastText02;
        var toastXml = Windows.UI.Notifications.ToastNotificationManager.getTemplateContent(template);

        var toastTextElements = toastXml.getElementsByTagName("text");
        toastTextElements[0].appendChild(toastXml.createTextNode("Titre de la notification"));
        toastTextElements[1].appendChild(toastXml.createTextNode("Message de la notification"));

        var toast = new Windows.UI.Notifications.ToastNotification(toastXml);

        var toastNotifier = Windows.UI.Notifications.ToastNotificationManager.createToastNotifier();
        toastNotifier.show(toast);
    },

Comme vous pouvez le constater, on prend le template « toastText02 » qui contient 2 textes. On récupère sa définition XML dans « toastXml » puis on récupère les balises « <text> » de cette définition. Ensuite, on met le titre de la notification dans la première et le message dans la deuxième.

On créé ensuite une Notification native de type ToastNotification à partir de notre XML rempli. On récupère une référence vers un ToastNotifier et on lui passe la notification à afficher.

Résultat:

Bien sûr, la notification va s’adapter au style graphique de votre application. Quand vous allez définir un icône pour votre application, il apparaîtra à la place du logo carré barré par défaut. Idem pour la couleur de fond, qui va reprendre celle définie dans le fichier package.appxmanifest.

 

Liste de templates Toast disponibles

La liste de templates Toast disponibles sur la documentation Microsoft:

ToastTemplateType enumeration

Un aperçu des templates avec images:

Liens

Une réflexion au sujet de « Windows 8 – Afficher des pop-ups de type Toast »

  1. Ping : Windows 8 – Jouer un son pendant l’affichage d’une notification Toast | HTML5 Tutorial

Laisser un commentaire

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