Comment ajouter des images à un modèle de vignette (applications de style Metro en JavaScript et HTML)

[Cette documentation est une version préliminaire qui peut faire l’objet de modifications.]

Cette rubrique explique comment spécifier à la fois des images locales et Web pour les utiliser dans un modèle de vignette.

Ce que vous devez savoir

Technologies

  • Windows Runtime

Prérequis

  • Bonnes connaissances des termes et des concepts de vignette et de notification. Pour plus d’informations, voir Vignettes, badges et notifications.
  • Aptitude à créer une application élémentaire de style Metro en JavaScript à l’aide des API Windows Runtime.

Instructions

Étape 1: Spécifier un modèle comprenant des images

Le code qui suit fait appel au modèle TileWideImageAndText01 qui comprend une seule et unique image étendue. Notez que toutes les images dans l’ensemble des modèles doivent avoir une taille inférieure à 200 Ko et une définition inférieure à 1024 x 1024 pixels.


 var template = Windows.UI.Notifications.TileTemplateType.tileWideImageAndText01;

Étape 2: Récupérer le contenu du modèle

Récupérez un modèle XML vide via la méthode TileUpdateManager.getTemplateContent.


var tileXml  = Windows.UI.Notifications.TileUpdateManager.getTemplateContent(template);

Étape 3: Obtenir les éléments de l’image à partir du modèle

Même si nous savons déjà qu’il n’existe qu’un seul emplacement d’image disponible dans ce modèle, nous pouvons néanmoins utiliser le code suivant avec n’importe quel modèle, quel que soit le nombre d’images qu’il contient.


var tileImageAttributes = tileXml.getElementsByTagName("image");

Étape 4: Affecter une image locale du package de l’application à l’élément de modèle

Ce type d’image est inclus dans votre fichier de solution Microsoft Visual Studio et il est packagé dans l’application, telle une partie de celle-ci. Ces images sont accessibles au moyen du préfixe « ms-appx:/// ».

Plutôt que de parcourir la collection d’éléments image comme s’il existait plusieurs éléments images, nous préférons affecter directement l’image. Notez que la collection est un tableau de base 0. Nous affectons aussi le texte de remplacement pour des besoins d’accessibilité (pour des lecteurs d’écran, par exemple).


tileImageAttributes[0].setAttribute("src", "ms-appx:///images/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

Étape 5: Affecter une image locale issue du stockage local de l’application à l’élément de modèle

Ce type d’image est enregistré par votre application dans son stockage local. Il s’agit de l’emplacement renvoyé par Windows.Storage.ApplicationData.current.localFolder. Ces images sont accessibles au moyen du préfixe « ms-appdata:///local/ ».

Cet exemple reproduit la dernière étape mais se sert du protocole ms-appdata:///local/ pour accéder à une image dans le stockage local de l’application.


tileImageAttributes[0].setAttribute("src", "ms-appdata:///local/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

Étape 6: Affecter une image Web à l’élément de modèle

Cet exemple reproduit la dernière étape mais se sert du protocole http:// pour accéder à une image dans le stockage local de l’application. Vous pouvez également utiliser le protocole https://.


tileImageAttributes[0].setAttribute("src", "http://www.microsoft.com/redWide.png");
tileImageAttributes[0].setAttribute("alt", "red graphic");

L’élément visual dans la charge utile XML de notification par vignette contient l’attribut baseUri. La valeur de l’attribut baseUri offre un chemin d’accès de base, tel que « http://www.microsoft.com/ », associé à des URI (Uniform Resource Identifier) dans l’attribut src de l’image. Si l’attribut baseUri était défini sur « http://www.microsoft.com/ », la ligne qui suit dans l’exemple de code :


 tileImageAttributes[0].setAttribute("src", "http://www.microsoft.com/redWide.png");

peut être raccourcie de la manière suivante :


 tileImageAttributes[0].setAttribute("src", "redWide.png");

Remarques

Si une notification par vignette est munie de plusieurs images, ces images peuvent utiliser une combinaison quelconque de types de source d’image comme le montre cet exemple.

Rubriques associées

Exemple de vignettes et de badges d’application
Schéma XML des vignettes
Tailles des vignettes
Vue d’ensemble des vignettes et des notifications par vignette
Recommandations et liste de vérification sur les vignettes
Comment déterminer si une vignette peut être mise à jour
Comment supprimer une notification par vignette
Comment planifier une notification par vignette
Comment configurer des notifications périodiques pour des vignettes
Comment choisir et utiliser un modèle de vignette
Comment spécifier une vignette carrée et large dans la même notification
Démarrage rapide : création d’une vignette par défaut à l’aide de l’éditeur de manifeste de Visual Studio
Choix d’un modèle de vignette
Windows.UI.Notifications

 

 

Afficher:
© 2015 Microsoft