O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

WP8.1 Tiles and Notifications

4.266 visualizações

Publicada em

在2014 年 4 月 //learn/ - Global Community Webcast Event 微軟全球線上廣播活動中,所講述到有關 Tiles, badges and toasts and action center 的課程。

http://channel9.msdn.com/Blogs/twmvp/Tiles-badges-and-toasts-and-action-center

sample code: http://goo.gl/ydh1tk

Publicada em: Celular

WP8.1 Tiles and Notifications

  1. 1. 2014/04/24 - Global Community Webcast Event Tiles, Badges, Toasts and Action Center Yu-Hsun Lin (Pou) poumason@live.com http://www.dotblogs.com.tw/pou/
  2. 2. This module… Introduction to Tiles and Notifications • How tiles enhance the Windows experience • Tile template examples • Tile terminology • Sending notifications •Managing notifications with the action center
  3. 3. Tiles: What Are They Good For? Tiles are a defining Windows experience Tiles across all screens Initial interaction point for apps Live tiles drive user engagement Essential piece of the Windows brand The alternative to a “good tile” is not “no tile”
  4. 4. Users and Their Tiles Full functionality tiles are #1 driver in high app ratings Secondary tiles a highly sought-after feature among Windows Phone users
  5. 5. Tile Types Windows 8.1 Tile Templates Tiles are cross-platform Windows Phone Tile Templates 40 cross platform tile templates available Full list: http://aka.ms/TileTemplates
  6. 6. Tile Terminology • Peek Second part of an animated tile
  7. 7. Tile Terminology Peek Second part of an animated tile
  8. 8. Tile Terminology Peek Second part of an animated tile Block Large number text
  9. 9. Tile Terminology Peek Second part of an animated tile Block Large number text Image Collection
  10. 10. My First Tile - appxmanifest Set up primary tile in the Visual Assets section How to customize Start screen tiles for desktop apps (Windows Runtime apps)
  11. 11. My First Tile Square (71 x 71) Square (150 x 150) Wide (310 x 150) Large (310 x 310) Every size can set scale range: Scale 100, Scale 140, Scale 240.
  12. 12. My First Tile - Badges Badge Phone Windows 1-99 alert attention activity available away busy unavailable newMessage paused playing error alarm
  13. 13. Tile & Badge Template Sample <tile> <visual version="2"> <binding template="TileSquare150x150PeekImageAndText01"> <image id="1" src="{image url}" alt="MyImage"/> <text id="1">One Sample Text</text> <text id="2">Two Sample Text</text> <text id="3">Three Sample Text</text> <text id="4">Four Sample Text</text> </binding> <binding> …… </binding> </visual> </tile> <badge version="1" value="alert" /> tile template catalog Version 2 or 3 for Windows Phone-only template
  14. 14. Tile XML Schema tile Base tile element, contains one “visual” element Defines one (1) tile template visual Can contains multiple binding child elements, each of which defines a tile binding Defines one (1) tile template text Text used in the tile template. image Image used in the tile template. Should match the size and shape image requirements for the template.
  15. 15. Tile Template Code XmlDocument tileDoc = new XmlDocument(); tileDoc.LoadXml("<my tile XML/>"); TileNotification myNewTile = new TileNotification(tileDoc); TileUpdater myTileUpdater = TileUpdateManager.CreateTileUpdaterForApplication(); myTileUpdater.Update(myNewTile);
  16. 16. Demo: Creating Tiles Locally
  17. 17. Or… Use the NotificationExtensions ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03(); tileContent.TextHeadingWrap.Text = "Wide tile notification"; ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText02(); tileContent.TextbodyWrap.Text = "Square tile notification"; tileContent.SquareContent = squareContent; TileNotification newTile = new TileNotification(tileContent.CreateNotification()); TileUpdateManager.CreateTileUpdaterForApplication().Update(newTile); Quickstart: Using the NotificationsExtensions library in your code (Windows Runtime apps using C#/VB/C++ and XAML) http://www.nuget.org/packages/windows8.notifications
  18. 18. Notifications Lots of ways to display notifications
  19. 19. Toast Notifications Enable toast in manifest Send a toast notification <toast> <visual> <binding template="ToastText02"> <text id="1">headline text</text> <text id="2">body text</text> </binding> </visual> </toast> User taps on toast notification to launch app Activated, Dissmiss, Failed
  20. 20. Toast Rendering
  21. 21. Notifications Lots of ways to send notifications Scheduled - Set tile template and time ScheduledTileNotification ScheduledToastNotification Periodic pull from URL every half hour / hour / 6 hours / 12 hours / day. Local Update from within application (foreground or background) Push Using WNS Push Services
  22. 22. Scheduled updates var scheduleToast = new ScheduledToastNotification( xmlDoc, DateTimeOffset.UtcNow + TimeSpan.FromDays(1.0) ); var toastNotify = ToastNotificationManager.CreateToastNotifier(); toastNotify.AddToSchedule(scheduleToast);
  23. 23. HTTP request for Periodic updates XML payload Windows Services System process 30m – 24 hour frequency var periodic = TileUpdateManager.CreateTileUpdaterForApplication(); Uri myTileFeed = new Uri("http://mysite.com/tileRSS.xml"); periodic.StartPeriodicUpdate(myTileFeed, PeriodicUpdateRecurrence.Hour);
  24. 24. Periodic updates (the easy way) Open Package.appxmanifest <tile> <visual version="2"> <binding template="TileSquare150x150Text04" fallback="TileSquareText04"> <text id="1">Hello world!</text> </binding> </visual> </tile>
  25. 25. Local Updates BadgeNotification newBadge = new BadgeNotification(badgeDoc); BadgeUpdater update = BadgeUpdateManager.CreateBadgeUpdaterForApplication(); update.Update(newBadge);
  26. 26. WNS Platform Options Notification type Scheduled Local Periodic Push
  27. 27. Notification Queueing Tiles can cycle notifications Up to five (5) notifications in queue Can replace tiles in the queue Set expirations for tiles in queue Support local, scheduled, push notifications and periodic updates
  28. 28. Windows Notification Service One service across Windows devices One process to register an app for push One tile template to push to Windows & Phone apps
  29. 29. WNS – Push Architecture 1. Request Channel URI 2. Register with your Cloud Service 3. Authenticate & Push Notification My Developer Service Windows Push Notification Service
  30. 30. Setting Up An App For Push
  31. 31. Setting Up An App For Push
  32. 32. Setting Up An App For Push
  33. 33. Setting Up An App For Push
  34. 34. Setting Up An App For Push Get Channel URL var channel = await void gotNotification(PushNotificationChannel sender, PushNotificationReceivedEventArgs args) { Debug.WriteLine(args.NotificationType.ToString()); } PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync(); SaveUriForNotificationService(channel.Uri); channel.PushNotificationReceived +=channel_PushNotificationReceived;
  35. 35. Sending Push Notifications Sample Project for Push Notifications [URL for notification sample service project, visible at http://pushtestserver.azurewebsites.net/wns/ ] Use Azure Notification Hub Cross device notifications http://aka.ms/notifyhub
  36. 36. Notifications Simulation Engine
  37. 37. How get WNS  http://msdn.microsoft.com/en-us/windows/  Login your windows live account  Create a application  Open the services  Click online service get the application setting  Copy SID and Application identify  Options  Add SID/Application identify to Azure Mobile Service  Or 3rd Server
  38. 38. Action Center 20 Notifications per app Persistent notifications for 7 days (or shorter) Users can - “chase” (tap) a notification (which removes the notification) - remove a group of notifications - remove all notifications Available on Phone only
  39. 39. Action Center Management APIs Manage app notifications Developers can • Remove one or many notifications • Tag and group notifications • Replace a notification with a new one • Set an expiration on notifications • Send “Ghost Toast” notifications (only show up in the notification center)
  40. 40. Add Context To Notification Example ToastNotification toasty = new ToastNotification(doc); toasty.Tag = "Windows Phone"; toasty.Group = "JumpStart";
  41. 41. Set Expiration for Notification Example ToastNotification toasty = new ToastNotification(doc); toasty.Tag = "Windows Phone"; toasty.Group = "JumpStart"; toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2));
  42. 42. Set “Ghost Toast” (suppress toast popup) Example ToastNotification toasty = new ToastNotification(doc); toasty.Tag = "Windows Phone"; toasty.Group = "JumpStart"; toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2)); toasty.SuppressPopup = true;
  43. 43. Remove Notifications Example ToastNotificationHistory tnh = ToastNotificationManager.History; tnh.Remove("WindowsPhone"); tnh.RemoveGroup("JumpStart");
  44. 44. References  Tiles, badges, and notifications (Windows Runtime apps)  Working with tiles, badges, and toast notifications (Windows Runtime apps using JavaScript and HTML)  How to customize Start screen tiles for desktop apps (Windows Runtime apps)  Quickstart: Creating a default tile using the Microsoft Visual Studio manifest editor (Windows Runtime apps) (Windows)  Quickstart: Sending a badge update (Windows Runtime apps using C#/VB/C++ and XAML)
  45. 45. References  Quickstart: Pinning a secondary tile (Windows Runtime apps using C#/VB/C++ and XAML)  Quickstart: Sending a tile update (Windows Runtime apps using C#/VB/C++ and XAML)  How to schedule a tile notification (Windows Runtime apps using C#/VB/C++ and XAML)  How to schedule a toast notification (Windows Runtime apps using C#/VB/C++ and XAML)
  46. 46. References  Quickstart: Setting up periodic notifications (Windows Runtime apps using C#/VB/C++ and XAML)  Using the notification queue (Windows Runtime apps)
  47. 47. Sample code:http://1drv.ms/1mgCrNW

×