Bard's Tile I : Introduction, local Tiles et Badges

Tags: Release Preview, .NET, WinRT, Windows 8, Live Tiles, Badges

Mar 19 2012 8:26 PM

C’est le début d’une nouvelle série appelée Bard’s Tile (que je suis drôle !) à propos des Live Tiles.

Détail de la série :

Bard’s Tile I : Introduction, local Tiles et Badges

Bard’s Tile II : Notifications Scheduled et Periodic

Bard’s Tile III : Push Notifications

Bard’s Tile IV : Secondary Tiles

Bard’s Tile V : Lock Screen Tiles et Badges

Live Tiles

Les Live Tiles sont, je pense, une des (ou la) plus innovatrice et performante fonctionnalité de WP7 / Windows 8.

Elle permet aux applications de montrer à l’utilisateur des informations pertinentes et personnalisée. L’écran de démarrage devient une sorte de tableau de contrôle (Dashboard). Vous pouvez retrouver toutes les informations dont vous avez besoin en un coup d’œil. Plus besoin de lancer une appli météo pour connaitre la température, par exemple. Non seulement vous pouvez avoir cette information à jour sur le Live Tile de l’application, mais, grâce aux secondary tiles, vous pouvez avoir plusieurs vues en même temps (comme différents pays ou villes, dans le cas de l’appli météo).

Créer un Live Tile

Créer/mettre à jour un Live Tile n’est pas compliqué. Vous n’avez qu’à créer un TileNotification d’après un XML spécifique qui décrit le Live Tile. Après, il suffit de l’envoyer au TileUpdater. La structure de l’XML est assez simple et ressemble à ça  :

<tile>
  <visual lang="en-US">
    <binding template="TileSquareBlock">
      <text id="1">Text field 1</text>
      <text id="2">Text field 2</text>
    </binding>  
  </visual>
</tile>

 

Pas complexe mais quand même, ce serait un peu une perte d temps de tout recréer à la main. Heureusement WinRT nous aide en nous donnant un XML Live Tile blanc à partir d’une méthode :

TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText04);

 

Ici j’ai demandé un XML pour un Live Tile TileSquarePeekImageAndText04. La liste des template Live Tile est ici :

Choisir un Tile template

Maintenant que vous avez l’XML, il faut le remplir avec le(s) texte(s) et/ou image(s) Exemple :

var wideTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

var imageXml = wideTileXml.GetElementsByTagName("image");

