[WPDev] Trucs et astuces sur la mise à jour Tiles dans Windows Phone Mango

This article is also available in english.

Dans les dernières applications Windows Phone publiées sur lesquelles j'ai travaillé, comme Foursquare, Flickr ou TuneIn (et d'autres sont à venir), toutes ont des Live Tiles, à la fois en mode Pull et générées localement. Mais il y a quelques petites choses à savoir pour les utiliser efficacement, et vous allez les découvrir en lisant cet article.

Les Live Tiles sont fonctionnalité très puissante, laissant l'utilisateur personnaliser l'écran d'acceuil à sa manière, sans personne ne le forçant à avoir un Tile qu'il ne veut pas. C'est le même raisonnement derrière l'absence d'API pour ajouter des éléments dans la barre des tâches de Windows 7.

Live Tiles en mode Pull

Dans l'application Foursquare, il y a le Tile principal qui est mis à jour via le modèle Pull, à peu près toutes les heures (et le "a peu près" a une signification très forte).

Ce Tile qui affiche le tableau des scores est construit dans un service Azure en utilisant un rendu WPF offscreen, sur la base des demandes du moteur de Tiles. Cet Tile a été construit de cette manière en raison des capacités limitées de Nodo, où les Background Agents n'étaient pas disponibles pour la génération locale d'images.

Avec Windows Phone NoDo, de nombreux utilisateurs se plaignaient que le Tile ne se mettait pas à jour, et très franchement, cela a été un mystère jusqu'à la fin. Il se trouvait alors que les Tiles étaient mise à jour sur certains appareils, mais pas sur d'autres, et uniquement si la batterie était chargée à plus de 50%.

De plus, ces Tiles ne se mette pas à jour si l'appareil est en veille, seulement quand l'utilisateur visualise l'écran d'accueil, et lorsque le delai minimal de mise à jour a expiré. Je dis «semble», car il semble que les règles derrière cette mise à jour de Tiles n'étaient pas claires, voire buggées.

Cela a bien changé avec Mango. Les Tiles en mode Pull sont mises à jour presque tout le temps, car la règle de la batterie à plus de 50% semble toujours appliquée.

Il y a aussi la règle des taille de fichier 80Ko à ne pas dépasser, sinon votre Tile ne sera pas affiché.

Live Tiles mis à jour par code

Dans Foursquare, l'utilisateur peut choisir d'épingler un Live Tile d'un endroit connu à son écran principal pour y accéder facilement.

La mise à jour de ces Tiles peut être effectuée avec l'API ShellTile, et avec laquelle il est possible de définir quatre éléments:

  • Un titre pour les faces avant et arrière
  • Une URL de l'image sur les faces avant et arrière
  • Un texte de quatre lignes sur le verso
  • Un nombre sur la face avant (pour afficher compteur de notifications, par exemple)
  • Et vous pouvez oublier les Tiles animées comme le Hub des personnes

Bien que toutes ces fonctionnalités soient intéressantes, une seule d'entre elles est en fait très utile: les URL d'images.

Toutes les autres propriétés ne sont pas stylable, ne suivent que les couleurs du système, et ne se prêtent pas très bien à etre utilisées avec du contenu généré par l'utilisateur. Dans le cas de Foursquare, Flickr et TuneIn, les images affichées sont du contenu fourni par les utilisateurs, et avoir un text blanc sur un fond blanc n'est pas très utile.

Au sujet des URL d'images, il est possible de donner une URL externe pour l'image de la Tile, mais le contenu est visible tant que le téléphone ne redémarre pas. Si l'appareil est redémarré, le Tile perd son contenu. Un comportement assez étrange, selon moi.

Utiliser le nouveau schéma d'URI isostore

Heureusement, il est désormais possible de stocker l'image localement dans un dossier spécial dans le répertoire Isolated Storage nommé /Shared/ShellContent, et d'utiliser le nouveau préfixe URI "isostore".

