WP8.1 Tiles and Notifications
•
5 gostaram•4,901 visualizações
在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
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (18)
Semelhante a WP8.1 Tiles and Notifications
Semelhante a WP8.1 Tiles and Notifications (20)
WP8.1 Tiles and Notifications
- 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. 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. 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. 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. 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. Tile Terminology • Peek Second part of an animated tile
- 7. Tile Terminology Peek Second part of an animated tile
- 8. Tile Terminology Peek Second part of an animated tile Block Large number text
- 9. Tile Terminology Peek Second part of an animated tile Block Large number text Image Collection
- 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. 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. My First Tile - Badges Badge Phone Windows 1-99 alert attention activity available away busy unavailable newMessage paused playing error alarm
- 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. 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. 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. Demo: Creating Tiles Locally
- 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
- 19. Notifications Lots of ways to display notifications
- 20. 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
- 21. Toast Rendering
- 22. 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
- 23. Scheduled updates var scheduleToast = new ScheduledToastNotification( xmlDoc, DateTimeOffset.UtcNow + TimeSpan.FromDays(1.0) ); var toastNotify = ToastNotificationManager.CreateToastNotifier(); toastNotify.AddToSchedule(scheduleToast);
- 24. 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);
- 25. 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>
- 26. Local Updates BadgeNotification newBadge = new BadgeNotification(badgeDoc); BadgeUpdater update = BadgeUpdateManager.CreateBadgeUpdaterForApplication(); update.Update(newBadge);
- 27. WNS Platform Options Notification type Scheduled Local Periodic Push
- 28. 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
- 30. 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
- 31. WNS – Push Architecture 1. Request Channel URI 2. Register with your Cloud Service 3. Authenticate & Push Notification My Developer Service Windows Push Notification Service
- 32. Setting Up An App For Push
- 33. Setting Up An App For Push
- 34. Setting Up An App For Push
- 35. Setting Up An App For Push
- 36. 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;
- 37. 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
- 39. 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
- 42. 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
- 43. 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)
- 44. Add Context To Notification Example ToastNotification toasty = new ToastNotification(doc); toasty.Tag = "Windows Phone"; toasty.Group = "JumpStart";
- 45. Set Expiration for Notification Example ToastNotification toasty = new ToastNotification(doc); toasty.Tag = "Windows Phone"; toasty.Group = "JumpStart"; toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2));
- 46. 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;
- 47. Remove Notifications Example ToastNotificationHistory tnh = ToastNotificationManager.History; tnh.Remove("WindowsPhone"); tnh.RemoveGroup("JumpStart");
- 49. 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)
- 50. 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)
- 51. References Quickstart: Setting up periodic notifications (Windows Runtime apps using C#/VB/C++ and XAML) Using the notification queue (Windows Runtime apps)
Notas do Editor
- Let’s start with some of the tile terminology. Peek is the term we use to describe a tile that has 2 parts to it. On a tablet, this will look like a top and a bottom of the tile. On a phone, this will look like a front and a back as the tile flips from one to the other.
- http://msdn.microsoft.com/en-us/library/windows/apps/dn393983.aspx
- http://code.msdn.microsoft.com/windowsapps/app-tiles-and-badges-sample-5fc49148/
- In addition to there being a lot of types of notifications, there are a lot of ways to send those notifications. You can schedule your notification, which will queue the notification into a system process and run it at a specific time. You can schedule a periodic update, which will pull the notification from a URL at a specified time interval. You can raise a notification from within the foreground or background of your application. Or you can use the Windows Notification Service Push Service to send a notification to your app. Lets dig into each of these.
- Let’s start with scheduled updates. We start from our application and within this application we call the Scheduler notification APIs. (click) Let’s look at the code that makes this happen. (click) Line 1: Walking through the code: We create a scheduled toast notification using the xml document that defines our tile, badge or toast notification and we add a time. In this case, it scheduling this notification to fire 1 day from now. Line 2: We create a notification manager… in this case, it is a toast notification manager. Line 3: We add our notification to the scheduler. And we’re done! (click) That puts the notification into the system schedule queue. The system will check that queue to see when it needs to execute the queue itesm and, when the time is right, it will push that toast or tile to be the live tile for your app.
- Periodic updates require us to create the tile at a secondary service. We can set that service in our application with this code. (click) In which we set up a pointer to where we want to call for our tile code. Then we simply start the update at the frequency we prefer, which can be as much as a day or as little as 30 minutes. (click) This will register our update with the Windows System Services which will check for the update at the appropriate time. (click) It will then use the Tile an Badge Updater APIs to request a new tile. (click) It will send an HTTP Request for that tile XML payload. (click) And use that payload to update the tile.
- Periodic updates are particularly cool because they can actually be done without any client side code. (click) Just open the package.appmanifest and in the application tab, you can set the tile update with the frequency you want and just paste in the URI template you want to use.
- Local notifications are nice and straightforward. We start in your app, either in the foreground or the background. (click) Then we create a tile, badge, or toast notification based on the XML document. The, using the Tile, Badge, or Toast updater, we simply call the update. (click) And using the Tile, Badge, and Toast APIs, our tiles badges or toasts are immediately notified of the update. One important note is that calling a toast update on your app from the foreground will do nothing. We will only get a toast notification if we call it from the background.
- From this table we can see that not every notification option is available to every kind of notification. We can’t send badges as scheduled notifications. We can’t send toasts as periodic notifications and we can only send raw notification through the push notification service.
- One more thing about notifications: with this release of Windows we can place multiple tiles into a notification queue. (click) We can place up to 5 tile notifications in that queue and the tile will cycle through those notifications. (Click) Then we can replace a tile in that queue with another tile or (click) set expirations for those tiles. To think of what kinds of the scenarios this enables, imaging there is a sports fan following multiple games, or a news reader that can list the 5 most important stories, all from 1 tile.
- efore you can send notifications using WNS, your app must be registered with the Windows Store Dashboard. This will provide you with credentials for your app that your cloud service will use in authenticating with WNS. These credentials consist of a Package Security Identifier (SID) and a secret key.
- Previous to this release, Microsoft had Microsoft Push Notification Services (MPNS) driving notifications on the phone and the Windows Notification Service (WNS) drive notifications on Windows devices. But now push notifications on Windows devices are driven by the Windows Notification Service, which delivers push notifications across all devices. (click) We’ve integrated the push registration service so that we have one process for all devices to register your app to handle these push notifications. (click) And, as previously mentioned, we have one set of tile templates that drive push across all devices to simplify the process of driving those key tile experience on Windows Phone.
- The architecture behind WNS are this: Your windows phone application contacts the Windows Notification Client platform to request a channel URI, which is a push uri unique to that device and application. Register this Uri with your cloud service. Save that Uri in your service so you can use it to push notifications to the device. Authenticate your service WNS. The cloud service authenticates with WNS by providing its credentials (Package SID and secret key) and getting back an access token that allows your service to send a notification. Then you can send that notification with that token to the push notification service. For more information: http://msdn.microsoft.com/en-us/library/windows/apps/hh465435.aspx
- Here, we’re just going to do a quick walk-through of setting an app up for push notifications. Right-click on your phone project and go down to the Store section to associate your app with the store.
- This will pull up a wizard for associating your app with the store. Sign in with your Microsoft account and walk through the wizard and you will be able to see all the app names that you’ve provisioned through your store account. If you haven’t yet reserved an app name, you can actually do that here.
- As you finalize your association, you’ll be given the final package name and publisher ID.
- But you don’t even need to keep track of these because when you finalize the association, it will add the file Pachage.StoreAssociation.xml to your project.
- With that in place, we can start the push process we outlines earlies. (click) We get our Channel URL with the following code and we save that Uri to our notification service. You’ll have to write this code yourself, but it would be a simple HTTP call to your service. (click) We can also add an event handler so that we can catch these notifications while our application is open.
- In terms of the services for collecting your device channel URIs and authenticating to the WNS service, we have published a sample project for push notifications. You can see how that project runs at http://pushtestservce.azurewebsites.net/wns If you’re looking for a turnkey solution to abstract the notification handling away, you could also turn to the Microsoft Azure Notification Hub, which you can use to deliver cross-device notifications as well as take advantage of the Azure scaling as your notifications start to ramp up.
- But I can hear you saying “I don’t want to write and host a service just to write the push component of my app”. The Windows Phone team listened and have responded by integrating a notification simulator into the tools. Let’s take a look at how this tool works.
- http://msdn.microsoft.com/en-us/library/windows/apps/hh779725.aspx