Dot.Blog

C#, XAML, Xamarin, UWP/Android/iOS

Faites griller les toasts ! … Avec Windows 8

[new:12/01/13]Ah l’odeur du toast chaud le matin… Mais que les gourmands gardent leur salive, ceux dont je vais vous parler ne nourrissent pas le corps mais interpellent l’utilisateur, comme des toasts bondissant du toaster. Si les toasts Windows 8 ne brulent pas et sautent pas en dehors de l’écran, ils jaillissent de la droite pour afficher un message. Rangez la poêle pour les œufs brouillés et lancez Visual Studio !

Comment remplacer les fenêtres ?

Sous WinRT, Windows a perdu son “S” et beaucoup d’ailleurs demandent son retour, sans “S” Windows n’est pas utilisable sur les grands écrans de PC parfois multi-monitor en plus. Du full-screen sur tablette ou smartphone c’est parfait, mais sur des écrans larges de PC c’est bien entendu un contresens que Microsoft devra résoudre assez vite.

Mais il ne faudrait toutefois pas réduire la vision du future aux seules habitudes du passé…

La modernité consiste aussi à savoir repenser le passé autrement plutôt que de réitérer les mêmes schémas. Et dans certaines conditions, WinRT propose des stratégies nouvelles qui rendent caduques les anciennes façons de faire.

Glissements de page, Charmes, AppBar, Flyouts, et Toasts sont autant de nouveaux éléments qui doivent entrer dans la composition de vos applications et de leur Design pour trouver des solutions nouvelles à des problèmes anciens.

Toasts

Les toasts WinRT ne croustillent pas, mais ils jaillissent depuis le bord droit de l’écran sous la forme d’un bandeau affichant généralement un message d’alerte (au sens large). L’application peut vouloir prévenir l’utilisateur qu’une erreur s’est produite tout comme elle peut avoir besoin d’indiquer qu’une tâche de fond est terminée, que de nouvelles données sont disponibles, …

Ces toasts ne sont vraiment pas de ceux qu’on aimerait avoir au petit-déjeuner : ils s’effacent tous seuls au bout d’un moment s’il n’y a aucune action utilisateur !

De même, s’ils sont généralement servis chauds, c’est à dire dès leur création, ils peuvent aussi être servis froids, c’est à dire après un délai précisé lors de leur création.

Des toasts froids qui s’évanouissent tous seuls, les gourmets seront certes déçus, mais pour le Designer c’est une aubaine car ils remplacent avantageusement et bien plus élégamment les tristes fenêtres des boites de dialogue (obligeant l’utilisateur à cliquer pour le “dismiss”).

Toasts locaux et distants

Les toasts WinRT sont décidemment étranges. Ils peuvent être locaux “in-app” ou venir de l’extérieur. Un peu comme si votre voisin vous balançait deux ou trois tartines par la fenêtre…

Les toasts locaux, “in-app” sont ceux produits par l’application en cours.

Les toasts distants sont “cloud based” généralement déclenchés par une notification extérieure (un push ou quelque chose de ce type).

Ici je ne m’intéresserai qu’aux premiers, beaucoup plus simples à mettre en place, il sera toujours temps d’aborder à nouveau le sujet pour les seconds dans un prochain billet !

Un choix de toasts assez large

Enfin une bonne nouvelle pour les gourmands : les toast sont fournis en plusieurs saveurs !

Il existe en effet toute une gamme de toasts, des plus légers aux plus lourds bien chargés d’information, un peu comme les tuiles (qu’on peut garder pour le dessert).

D’ailleurs comme les tuiles les toasts se définissent par un bout de XML.

Toutes ces saveurs font l’objet de plusieurs templates fournit par WinRT.

Les toast à texte seul

ToastText01

Un chaine simple qui peut s’étendre sur 3 lignes maximum.

ToastText01 example

Le code XML étant :

<toast>
    <visual>
        <binding template="ToastText01">
            <text id="1">bodyText</text>
        </binding>  
    </visual>
</toast>

 

ToastText02

Une chaine simple en gras, puis une chaine simple pouvant s‘étendre sur deux lignes.

ToastText02 example

Le code XML :

<toast>
    <visual>
        <binding template="ToastText02">
            <text id="1">headlineText</text>
            <text id="2">bodyText</text>
        </binding>  
    </visual>