Cela signifie que vous pouvez télécharger l'image à afficher puis la stocker dans l'isolated storage, et l'utiliser à partir de là comme ceci : "isostore:/Shared/ShellContent/MyTile.jpg".

Mais il y a un gros problème en utilisant de cette technique: il n'est pas possible de limiter la taille de l'image téléchargée. Donc, si le fichier est plus gros que 80Ko, vous êtes coincé avec la couleur du thème de l'utilisateur.

D'ailleurs, je serais curieux de connaître l'histoire derrière le préfixe isostore, car il n'y a que deux endroits où il est possible de l'utiliser, les bases de données SQL CE et Live Tiles. Ce préfixe ne peut pas être utilisé sur la propriété Source pour les contrôles Image, même si il serait très utile. Mais je m'égare.

Génération Live Tiles

Heureusement, il est tout à fait possible de générer localement le contenu d'une Tile en entier, en utilisant la méthode WriteableBitmap.Render. Cette méthode permet le rendu hors-écran de n'importe quel UIElement, puis de le persister en utilisant la méthode d'extension SaveJpeg.

Les Tiles pour Foursquare, Flickr et TuneIn sont générés de cette manière, en utilisant un contrôle utilisateur qu'un vrai Designer (oui, oui) a créé. Cela donne de beaux Tiles, et la mise en page comme le style peuvent être mis à jour en fonction de contenu dynamique.

