Community Days 2013 Catania, 20 e 21 maggio 2013. Lavorare con tile, badge e notification nelle applicazioni Windows 8 Basic tiles Secondary tiles Live tiles Badge notification Toast notification

2. Grazie a
Sponsor

3. Agenda
•
•
•
•
•
Basic tiles
Secondary tiles
Live tiles
Badge notification
Toast notification

4. Live tiles, badge, toast notifications
Visual tour:
understanding the Windows 8
Start Screen experience

5. Windows 8 Start Screen Visual Tour
DEMO

6. Basic Tiles
• Tap per lanciare o riattivare un’app
• Porta dell’applicazione ma anche finestra
• Configurare le tile predefinite dell’app nel
package.appxmanifest
• Tile quadrate e/o estese
–
–
Square (obbligatoria)150x150 pixel
Wide (facoltativa) 310x150 pixel
• Logo, nome, e altro…

7. Configurazione delle Tiles in Visual Studio 2012
DEMO

8. Secondary Tile
•
•
•
•
•
•
•
•
Sono riquadri secondari della stessa applicazione
Un riquadro secondario consente a un utente di accedere direttamente dalla schermata
Start, a un percorso o esperienza specifica nell'app.
L'app decide quale contenuto opzionale offrire, ma l'utente sceglie se creare e eliminare il
riquadro secondario (pin to start). In questo modo gli utenti possono personalizzare la
schermata Start con le esperienze che utilizzano di più.
Es. Ricettario  Ricetta preferita, oppure Contatti  contatti più usati
Un riquadro secondario non dipende da quello dell'applicazione principale ed è in grado di
ricevere in modo indipendente delle tile notifications.
Parametri di avvio indipendenti
Disinstallando l’app viene indicato all’utente che verranno rimossi anche le tile secondarie.
L’utente può decidere di rimuovere (unpin) le tile secondarie dallo start screen (le app
possono fornire metodo interno di unpin)

9. Pin/Unpin SecondaryTile
Creazione istanza
SecondaryTile secondaryTile = new SecondaryTile(
appbarTileId,
shortName,
displayName,
tileActivationArguments,
TileOptions.ShowNameOnLogo,
logo);
Verifica esistenza
bool exist= SecondaryTile.Exists(appbarTileId);
Pin (necessariamente async)
bool isPinned= await secondaryTile.RequestCreateForSelectionAsync(…);
Unpin
bool isUnpinned = await secondaryTile.RequestDeleteForSelectionAsync(…);
List
var secondaryTiles = await SecondaryTile.FindAllAsync();

10. Live tile
• Comunicare all’utente,
invogliare ad utilizzare
l’app: app «viva»
anche se non è in
esecuzione.
• Sia tile Square che
Wide possono
ricevere notifiche

11. 4 notification delivery method
Metodo
Utilizzabile con
Descrizione
Local
Tile, badge, toast
Invio notifica quando l’app è in
esecuzione, per aggiornare tile o badge, o
visualizzare toast
Scheduled
Tile, toast
Pianifica l’istante in cui eseguire la notifica
Periodic
Tile, badge
Notifiche ad intervalli regolari che
recuperano nuovi dati da servizi web
Push
Tile, badge, toast, raw Notifiche inviate da un cloud service,
anche con app non in esecuzione

12. tile notification = XML
XML Schema
<tile>
<visual>
<binding
</binding>
</visual>
</tile>
template = "TileSquareImage" | "TileSquareBlock" | TileSquareText01"
| "TileSquareText02" | ...
fallback? = string
lang? = string
baseUri? = anyURI
branding? = "none" | "logo" | "name"
addImageQuery? = boolean >
<!– Child elements -->
( image | text )*

13. Tile Templates
• Square tiles
• Wide tiles
• Live tiles

14. Esempio Tile Template
TileTemplate.TileWidePeekImageCollection05
<tile>
<visual>
<binding template="TileWidePeekImageCollection05">
<image id="1" src="image1.png" alt="alt
<image id="2" src="image2.png" alt="alt
<image id="3" src="image3.png" alt="alt
<image id="4" src="image4.png" alt="alt
<image id="5" src="image5.png" alt="alt
<image id="6" src="image6.png" alt="alt
<text id="1">Text Header Field 1</text>
<text id="2">Text Field 2</text>
</binding>
</visual>
</tile>
text"/>
text"/>
text"/>
text"/>
text"/>
text"/>

15. Invio di tile notification 1/2
•
Specifica di un modello per la notifica (quadrati, estesi, animati)
•
•
Recupero del contenuto XML vuoto del modello
Aggiunta di testi/immagini alla notifica
•
Combinazione in un unico pacchetto delle versioni estesa e quadrata della
notifica
Impostazione di una scadenza per la notifica
Invio dell'aggiornamento al riquadro come notifica locale o scheduling
temporale
Fino a 5 notification in coda
•
•
•
– Template catalog http://msdn.microsoft.com/itit/library/windows/apps/hh761491.aspx
– (immagini dimensioni max 1024x1024 pixel e 200Kb)