</toast>

ToastText03

Une chaine simple de texte en gras qui s’étend sur les deux premières lignes et une chaine simple sur la troisième ligne.

ToastText03 example

Le Code XML :

<toast>
    <visual>
        <binding template="ToastText03">
            <text id="1">headlineText</text>
            <text id="2">bodyText</text>
        </binding>  
    </visual>
</toast>

 

ToastText04

Une ligne de texte en gras sur la première ligne, pouvant être tronqué, idem pour les deux lignes suivantes (deux chaines distinctes éventuellement tronquées, sans gras).

ToastText04 example

Le code XML :

<toast>
    <visual>
        <binding template="ToastText04">
            <text id="1">headlineText</text>
            <text id="2">bodyText1</text>
            <text id="3">bodyText2</text>
        </binding>  
    </visual>
</toast>

 

Les autres templates

Comme on vient de le voir, il existe quatre templates aux nuances subtiles entre lesquels bien choisir n’est pas toujours évident.

On remarque aussi que ces toasts ont un visuel qui est défini en XML et non pas en XAML… WinRT lui-même n’est pas basé sur XAML, ce qui lui permet d’ailleurs de faire fonctionner des applications Html/Js sans état d’âme.

On regrettera forcément la grande cohérence qu’offrait .NET, puisqu’ici du XML jouant le rôle de XAML vient se mélanger à des langages graphiques comme XAML ou HTML, et des langages de code comme Js ou C++.

Le choix laissé au développeur est un aspect essentiel de WinRT, comme il l’était sous .NET, mais on sent bien que le clan Sinofksy a imposé sa vision C++/HTML/JS/XML en opposition franche à ce qui existait et qui marchait très bien (C#/VB/XAML) sans qu’aucun supplément de service réel ne découle de cette mise en opposition. Il s’agit d’une guerre fratricide jetant le trouble plus que servant les intérêts des développeurs et même ceux de Microsoft embarqué dans la maintenance de langages dont .NET se passait allègrement, ce qui aurait pu rester longtemps ainsi pour le plus grand bien d’une situation stable, seule apte à favoriser le business…

Mais, grâce à quelques intelligences dans la place, C#, Xaml et .NET restent des citoyens de premières classe dans cet ensemble un peu bancale. Ne nous plaignons pas ! … Même si pour préparer nos toasts il faudra en passer par du XML et non du XAML…

Les templates présentés plus haut peuvent paraitre “tristounet”. Il est vrai qu’ils sont en mode texte pur, sans beaucoup d’ornementation… WinRT base sont UI sur Metro/Modern UI dont le principe est le dénuement le plus total, cela n’est donc pas paradoxal.

Toutefois il peut s’avérer qu’au moins une icône ou une photo amène un peu de couleurs et de précision visuelle au message du Toast.

Microsoft y a pensé, bien entendu.

Les templates mixtes image / texte

Il existe donc pour ces situations des templates mixtes permettant d’afficher une image et du texte.

Dans ces templates les images sont définies en utilisant quatre syntaxes différentes selon d’où provient la source :

  • http:// ou https:// pour une image Web
  • ms-appx:// pour une image inclus dans le package de l’application
  • ms-appdata:///local/ pour une image sauvegardée sur le stockage local
  • file:/// pour une image locale uniquement pour les applications desktop

 

Une fois cette convention connue les quatre templates ressemblent beaucoup aux quatres précédents, sauf la présence d’une image en plus.

ToastImageAndText01

Une image et une ligne simple de texte qui peut s’étendre sur  3 lignes :

ToastImageAndText01 example

Le code XML :

<toast>
    <visual>
        <binding template="ToastImageAndText01">
            <image id="1" src="image1" alt="image1"/>
            <text id="1">bodyText</text>
        </binding>  
    </visual>
</toast>

ToastImageAndText02

Une image, une chaine en gras, une chaine simple qui peut s’étendre sur 2 lignes :

ToastImageAndText02 example

Le code XML :

<toast>
    <visual>
        <binding template="ToastImageAndText02">
            <image id="1" src="image1" alt="image1"/>
            <text id="1">headlineText</text>
            <text id="2">bodyText</text>
        </binding>  
    </visual>
</toast>

ToastImageAndText03

Une image, une chaine en gras qui peut occuper 2 lignes et une ligne simple de teste sur la 3eme ligne :

ToastImageAndText03 example

Le code XML :

<toast>
    <visual>
        <binding template="ToastImageAndText03">
            <image id="1" src="image1" alt="image1"/>
            <text id="1">headlineText</text>
            <text id="2">bodyText</text>
        </binding>  
    </visual>
</toast>

ToastImageAndText04

Une image, une chaine en gras tronquée si nécessaire, deux chaines simples sur les 2 autres lignes, tronquées elles aussi si nécessaire :

ToastImageAndText04 example

Le code XML :

<toast>
    <visual>
        <binding template="ToastImageAndText04">
            <image id="1" src="image1" alt="image1"/>
            <text id="1">headlineText</text>
            <text id="2">bodyText1</text>
            <text id="3">bodyText2</text>
        </binding>  
    </visual>
</toast>

Bref, ce n’est pas bien compliqué même si, en bon “XamlIste” j’aurai bien plus apprécié un simple ContentControl dans lequel on aurait pu placer le code Xaml qu’on voulait… Plus simple, plus puissant, moins restrictif, moins bizarre à se souvenir que ces 8 templates aux noms peu évocateurs. Que des avantages. Sauf que Sinofsky n’aimait pas XAML. A quoi peut tenir parfois la cohérence et la puissance d’un système arrivé à un tel niveau de sophistication me surprendra toujours…

Comment faire griller les toasts ?

Nous savons ce que sont les toasts de Windows 8, nous connaissons toutes les saveurs disponibles, reste à savoir comment les faire griller…

Rangez le toaster, appelez VS 2012 et créez un nouveau projet Windows Store App (le modèle “blank” est parfait).

Paramétrage

La première chose à faire est de déclaré qu’on veut faire des toasts. C’est pas bien méchant un toast, mais Microsoft a prévu une autorisation rien que pour ça dans le manifeste :

image

Si vous oubliez ce paramétrage il n’y aura aucune erreur, aucune exception. Rien ne se passera, c’est tout…

Vérification

Votre application peut ensuite vérifier que les toast sont bien activés avant de s’en servir (sait-on jamais…) :

var notifier = ToastNotificationManager.CreateToastNotifier();
if (notifier.Setting != NotificationSetting.Enabled)
{
    // se débrouiller sans les toasts...
}            

 

Faites chauffer !

Ne reste plus qu’à faire chauffer le toaster pour griller notre premier toast :

var notifier = ToastNotificationManager.CreateToastNotifier();
var template = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText02);
            