imageXml.Item(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Images/pic1.jpg";

var textXml = wideTileXml.GetElementsByTagName("text");

textXml.Item(0).InnerText = "Hello World";

 

Détail important concernant les images : J’ai passé pas mal de temps à me demander pourquoi il n’affichait pas des images jusqu’au moment où je me suis rendu compte que les images doivent être plus petites que 800*800 et faire moins de 150k !

Maintenant que l’XML est prêt, il faut en faire une notification et l’envoyer au TileUpdater :

// create notification
var tileNotification = new TileNotification(wideTileXml);

// send notification
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

Si vous lancer ce code, le tile de votre application ressemblera à :

Effacer Live Tiles

Pour effacer toutes les mises à jour :

TileUpdateManager.CreateTileUpdaterForApplication().Clear();

 

Vérifier si Live Tile est activé

Il se peut que les Live Tiles soient désactivés. Il y a moyen de vérifier cela grâce à TileUpdater.Setting :

var notificationSetting = TileUpdateManager.CreateTileUpdaterForApplication().Setting;

switch (notificationSetting)
{
    case NotificationSetting.Enabled:
        // Proceed with notifications.
        break;
    case NotificationSetting.DisabledForApplication:
        // Possibly ask the user to enable notifications.
        break;
    case NotificationSetting.DisabledForUser:
        // Not applicable.
        break;
    case NotificationSetting.DisabledByGroupPolicy:
        // Possibly request that the user ask the system administrator to enable notifications.
        break;

    case NotificationSetting.DisabledByManifest:
        // Possibly request that the user ask the system administrator to enable notifications.
        break;
}

 

Expiration

Peut-être que les informations affichées ne sont relevantes que pour une petite période de temps. Vous pouvez alors donner une date d’expiration aux mises à jour. Celle-ci sera alors enlevée automatiquement à l’expiration. Ce qui évite de montrer des informations dépassées.

var expirationTime = DateTimeOffset.UtcNow.AddSeconds(60);
tileNotification.ExpirationTime = expirationTime;

 

Dans cet exemple , la mise à jour est enlevée après une minute.

Notification queue

Par défaut, une mise à jour va effacer l’ancienne. Mais il y a moyen de garder jusque 5 mises à jour en même temps. Windows va les montrer les unes après les autres (et recommencer indéfiniment). Pour ce faire, il faut démarrer la NotificationQueue dans votre application (au démarrage de celle-ci, en général):

TileUpdateManager.CreateTileUpdaterForApplication().EnableNotificationQueue(true);

 

Mais parfois une mise à jour est là pour en remplacer une autre (exemple, la dernière valeur d’une action en bourse). Pour éviter d’afficher des informations dépassées, vous pouvez assigner un Tag à une TileNotification. Si vous envoyer une nouvelle mise à jour avec le même Tag, l’ancienne mise à jour sera remplacée par la nouvelle.

tileNotification.Tag = "WeatherParis";

 

Note that you don’t have to use same notification template for all updates in the queue. You can have one with image, another with text, a peek one (image + text), etc....

Mise à jour de Tile Square et Wide

Comme vous savez, les Tiles ont deux tailles disponibles ; Quare et Wide. Vous ne savez pas quelle est le type de Tile montrée part votre appli présentement (Ni si elle est changée par l’utilisateur). Donc, pour être sûr de mettre à jour le bon type de Tile, vous devez envoyer une mise à jour Square et Wide en même temps. Comment faire?

Et bien il faut assembler les 2 XML ensemble :

/// Wide tile
var wideTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

var imageXml = wideTileXml.GetElementsByTagName("image");

imageXml.Item(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Images/pic1.jpg";

var textXml = wideTileXml.GetElementsByTagName("text");

textXml.Item(0).InnerText = "Hello World";

// Square tile 

var tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquarePeekImageAndText04);

imageXml = tileXml.GetElementsByTagName("image");

imageXml.Item(0).Attributes.GetNamedItem("src").InnerText = "ms-appx:///Images/pic1.jpg";


textXml = tileXml.GetElementsByTagName("text");

textXml.Item(0).InnerText = "Hello World";

// Merge the two XML :

var tempNode = wideTileXml.ImportNode(tileXml.GetElementsByTagName("binding").Item(0), true);
wideTileXml.GetElementsByTagName("visual").Item(0).AppendChild(tempNode);



// create notification
var tileNotification = new TileNotification(wideTileXml);

// send notification
TileUpdateManager.CreateTileUpdaterForApplication().Update(tileNotification);

 

L’XML ressemble alors à :

<tile>
  <visual lang="en-US">
    <binding template="TileWideImageAndText01">
      <image id="1" src="ms-appx:///Images/pic1.jpg"/>
      <text id="1">Hello World</text>
    </binding>
  <binding template="TileSquarePeekImageAndText04">
      <image id="1" src="ms-appx:///Images/pic1.jpg"/>
      <text id="1">Hello World</text>
    </binding></visual>
</tile>

 

Badges

Les Badges sont des infirmations additionnelles qui vous pouvez montrer sur le Live Tile. C’est soit un nombre (jusque 99), soit un glyphe prédéfini.

L’idée est la meme qu’avec les Tiles : les badges sont créés à partir d’un XML qui les décrit. Il faut créer un BadgeNotification à partir de l’XML, et l’envoyer avec BadgeUpdater.

// set badge
var badgeXml = BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeGlyph);
var badgeElement = (XmlElement)badgeXml.SelectSingleNode("/badge");
badgeElement.SetAttribute("value", "activity");

var badge = new BadgeNotification(badgeXml);
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badge);

 

Dans cet exemple, j’ai ajouté le Badge « activity ». Le Tile ressemble à :

Pour montrer un numéro au lieu d’un glyphe, entrez juste un nombre au lieu du nom du glyphe.

List of badge glyphs.

Effacer un badge

Pour effacer un badge :

BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();

 

Conclusion

Les Live Tiles ont un potentiel énorme. Le fait que vous pouvez montrer des informations relevantes et à jour à l’utilisateur de manière si simple peut donner une excellente expérience utilisateur. La clé ici est « relevant ». Si c’est pour donner des infos pour le plaisir d’afficher quelque chose, ça va devenir un tsunami d’info sur l’écran de démarrage qui va donner le tournis à l’utilisateur et annuler les bénéfices. Comme pour tout : utiliser peu, mais bien.

Les sources d’une petite appli qui montre comment faire un Live Tile et ajouter un badge :

Sources

Comments powered by Disqus