Condividi tramite

Guida introduttiva: Uso della raccolta NotificationsExtensions nel codice (HTML)

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Nota  Se non usi JavaScript, vedi Guida introduttiva: Uso della raccolta NotificationsExtensions nel codice (XAML).

 

La raccolta di modelli a oggetti NotificationsExtensions ti consente di fornire il contenuto di modelli XML per riquadri, notifiche e notifiche di tipo avviso popup senza usare DOM (Document Object Model) XML. Offre un metodo più semplice, più chiaro e più diretto per fornire il contenuto della notifica. Quando usi questa raccolta in Microsoft Visual Studio, puoi usufruire dei vantaggi seguenti:

  • IntelliSense, che elenca i tag e gli attributi disponibili sotto forma di proprietà degli oggetti, evitandoti di dover consultare la documentazione dello schema per elementi e struttura.
  • Una funzione factory che ti consente di creare notifiche scheletro a cui aggiungere successivamente i tuoi contenuti.
  • Un modo semplificato per includere dimensioni di riquadro multiple nel payload della notifica (procedura consigliata).
  • Un modo utile per individuare e inserire attributi per testo e immagini, denominati per consentirti di specificare altre informazioni su uso previsto, dimensioni o posizione nel modello.

Nota  La raccolta NotificationsExtensions è rilasciata ai sensi della Licenza pubblica limitata Microsoft. Puoi riusare la raccolta nella tua app di Windows Store o nel servizio Web e, se necessario, personalizzarla.

 

Prerequisiti

  • Conoscenza operativa di termini e concetti correlati a riquadri e notifiche. Per altre informazioni, vedi Riquadri, notifiche e avvisi.
  • Capacità di creare un'app di Windows Store di base in JavaScript usando le API Windows Runtime. Per ulteriori informazioni, vedi Creare la prima app di Windows Store scritta in JavaScript.
  • La conoscenza di base di XML ti consentirà di capire meglio cosa viene creato con la raccolta NotificationsExtensions.

Istruzioni

1. Acquisisci la raccolta NotificationsExtensions

La raccolta NotificationsExtensions è inclusa in diversi esempi scaricabili di riquadri, avvisi popup e notifiche, da cui puoi copiarla per usarla come desideri. Per questa procedura useremo l'esempio dei riquadri e delle notifiche di base.

Nota  NotificationsExtensions è una libreria in C# ma può essere inclusa in e usata con JavaScript, C#, C++ e progetti di Microsoft Visual Basic.

 

  1. Scarica l'Esempio di riquadri e notifiche dell'app da Windows Dev Center.
  2. Decomprimi il file "App tiles and badges sample.zip" nella cartella che preferisci.
  3. Passa alla cartella in cui hai decompresso l'esempio. Copia la cartella NotificationsExtensions dall'esempio alla directory del tuo progetto, allo stesso livello del file .sln del tuo progetto.

2. Includi la raccolta nel tuo progetto

  1. Avvia Visual Studio e apri il progetto.
  2. In Esplora progetti, fai clic con il pulsante destro sulla soluzione nella parte superiore dell'albero.
  3. Seleziona Aggiungi, quindi Progetto esistente.
  4. Passa alla cartella NotificationsExtensions nel tuo progetto e seleziona il file NotificationsExtensions.csproj.
  5. In ciascun progetto della tua soluzione, fai clic con il pulsante destro su Riferimenti e seleziona Aggiungi riferimento.
  6. In Gestione riferimenti, sotto Soluzione, seleziona NotificationsExtensions e fai clic su OK. A questo punto, NotificationsExtensions è pronto all'uso.

Nota  Se non vuoi includere l'intero progetto NotificationsExtensions nella tua soluzione, puoi creare NotificationsExtensions come progetto individuale e semplicemente includere NotificationsExtensions.winmd come riferimento nel tuo progetto.

 

3. Includi la raccolta nel server applicazioni