16. Invio di tile notification 2/2
1) XmlDocument xmlDoc= TileUpdateManager.GetTemplateContent(TileTemplate)
<tile>
<visual>
<binding template="TileWideImageAndText01">
<image id="1" src=""/>
<text id="1"></text>
</binding>
<binding …>
</binding>
</visual>
</tile>
2)ITileNotification notification=new TileNotification()
3)TileUpdater updater= TileUpdateManager.CreateTileUpdaterForApplication();
4)updater.Update(notification);

17. SecondaryTile Notification
analoghe alle tiles principali, basta creare il TileUpdater con il metodo apposito:
TileUpdater updater=
TileUpdateManager.CreateTileUpdaterForSecondaryTile(tileId);

18. NotificationExtensions
• è possibile velocizzare l’intero processo di creazione di notifiche, su
tile, badge e toast tramite l’uso di una libreria esterna,
denominata NotificationsExtensions
• Modello ad oggetti, evita di usare XML DOM
• Evito errori di formato XML
• Intellisense (tag e attributi come proprietà)
• Classi factory per la creazione delle notifiche
• Semplifica l’inclusione di square e wide tile in un singolo payload
• Licenza MS-LPL (reuse and customize in Windows Store e Web)

19. Tile notifications
DEMO

20. Badge overview
• Le notifiche di badge consentono
di visualizzare sulle tile di un’app
informazioni di riepilogo relative
allo stato dell’app stessa
• Numeriche (un numero da 1 a 99)
o grafiche (glyph)
• Se > 99 mostra 99+, se 0 elimina la
notifica

21. Badge numerici
Valore
Esempio di notifica
XML
Un numero da 1 a 99. Un
valore 0 equivale al valore
di glifo "none", per cui la
notifica verrà cancellata.
<badge value="1"/>
Qualsiasi numero
superiore a 99.
<badge value="100"/>

22. Badge grafici
<badge value="none"/>
newMessage
<badge value="newMessage"/>
activity
<badge value="activity"/>
paused
<badge value="paused"/>
alert
<badge value="alert"/>
playing
<badge value="playing"/>
available
<badge value="available"/>
unavailable
<badge value="unavailable"/>
away
<badge value="away"/>
error
<badge value="error"/>
busy
<badge value="busy"/>
attention
<badge value="attention"/>
none
No badge

23. Invio di badge notification
xml=BadgeUpdateManager.GetTemplateContent(BadgeTemplateType.BadgeNumber);
XmlElement badgeElement = (XmlElement)xml.SelectSingleNode("/badge");
badgeElement.SetAttribute("value", number);
BadgeNotification notification=new BadgeNotification(xml);
notification.ExpirationTime = DateTimeOffset.Now.AddSeconds(15);
BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(notification);

24. Badge notifications
DEMO

25. Periodic Notifications 1/3
• Le notifiche periodiche aggiornano tile e badge
ad intervalli regolari
• XML ottenuto mediante polling di servizio
web/cloud
• L’app deve specificare
– url (fino a 5 contemporanei) da interrogare per
ottenere contenuto aggiornato
– Istante della prima richiesta e intervallo di tempo fra
richieste periodiche successive

26. Periodic Notifications 2/3
enum PeriodicUpdateRecurrence
HalfHour
Poll every half an hour.
Hour
Poll every hour.
SixHours
Poll every 6 hours.
TwelveHours Poll every 12 hours.
Daily
Poll once a day.
Nota 1: Windows può ritardare il polling fino a 15 min
Nota 2: servizio non disponibile, non verrà contattato fino all'intervallo di polling succ.

27. Periodic Notifications 3/3
• updater.StartPeriodicUpdate(url, time, recurrence)
• Per tile in batch fino a 5 url in coda: StartPeriodicUpdateBatch(…)
– In questo caso EnableNotificationQueue(true)
• Identificazione notifica con tag X-WNS-Tag:[tag]
– Esempio X-WNS-Tag: stockMSFT
• Expiration con X-WNS-Expires:[http Date]
– Esempio X-WNS-Expires: Tue, 21 May 2013 18:49:37 GMT

28. Periodic notifications
DEMO

29. Toast notifications
•
•
•
•
•
•
Avvisi di tipo popup
Comunicazioni all’utente anche se app non in esecuzione
Abilitare ToastCapable in package.appxmanifest  pannello PC Settings: Notifications
Contengono testo e eventualmente suoni e immagini
Durata Short o Long
Ricorrenza (fino a 5 volte, a distanza temporale da 60 sec a 60 min)

30. Toast notifications audio
• È possibile scegliere audio
– Non continuo (riprodotto una sola volta)
– Continuo in loop (per toast con durata long e loop)
– Nessuno <audio silent=true/>
• Il tipo di suono si specifica con il tag audio e
attributo src:
– ms-winsoundevent:[nomesuono]
– Esempio
• ms-winsoundevent:Notification.Mail
• ms-winsoundevent: Notification.Looping.Call

31. Toast notifications
• Scegliere un Template (http://msdn.microsoft.com/itit/library/windows/apps/hh761491.aspx)
• Impostare contenuto e attributi/Creare da string xml
• Visualizzare la notifica
• Schedulare la notifica
• Lanciare app con argomenti da toast (launch)
• n.b. Non funzionano sul simulatore (notifiche
disabilitate)
• Verifica se notifiche abilitate con ToastNotifier.Setting

32. Toast notifications
DEMO

33. Q&A
Tutto il materiale di questa sessione su
http://www.communitydays.it/
#CDays13CT