Démarrage rapide : utilisation de la bibliothèque NotificationsExtensions dans votre code (HTML)

  • Article

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Remarque  Vous n’utilisez pas JavaScript ? Voir Démarrage rapide : utilisation de la bibliothèque NotificationsExtensions dans votre code (XAML).

 

La bibliothèque de modèles d’objets NotificationsExtensions vous permet de fournir du contenu de modèle XML de notification toast, de badge et par vignette sans utiliser le modèle DOM (Document Object Model) XML. Elle permet de fournir du contenu de notification plus facilement, plus clairement et plus directement. L’utilisation de cette bibliothèque dans Microsoft Visual Studio permet de bénéficier des avantages suivants :

  • IntelliSense, qui répertorie les balises et attributs disponibles sous forme de propriétés d’objets, et qui vous évite d’avoir à consulter la documentation de schéma pour obtenir les éléments et la structure.
  • Une fonction de fabrique par le biais de laquelle vous pouvez créer des notifications squelette que vous pouvez alors remplir avec votre contenu.
  • Une manière simplifiée d’inclure plusieurs tailles de vignettes dans votre charge utile de notification (il s’agit d’une meilleure pratique).
  • Une manière utile de rechercher et de remplir des attributs de texte et d’image, qui sont nommés afin de fournir davantage d’informations sur leurs utilisation, taille et position prévues dans le modèle.

Remarque  La bibliothèque NotificationsExtensions est publiée sous licence MS-LPL (Microsoft Limited Public License). Vous pouvez la réutiliser dans votre application du Windows Store ou votre service Web, et la personnaliser, si nécessaire, pour votre application.

 

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 du Windows Store élémentaire en JavaScript à l’aide des API Windows Runtime. Pour plus d’informations, voir Créer votre première application du Windows Store en JavaScript.
  • Une connaissance de base du langage XML vous permettra de mieux comprendre ce que la bibliothèque NotificationsExtensions crée pour vous.

Instructions

1. Obtenir la bibliothèque NotificationsExtensions

La bibliothèque NotificationsExtensions est incluse dans plusieurs exemples de vignettes, toasts et notifications téléchargeables et vous pouvez la copier à partir de ces exemples pour votre propre usage. Dans cette procédure, nous utiliserons l’exemple de vignettes et de badges de base.

Remarque  NotificationsExtensions est une bibliothèque C#, mais vous pouvez l’utiliser dans des projets JavaScript, C#, C++ et Microsoft Visual Basic.

 

  1. Téléchargez l’exemple de vignettes et de badges d’application à partir du Centre de développement Windows.
  2. Décompressez le fichier .zip de l’exemple de vignettes et de badges d’application dans un dossier de votre choix.
  3. Accédez au dossier dans lequel vous avez décompressé l’exemple. Copiez le dossier NotificationsExtensions de l’exemple dans le répertoire de votre projet en tant que frère du fichier .sln de votre projet.

2. Inclure la bibliothèque dans votre projet

  1. Lancez Visual Studio et ouvrez votre projet.
  2. Dans l’Explorateur de projets, cliquez avec le bouton droit sur la solution en haut de l’arborescence.
  3. Sélectionnez Ajouter, puis Projet existant.
  4. Accédez au dossier NotificationsExtensions dans votre projet et sélectionnez le fichier NotificationsExtensions.csproj.
  5. Dans chaque projet de votre solution, cliquez avec le bouton droit sur Références et sélectionnez Ajouter une référence.
  6. Dans le Gestionnaire de références, sous Solution, sélectionnez NotificationsExtensions puis cliquez sur OK. À ce stade, NotificationsExtensions est prêt à être utilisé.

Remarque  Si vous ne souhaitez pas inclure le projet NotificationsExtensions complet dans votre solution, vous pouvez générer NotificationsExtensions comme projet autonome et simplement inclure le fichier NotificationsExtensions.winmd comme référence dans votre projet.

 

3. Inclure la bibliothèque sur votre serveur d’applications

Vous pouvez également utiliser NotificationsExtensions dans votre code de serveur d’applications si vous utilisez ASP.NET pour envoyer des notifications Push aux services de notifications Push Windows (WNS). Il en est de même si vous implémentez un service ASP.NET pour gérer les demandes de mises à jour périodiques de vignettes ou de badges. La seule réserve tient au fait que vous devez ajouter le symbole de build de compilation WINRT_NOT_PRESENT dans les propriétés du projet NotificationsExtensions.

  1. Accédez au répertoire dans lequel vous avez décompressé l’exemple. Ouvrez le dossier de l’exemple et copiez son dossier NotificationsExtensions dans un nouvel emplacement de votre choix.

  2. Sélectionnez le fichier NotificationsExtensions.csproj pour ouvrir le projet dans Visual Studio.

  3. Dans le menu Projet, sélectionnez Propriétés de NotificationsExtensions.

  4. Modifiez la sélection de Type de sortie en la remplaçant par « Bibliothèque de classes » pour générer un fichier DLL.

  5. Dans les propriétés de NotificationsExtensions, sélectionnez l’onglet Générer.

  6. Sous la catégorie Général, ajoutez « WINRT_NOT_PRESENT » dans la zone Symboles de compilation conditionnelle. Si cette zone contient déjà d’autres symboles, ajoutez un point-virgule comme séparateur avant « WINRT_NOT_PRESENT ».

  7. Appuyez sur F7 ou utilisez l’option Générer > Générer la solution pour générer le projet.

  8. Copiez le fichier NotificationsExtensions.dll généré de votre dossier (sous \NotificationsExtensions\bin\Debug\) vers votre code de serveur d’applications.