Puoi usare NotificationsExtensions anche nel codice del server applicazioni se utilizzi ASP.NET per inviare notifiche push a Servizi notifica Push Windows (WNS) o se stai implementando un servizio ASP.NET per la gestione delle richieste di aggiornamento periodico di riquadri o notifiche. L'unica precauzione in questo caso è che devi aggiungere il simbolo di compilazione WINRT_NOT_PRESENT nelle proprietà del progetto NotificationsExtensions.

  1. Passa alla directory in cui hai decompresso l'esempio. Apri la cartella dell'esempio e salva la relativa cartella NotificationsExtensions in un percorso a tua scelta.

  2. Seleziona il file NotificationsExtensions.csproj per aprire il progetto Visual Studio.

  3. Nel menu Progetto scegli Proprietà di NotificationsExtensions.

  4. Cambia il Tipo di output su "Libreria di classi" per generare un file DLL.

  5. Inoltre, in NotificationsExtensions properties, seleziona la scheda Build.

  6. Nella categoria Generale aggiungi "WINRT_NOT_PRESENT" nella casella Simboli di compilazione condizionale. Se la casella contiene già altri simboli, aggiungi un punto e virgola come separatore prima di "WINRT_NOT_PRESENT".

  7. Premi F7 oppure seleziona Compila > Compila soluzione per compilare il progetto.

  8. Copia il file NotificationsExtensions.dll compilato dalla cartella dell'esempio (in \NotificationsExtensions\bin\Debug\) al codice del server applicazioni.

4. Usa la raccolta nel tuo codice

Ora puoi usare NotificationsExtensions come oggetto nel tuo codice. NotificationsExtensions contiene tre membri importanti:

  • BadgeContent
  • TileContent
  • ToastContent

Ognuno di questi tipi di contenuto contiene a sua volta membri che rappresentano gli elementi e gli attributi di ciascun tipo.

In questo esempio NotificationsExtensions viene usato per assegnare un valore a una notifica numerica e quindi inviarla al riquadro.


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

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

Per fornire un confronto, l'esempio seguente mostra la stessa procedura senza NotificationsExtensions, usando la manipolazione diretta di XML DOM.


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'esempio successivo usa NotificationsExtensions per fornire testo in una notifica di tipo riquadro. Nel primo passaggio si usa la funzione NotificationsExtensions TileContentFactory per creare un oggetto basato su un modello specifico. Esiste una funzione create distinta per ogni modello: basta aggiungere la parola "create" al nome del modello, come in "createTileWide310x150ImageAndText01".

L'oggetto basato sul modello fa quindi in modo che IntelliSense visualizzi gli elementi disponibili in quel modello, come proprietà il cui nome dipende dalla funzione, ad esempio textHeading, textBodyWrap, textBody1 o textColumn1Row4. In questo modo puoi sapere subito quale elemento stai assegnando.

Dopo aver assegnato i valori alle proprietà, puoi inviare normalmente la notifica di riquadro.


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);

In questo esempio NotificationsExtensions viene usato per assegnare testo e un'immagine a una notifica. Come nel caso del testo, anche gli elementi immagine sono mostrati come proprietà i cui nomi rimandano alla relativa funzione nel modello, ad esempio imageMain e 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";

Questo esempio usa NotificationsExtensions per definire una notifica di riquadro completa. Ciò illustra una peculiarità di questa raccolta—, l'ordine secondo il quale aggiungi le dimensioni del modello al payload conta.

  • Un modello piccolo (quadrato, 71x71—solo Windows Phone 8.1) può essere aggiunto soltanto a un modello medio.
  • Un modello medio (quadrato, 150x150) può essere aggiunto soltanto a un modello ampio.
  • Un modello ampio può essere aggiunto soltanto a un modello grande (quadrato, 310x310—solo Windows).

Se esegui la procedura in un ordine diverso, vedrai che le proprietà necessarie non sono disponibili.


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);

Questo esempio usa NotificationsExtensions per fornire il contenuto a una notifica di tipo avviso, incluso testo, immagini, audio, durata e parametri di avvio.


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);

In questo argomento abbiamo visto come usare NotificationsExtensions per semplificare la creazione di notifiche di badge, di riquadro e avviso popup. È un modo più diretto per popolare un modello rispetto all'uso di DOM XML.