Accueil Nos publications Blog Les tuiles dynamiques avec Windows 10

.NET Mobilité

Niveau

20/10/2016 5 min

Les tuiles dynamiques avec Windows 10

Au cours de cet article, nous verrons dans un premier temps les nouveautés des tuiles dynamiques par rapport à Windows 8.1 et nous verrons donc tous les nouveaux formats de tuile que nous pouvons créer.
Nous aborderons donc par la suite les différentes manières de créer nos tuiles et verrons des exemples concrets.

L’existant

Windows 8.1 nous donne la possibilité de mettre en place des tuiles qui permettent à l’application de notifier l’utilisateur d’informations en attente de lecture, telles les mails ou les nouveaux articles à lire sur des applications d’informations (cf Eurosport sur Windows phone).
Néanmoins, les formats de tuiles sont plutôt standards et ne permettent pas de mettre en forme celles-ci comme on le souhaiterait.
Comme on peut le voir un grand nombre de ces formats ne sont pas supportés sur Windows Phone 8.1, ce qui limite les choix possibles lorsque l’on fait un développement sur tablette et téléphone.

La nouveauté

Avec l’arrivée de Windows 10, un tout nouveau format de tuile s’offre à nous. Elles sont plus agréables pour l’utilisateur et donnent une meilleure image de l’application que l’on est en train de faire.
Pour nous aider à créer des tuiles, il existe aujourd’hui deux outils :

Si l’on suit les informations présentes sur la page suivante, on peut concevoir rapidement nos tuiles. Cependant, nous allons passer en revue certains points.

Dans cet article, je choisis de traiter seulement la construction de tuiles via XML.
Du coup, si on regarde le format des XML, on remarque qu’ils doivent être construits de la sorte :

<tile>
    <visual>
        <binding />
        <binding />
    </visual>
</tile>

Le nœud tile ne porte pas d’informations, si ce n’est la définition d’un objet de type tile.
Le nœud suivant apporte une information qui va être « branding », branding permet d’afficher un petit en bas de la tuile le nom est le logo.
De fait, « branding » est une enum qui contient les propriétés suivantes :

Auto : qui prendra la définition faite de l’appxmanifest
None : on n’affiche rien
Name : on affiche seulement le nom
Logo : affichera seulement le logo
NameAndLogo : qui permet d’afficher le nom et le logo de l’application. Ceci implique d’ajouter l’image correspondante au niveau des assets.

Une attention particulière devra être portée aux devices mobiles, pour lesquels Logo et NameAndLogo n’existent pas ! Du coup, même si cette option est choisie, seul le nom sera visible dans les 2 cas.
Les nœuds binding sont aussi importants et amènent une autre information qui est le template de la tuile. On retrouvera tous les template définis ici
Ainsi que des nouveaux qui nous intéressent plus :

TileMedium
TileSmall
TileWide
TileLarge

Ce sont principalement ces formats que nous utiliserons à présent.
Enfin les nœuds « binding » peuvent contenir 3 types de nœuds :

<image />
<text />
<group >
<subgroup/>
</group>

Image

Le nœud image contient peu de propriétés, mais celles-ci permettent de faire des choses nouvelles !

<image src = string placement? = "inline" | "background" | "peek" alt? = string addImageQuery? = boolean hint-crop? = "none" | "circle" hint-removeMargin? = boolean hint-align? = "stretch" | "left" | "center" | "right" />

Parmi toutes ces propriétés, je vais surtout parler de « hint-crop », qui permet de mettre un masque circulaire au-dessus de l’image et ainsi d’obtenir une image ronde en partant d’une image carrée !

Text

Pour le noeud text, on retrouve quelque chose de plus classique. En effet, seule la propriété « hint-style » est nouvelle et peut prendre comme valeurs :

caption
captionSubtle
body
bodySubtle
base
baseSubtle
subtitle
subtitleSubtle
title
titleSubtle
titleNumeral
subheader
subheaderSubtle
subheaderNumeral
header
headerSubtle
headerNumber

subgroup

Subgroup peut contenir des images et du texte.

<subgroup hint-weight? = [0-100] hint-textStacking? = "top" | "center" | "bottom" />

On pourra donc lui définir une hauteur ainsi qu’une méthode pour empiler les items qu’il contient.

Template de base

Après notre introduction, voici le template de base pour pouvoir créer des tuiles :

<tile>
  <visual>
    <binding template="TileSmall">      
    </binding>
    <binding template="TileMedium">      
    </binding>
    <binding template="TileWide">      
    </binding>
    <binding template="TileLarge">      
    </binding>
  </visual>
</tile>

Exemple

Pour ce premier exemple, j’ai choisi de montrer l’exemple de base présent sur le site de la msdn, qui présente une tuile dynamique simple.

<tile> 
<visual> 
<binding template="TileMedium"> ... </binding> 
<binding template="TileWide"> 
<text hint-style="subtitle">Jennifer Parker</text> 
<text hint-style="captionSubtle">Photos from our trip</text> 
<text hint-style="captionSubtle">Check out these awesome photos I took while in New Zealand!</text> 
</binding> 
<binding template="TileLarge"> ... </binding> 
</visual> 
</tile>

Et voici un exemple plus complexe :