Voici quelques trucs pour générer des Tiles:

  • Le «nouveau» (presque) contrôle Silverlight 4 ViewBox est très pratique pour redimensionner le texte pour s'adapter la taille 173x173,
  • Vous pouvez utiliser un contrôle Image dans votre source de rendu, mais vous devez attendre que le BitmapImage (et non pas l'image) lève l'événement ImageLoaded, (Les Reactive Extensions peuvent être très pratiques pour ça)
  • Vous aurez également besoin d'appliquer CreateOptions à None sur votre BitmapImage pour vous assurer que l'image est téléchargée immédiatement,
  • Si vous téléchargez des images, assurez vous d'avoir une image locale par défaut en dessous, au cas où l'image distante ne puisse pas être téléchargée,
  • Avant de rendre le contenu, assurez-vous d'appeler les méthodes Measure et Arrange pour forcer la mise à la taille de 173x173 requise pour les Tiles.
  • Vous pourriez avoir besoin d'appeler Measure et Arrange plusieurs fois, puisque pour une raison obscure, le contrôle devant être rendu peuvent ignorer un temps ces deux commandes. Vérifiez les valeurs des propriétés ActualHeight et ActualWidth pour voir si elles sont correctes.
  • Assurez-vous de rendre votre Tile avant de le placer sur l'écran d'accueil ! L'application est complètement stoppée lorsque vous appelez la commande de Pinning, et l'utilisateur peut ne pas revenir à votre application et vous permettre de finir le rendu d'image.
  • Ne prenez pas trop de temps à rendre votre Tile, parceque si vous attendez trop, l'expérience utilisateur est assez mauvaise. Cela peut certainement être un défi lorsque du téléchargement de contenu est à afficher dans le Tile.

Mais si vous utilisez cette technique, vous ne pouvez rafraîchir vos Tiles que lorsque l'application est exécutée, sauf si vous utilisez la nouvelle fonctionnalité Background Agents de Mango.

Mise à jour des Tiles avec des Background Agents

Les Background Agents sont la méthode proposée par Microsoft pour laisser des applications tierces exécuter du code en arrière plan, mais avec quelques restrictions importantes, comme la mémoire (4 Mo), l'intervalle d'exécution (30 minutes) ou les limites de la durée (15 secondes) pour des tâches périodiques.

Voici quelques astuces à propos des Background Agents:

  • Les agents périodiques s'exécutent à un intervalle de 30 minutes, non configurable. Alors soyez gentils, vous pouvez ajouter de la logique pour éviter de mettre à jour les Tiles trop souvent, comme par exemple ne pas rafraîchir pendant la nuit, et mettre à jour le Tile toutes les 3 à 6 heures.
  • N'attendez pas trop pour générer les Tiles, ces 15 secondes passent très vite. Votre tâche peut se aussi se faire terminer par le système d'exploitation avant cette durée.
  • Ne vous reposez pas uniquement sur l'exécution de l'agent pour mettre à jour vos Tiles, l'utilisateur peut désactiver votre agent en utilisant les Paramètres / Applications / Tâches en arrière plan. Aussi, le système d'exploitation peut l'empêcher de s'exécuter, si cela devient nécessaire.
  • Abusez de la fonction ScheduledActionService LaunchForTest pour tester votre agent,
  • Un agent exécute votre code dans un processus différent de celui de votre application, ce qui signifie que votre application et l'agent peuvent s'exécuter en même temps. Prêtez attention aux des ressources partagées, comme les bases de données ou les fichiers du Isolated Storage.
  • Si vous mettez vos Tiles à jour à la fois dans votre application et votre agent, vous pouvez avoir besoin d'ajouter quelques IPC en utilisant un bon vieux Mutex nommé (ahh, le bon vieux temps) et de synchroniser l'accès à vos ressources.
  • Evitez de référencer trop d'assemblies dans votre agent, il y a beaucoup d'API non prises en charge qui peuvent faire échouer la certification de votre application au Marketplace .
Vous pouvez pre-valider vous même votre application en utilisant les tests automatisés du kit de test du Marketplace.

A propos du premier point, si je comprends très bien les inquiétudes sur la consommation d'énergie pour les tâches executées à moins de 30 minutes, je ne comprends toujours pas pourquoi cet intervalle ne peut être réglé plus grand, pour éviter ce même problème de consommation d'energie. Il doit aussi être une histoire derrière tout ca...

Enfin sur le dernier point, pendant la phase bêta du SDK de Mango, la classe StandardTileData a été considérée comme une API non prise en charge, ce qui rendait la mise à jour automatique des Tiles en tâche de fond impossible. Cela a changé depuis la RC du SDK et il est maintenant possible de mettre à jour les Tiles par des agents.

Amusez-vous biens avec les Tiles!

Publié samedi 1 octobre 2011 10:06 par jay
Classé sous , , , ,
Ce post vous a plu ? Ajoutez le dans vos favoris pour ne pas perdre de temps à le retrouver le jour où vous en aurez besoin :

Commentaires


Les 10 derniers blogs postés

- Office 365: Script PowerShell pour auditer l’usage des Office Groups de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 11:02

- Office 365: Script PowerShell pour auditer l’usage de Microsoft Teams de votre tenant par Blog Technique de Romelard Fabrice le 04-26-2019, 10:39

- Office 365: Script PowerShell pour auditer l’usage de OneDrive for Business de votre tenant par Blog Technique de Romelard Fabrice le 04-25-2019, 15:13

- Office 365: Script PowerShell pour auditer l’usage de SharePoint Online de votre tenant par Blog Technique de Romelard Fabrice le 02-27-2019, 13:39

- Office 365: Script PowerShell pour auditer l’usage d’Exchange Online de votre tenant par Blog Technique de Romelard Fabrice le 02-25-2019, 15:07

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Stream Portal par Blog Technique de Romelard Fabrice le 02-21-2019, 17:56

- Office 365: Script PowerShell pour auditer le contenu de son Office 365 Video Portal par Blog Technique de Romelard Fabrice le 02-18-2019, 18:56

- Office 365: Script PowerShell pour extraire les Audit Log basés sur des filtres fournis par Blog Technique de Romelard Fabrice le 01-28-2019, 16:13

- SharePoint Online: Script PowerShell pour désactiver l’Option IRM des sites SPO non autorisés par Blog Technique de Romelard Fabrice le 12-14-2018, 13:01

- SharePoint Online: Script PowerShell pour supprimer une colonne dans tous les sites d’une collection par Blog Technique de Romelard Fabrice le 11-27-2018, 18:01