• Save
Lavorare con tile, badge e notification nelle applicazioni Windows 8
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Lavorare con tile, badge e notification nelle applicazioni Windows 8

on

  • 327 views

Community Days 2013 Catania, ...

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

Statistics

Views

Total Views
327
Views on SlideShare
326
Embed Views
1

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Inserite l’eventuale vostro logo in basso a destra
  • Slide da mostrare prima di iniziare la sessione – non rimuovere!
  • Visualizzazione dello start screen di windows 8Visualizzazione tile primaria, secondaria, square, wide, con live tile offVisualizzazione badgeVisualizza toast notification, per esempio con l’app timer o installando dallo store
  • Visualizzazione dello start screen di windows 8Visualizzazione tile primaria, secondaria, square, wide, con live tile offVisualizzazione badgeVisualizza toast notification, per esempio con l’app timer o installando dallo store
  • Ultima slide, obbligatoria

Lavorare con tile, badge e notification nelle applicazioni Windows 8 Presentation Transcript

  • 1. Grazie a Sponsor
  • 2. Agenda • • • • • Basic tiles Secondary tiles Live tiles Badge notification Toast notification
  • 3. Live tiles, badge, toast notifications Visual tour: understanding the Windows 8 Start Screen experience
  • 4. Windows 8 Start Screen Visual Tour DEMO
  • 5. 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…
  • 6. Configurazione delle Tiles in Visual Studio 2012 DEMO
  • 7. 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)
  • 8. 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();
  • 9. 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
  • 10. 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
  • 11. 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 )*
  • 12. Tile Templates • Square tiles • Wide tiles • Live tiles
  • 13. 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"/>
  • 14. 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)
  • 15. 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);
  • 16. SecondaryTile Notification analoghe alle tiles principali, basta creare il TileUpdater con il metodo apposito: TileUpdater updater= TileUpdateManager.CreateTileUpdaterForSecondaryTile(tileId);
  • 17. 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)
  • 18. Tile notifications DEMO
  • 19. 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
  • 20. 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"/>
  • 21. 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
  • 22. 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);
  • 23. Badge notifications DEMO
  • 24. 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
  • 25. 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.
  • 26. 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
  • 27. Periodic notifications DEMO
  • 28. 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)
  • 29. 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
  • 30. 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
  • 31. Toast notifications DEMO
  • 32. Q&A Tutto il materiale di questa sessione su http://www.communitydays.it/ #CDays13CT