var element = template.GetElementsByTagName("text")[0];
element.AppendChild(template.CreateTextNode("Première ligne"));
 
var toast = new ToastNotification(template);
notifier.Show(toast);

On remarque que nous commençons par obtenir un “notificateur” puis un Template (ici le modèle ToastText02, voir plus haut pour le détail de ce dernier).

Ensuite il nous faut récupérer les éléments par leur ID, un peu comme de la programme… html (beurk).

Une fois l’élément obtenu on lui ajoute un enfant, ici un noeud texte (CreateTextNode).

Enfin le Toast est créer, puis il est affiché (immédiatement).

Un Toast différé

On peut différer dans le temps l’apparition du Toast, pour cela il suffit de remplacer les deux dernières lignes de code de l’exemple ci-dessus par celles-ci :

var date = DateTimeOffset.Now.AddSeconds(10);
var scheduledToast = new ScheduledToastNotification(template, date);
notifier.AddToSchedule(scheduledToast);

 

Le toast est créé en utilisant une autre classe, un ScheduleToastNotification et au lieu d’appeler la méthode Show() du notificateur on ajoute le Toast à la file d’attente de ce dernier. C’est assez logique.

Conclusion

Afficher des toasts avec Windows 8 est d’une grande simplicité, c’est très utile et permet d’avertir l’utilisateur immédiatement ou bien avec délai sans pour autant bloquer l’interface avec une boite de dialogue.

A utiliser quand même avec retenue… un logiciel affichant sans cesse des toasts deviendrait vite énervant…

Stay Tuned !

blog comments powered by Disqus