4. Utiliser la bibliothèque dans votre code

La bibliothèque NotificationsExtensions peut à présent être utilisée en tant qu’objet dans votre code. Elle contient trois membres dignes d’intérêt :

  • BadgeContent
  • TileContent
  • ToastContent

Chacun de ces types de contenu contient lui-même des membres qui représentent les éléments et attributs de chaque type.

L’exemple ci-dessous utilise NotificationsExtensions pour affecter une valeur à un badge numérique puis l’envoyer à la vignette.


var badgeContent = NotificationsExtensions.BadgeContent.BadgeNumericNotificationContent(85);
var badgeNotification = badgeContent.createNotification();

Windows.UI.Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

À des fins de comparaison, il montre la même procédure sans NotificationsExtensions, avec une manipulation directe du modèle DOM XML.


var notifications = Windows.UI.Notifications;                        
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(notifications.BadgeTemplateType.badgeNumber);
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "85");
var badgeNotification = new notifications.BadgeNotification(badgeXml);

BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

L’exemple suivant utilise NotificationsExtensions pour fournir du texte dans une notification par vignette. La première étape utilise la fonction TileContentFactory de NotificationsExtensions pour créer un objet basé sur un modèle spécifique. Il existe une fonction de création distincte pour chaque modèle. Il suffit d’attacher le mot « create » au nom du modèle, par exemple « createTileWide310x150ImageAndText01 ».

L’objet basé sur le modèle utilise ensuite IntelliSense pour montrer les éléments disponibles dans ce modèle comme propriétés nommées d’après leur fonction, par exemple textHeading, textBodyWrap, textBody1 ou textColumn1Row4. Cela vous permet de savoir précisément quel élément vous assignez.

Une fois que vous avez affecté des valeurs aux propriétés, envoyez normalement la notification par vignette.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text01();

tileContent.textHeading.text = "Hello!";
tileContent.textBody1.text = "One";
tileContent.textBody2.text = "Two";
tileContent.textBody3.text = "Three";

var tileNotification = tileContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Cet exemple utilise NotificationsExtentions pour affecter du texte et une image à une notification. Comme pour le texte, les éléments de l’image sont affichés comme propriétés nommées conformément à leur fonction dans le modèle, par exemple imageMain et imageSmallColumn2Row2.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150ImageAndText01();

tileContent.textCaptionWrap.text = "This tile notification uses ms-appx images";

tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.alt = "A red rectangle";

Cet exemple utilise NotificationsExtensions pour définir une notification par vignette complète. Il illustre l’une des particularités de cette bibliothèque : l’ordre dans lequel vous ajoutez les tailles de modèles à la charge utile a une importance.

  • Un petit modèle (carré de 71 x 71, Windows Phone 8.1 uniquement) peut être ajouté seulement à un modèle de taille moyenne.
  • Un modèle de taille moyenne (carré de 150 x 150) peut être ajouté seulement à un modèle large.
  • Un modèle large peut être ajouté seulement à un grand modèle (carré de 310 x 310, Windows uniquement).

Si vous essayez de procéder dans un ordre différent, vous constaterez que les propriétés nécessaires ne sont pas disponibles.


var tileLargeContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileLargeContent.textHeadingWrap.text = "Lorem ipsum dolor sit amet, consectetur";
tileLargeContent.textHeading1.text = "Lorem ipsumo";
tileLargeContent.textHeading2.text = "Lorem ipsumo";
tileLargeContent.textBody1.text = "VivAmus tincidunt convallis urn";
tileLargeContent.textBody2.text = "VivAmus tincidunt convallis urn";

var tileWideContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text04();
tileWideContent.textBodyWrap.text = "Lorem ipsum dolor sit amet, consectetur";

var tileMediumContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Block();
tileMediumContent.textBlock.text = "24";
tileMediumContent.textSubBlock.text = "Aliquam";
        
tileWideContent.square150x150Content = tileMediumContent;
tileLargeContent.wide310x150Content = tileWideContent;

var tileNotification = tileLargeContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Cet exemple utilise NotificationsExtensions pour fournir du contenu pour une notification toast, y compris les paramètres de texte, d’images, audio, de durée et de lancement.


var toastContent = NotificationsExtensions.ToastContent.ToastContentFactory.createToastImageAndText01();

toastContent.textBodyWrap.text = "Lorem ipsum dolor sit amet";

toastContent.image.src = "ms-appx:///images/redWide.png";
toastContent.image.alt = "A red rectangle";

toastContent.audio.content = NotificationsExtensions.ToastContent.ToastAudioContent.loopingAlarm;
toastContent.audio.loop = true;

toastContent.duration = NotificationsExtensions.ToastContent.ToastDuration.long;

toastContent.launch = '{"type":"toast","param1":"12345","param2":"67890"}';

var toast = toastContent.createNotification();
Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toast);

Récapitulatif

Cette rubrique vous a montré comment utiliser NotificationsExtensions pour simplifier la création de notifications de badge, par vignette et toast. Cette approche du remplissage d’un modèle est plus simple que celle consistant à manipuler directement le modèle DOM XML.