<tile>
  <visual displayName="Seattle" baseUri="Assets/Apps/Weather/">
    <binding template="TileSmall" hint-textStacking="center" hint-overlay="30">
      <image src="Mostly Cloudy-Background.jpg" placement="background"/>
      <text hint-style="body" hint-align="center">Mon</text>
      <text hint-style="base" hint-align="center">63°</text>
    </binding>
    <binding template="TileMedium" branding="name" hint-overlay="30">
      <image src="Mostly Cloudy-Background.jpg" placement="background"/>
      <group>
        <subgroup>
          <text hint-align="center">Mon</text>
          <image src="Mostly Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">63°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup>
          <text hint-align="center">Tue</text>
          <image src="Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">57°</text>
          <text hint-style="captionSubtle" hint-align="center">38°</text>
        </subgroup>
      </group>
    </binding>
    <binding template="TileWide" branding="nameAndLogo" hint-overlay="30">
      <image src="Mostly Cloudy-Background.jpg" placement="background"/>
      <group>
        <subgroup hint-weight="1">
          <text hint-align="center">Mon</text>
          <image src="Mostly Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">63°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Tue</text>
          <image src="Cloudy.png" hint-removeMargin="true"/>
          <text hint-align="center">57°</text>
          <text hint-style="captionSubtle" hint-align="center">38°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Wed</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">59°</text>
          <text hint-style="captionSubtle" hint-align="center">43°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Thu</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">62°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Fri</text>
          <image src="Sunny.png" hint-removeMargin="true"/>
          <text hint-align="center">71°</text>
          <text hint-style="captionSubtle" hint-align="center">66°</text>
        </subgroup>
      </group>
    </binding>
    <binding template="TileLarge" branding="nameAndLogo" hint-overlay="30">
      <image src="Mostly Cloudy-Background.jpg" placement="background"/>
      <group>
        <subgroup hint-weight="30">
          <image src="Mostly Cloudy-Square.png"/>
        </subgroup>
        <subgroup>
          <text hint-style="base">Monday</text>
          <text>63° / 42°</text>
          <text hint-style="captionSubtle">20% chance of rain</text>
          <text hint-style="captionSubtle">Winds 5 mph NE</text>
        </subgroup>
      </group>      
      <text/>      
      <group>
        <subgroup hint-weight="1">
          <text hint-align="center">Tue</text>
          <image src="Cloudy.png"/>
          <text hint-align="center">57°</text>
          <text hint-style="captionSubtle" hint-align="center">38°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Wed</text>
          <image src="Sunny.png"/>
          <text hint-align="center">59°</text>
          <text hint-style="captionSubtle" hint-align="center">43°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Thu</text>
          <image src="Sunny.png"/>
          <text hint-align="center">62°</text>
          <text hint-style="captionSubtle" hint-align="center">42°</text>
        </subgroup>
        <subgroup hint-weight="1">
          <text hint-align="center">Fri</text>
          <image src="Sunny.png"/>
          <text hint-align="center">71°</text>
          <text hint-style="captionSubtle" hint-align="center">66°</text>
        </subgroup>
      </group>
    </binding>
  </visual>
</tile>

Qui donnera

Comme on peut le voir, il devient facile de créer des tuiles plutôt agréables à utiliser.

Consommer les xml

var updater = TileUpdateManager.CreateTileUpdaterForApplication();
updater.EnableNotificationQueue(true);
updater.Clear();
string monXmlTemplate= «  …  »
Windows.Data.Xml.Dom.XmlDocument tileDOM = new Windows.Data.Xml.Dom.XmlDocument();
tileDOM.LoadXml(tileWide);
TileNotification tile = new TileNotification(tileDOM);
updater.Update(tile);

Et voilà, en faisant cela, vous êtes capable de créer votre tuile et de la consommer.

Dans un backgroundTask

Pour cela il vous faut ajouter un composant windows runtime à votre solution, ajouter une classe et la faire implémenter « IBackgroundTask »
Dans votre application, ajoutez une référence à votre backgroundTask.
Au niveau de votre appxmanifest, ajoutez votre backgroundtask dans la partie « Declarations » et celui-ci sera de type Timer. Entrez le « entry point » qui correspond au namespace de votre backgroundtask et le nom de votre classe.
Pour finir, il vous faut enregistrer votre tâche au niveau de l’app.xaml.cs, en utilisant par exemple cette classe utilitaire :

public static class BackgroundTaskRegisterHelper
    {
        public static async Task RegisterBackgroundTask(string taskName, string entryPoint)
        {
            try
            {
                BackgroundTaskBuilder taskBuilder = new BackgroundTaskBuilder();
                taskBuilder.Name = taskName;
                taskBuilder.TaskEntryPoint = entryPoint;
                //valeur minimale
                taskBuilder.SetTrigger(new TimeTrigger(15, false));
                var registration = taskBuilder.Register();
            }
            catch(Exception ex)
            {
            }
        }
        public static async Task UnregisterBackgroundTask(string taskName)
        {
            try
            {
                var backgroundAccessStatus = await BackgroundExecutionManager.RequestAccessAsync();
                if (backgroundAccessStatus == BackgroundAccessStatus.AlwaysAllowed ||
                    backgroundAccessStatus == BackgroundAccessStatus.AllowedSubjectToSystemPolicy)
                {
                    var task = BackgroundTaskRegistration.AllTasks.FirstOrDefault(t => t.Value.Name == taskName);
                    task.Value.Unregister(true);
                }
            }
            catch(Exception ex)
            {
            }
        }
    }

Enfin, vous devrez faire l’enregistrement de votre background task lors de la navigation vers votre page principale.
Pour le debug, votre BackgroundTask apparaîtra dans la combobox de gestion du cycle de vie de votre application. Lorsque vous la sélectionnerez, vous pourrez entrer dans votre code.

Conclusion

Dans cet article, j’ai montré comment faire les tuiles avec seulement le XML, mais n’oubliez pas que c’est possible aussi en utilisant l’extension et ainsi faire directement la tuile en C#. J’ai préféré une approche simple qui, je l’espère, vous donnera la possibilité de mettre en avant votre application au sein de l’OS Windows et ainsi de faciliter la vie des utilisateurs.

Rédigé par :

Marc Gosselin