WP8.1 Tiles and Notifications
description
Transcript of WP8.1 Tiles and Notifications
![Page 1: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/1.jpg)
Yu-Hsun Lin (Pou)
2014/04/24 - Global Community Webcast
Event
Tiles, Badges, Toastsand Action Center
[email protected]://www.dotblogs.com.tw/pou/
![Page 2: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/2.jpg)
Introduction to Tiles and Notifications
•How tiles enhance the Windows experience
• Tile template examples
• Tile terminology
• Sending notifications
•Managing notifications with the action center
This module…
![Page 3: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/3.jpg)
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”
![Page 4: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/4.jpg)
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
![Page 5: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/5.jpg)
Tile Types
Windows 8.1Tile Templates
Windows PhoneTile Templates
Tiles are cross-platform
40 cross platform tile templates available Full list: http://aka.ms/TileTemplates
![Page 6: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/6.jpg)
Tile Terminology
PeekSecond part of an animated tile
Windows Phone
![Page 7: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/7.jpg)
Peek Second part of an animated tile
Tile Terminology
Windows Phone
![Page 8: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/8.jpg)
Peek Second part of an animated tile
Block Large number text
Tile Terminology
Windows
Phone
![Page 9: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/9.jpg)
Peek Second part of an animated tile
Block Large number text
Image Collection
Tile Terminology
Windows Phone
![Page 10: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/10.jpg)
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)
![Page 11: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/11.jpg)
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.
![Page 12: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/12.jpg)
My First Tile - BadgesBadge Phone Window
s
1-99
alert
attention
activity
available
away
busy
unavailable
newMessage
paused
playing
error
alarm
Badges can be:
Numbers
GlyphsWindows
Phone
![Page 13: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/13.jpg)
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 XML
Badge XML Version 2 or 3 for Windows Phone-only
template
tile template catalog
![Page 14: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/14.jpg)
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.
![Page 15: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/15.jpg)
Tile Template Code
XmlDocument tileDoc = new XmlDocument();tileDoc.LoadXml("<my tile XML/>");
TileNotification myNewTile = new TileNotification(tileDoc);
TileUpdater myTileUpdater = TileUpdateManager.CreateTileUpdaterForApplication();myTileUpdater.Update(myNewTile);
![Page 16: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/16.jpg)
Demo: Creating Tiles Locally
![Page 17: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/17.jpg)
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
![Page 18: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/18.jpg)
NotificationsAlways On Apps
![Page 19: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/19.jpg)
Notifications
Lots of ways to display notifications
Tile ToastBadge
Raw(background
task)arbitrary
string
![Page 20: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/20.jpg)
Toast Notifications
Enable toast in manifest
Send a toast notification
User taps on toast notification to launch app
<toast> <visual> <binding template="ToastText02">
<text id="1">headline text</text> <text id="2">body text</text>
</binding> </visual></toast>
Activated, Dissmiss, Failed
![Page 21: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/21.jpg)
Toast Rendering
Windows Phone
![Page 22: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/22.jpg)
Notifications
Lots of ways to send notifications
Scheduled
- Set tile template and time
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
ScheduledTileNotificationScheduledToastNotification
![Page 23: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/23.jpg)
Scheduled updates
var scheduleToast = new ScheduledToastNotification( xmlDoc, DateTimeOffset.UtcNow + TimeSpan.FromDays(1.0) );var toastNotify = ToastNotificationManager.CreateToastNotifier();toastNotify.AddToSchedule(scheduleToast);
System Schedule
Queue
My App
Background Task
Scheduled notification
API
![Page 24: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/24.jpg)
HTTP request for XML payloadPeriodic updates
Tile and Badge Updater APIs
My App
Background Task
Windows Services
System process 30m – 24 hour
frequency
Developer
service
var periodic = TileUpdateManager.CreateTileUpdaterForApplication();Uri myTileFeed = new Uri("http://mysite.com/tileRSS.xml");periodic.StartPeriodicUpdate(myTileFeed, PeriodicUpdateRecurrence.Hour);
Windows System Services
![Page 25: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/25.jpg)
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>
![Page 26: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/26.jpg)
Local Updates
Tile and Badge Updater APIs
Toast APIs
My App
Background Task
BadgeNotification newBadge = new BadgeNotification(badgeDoc);BadgeUpdater update = BadgeUpdateManager.CreateBadgeUpdaterForApplication();update.Update(newBadge);
![Page 27: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/27.jpg)
WNS Platform Options
Notification type
Scheduled
Local Periodic Push
Tile ✔ ✔ ✔ ✔
Badge ✔ ✔ ✔
Toast ✔ ✔ ✔
Raw ✔
![Page 28: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/28.jpg)
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
![Page 29: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/29.jpg)
Push NotificationsOne Push For All Devices
![Page 30: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/30.jpg)
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
![Page 31: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/31.jpg)
WNS – Push Architecture
1. Request Channel URI
2. Register with your Cloud Service
3. Authenticate & Push Notification
Windows Phone 8.1
Windows Notification
Client Platform
My Windows Phone App
My Developer Service
Windows Push Notification
Service
1
2
3
3
![Page 32: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/32.jpg)
Setting Up An App For Push
![Page 33: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/33.jpg)
Setting Up An App For Push
![Page 34: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/34.jpg)
Setting Up An App For Push
![Page 35: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/35.jpg)
Setting Up An App For Push
![Page 36: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/36.jpg)
Setting Up An App For PushGet Channel URL
void gotNotification(PushNotificationChannel sender, PushNotificationReceivedEventArgs args){ Debug.WriteLine(args.NotificationType.ToString());}
var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();SaveUriForNotificationService(channel.Uri); channel.PushNotificationReceived +=channel_PushNotificationReceived;
![Page 37: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/37.jpg)
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
![Page 38: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/38.jpg)
Notifications Simulation Engine
![Page 39: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/39.jpg)
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
How get WNS
![Page 40: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/40.jpg)
Demo: Push Notification Simulation
![Page 41: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/41.jpg)
Action Centermanaging your notification space
![Page 42: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/42.jpg)
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
![Page 43: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/43.jpg)
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)
![Page 44: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/44.jpg)
Add Context To Notification
Example
ToastNotification toasty = new ToastNotification(doc);toasty.Tag = "Windows Phone";toasty.Group = "JumpStart";
![Page 45: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/45.jpg)
Set Expiration for Notification
ToastNotification toasty = new ToastNotification(doc);toasty.Tag = "Windows Phone";toasty.Group = "JumpStart";toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2));
Example
![Page 46: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/46.jpg)
Set “Ghost Toast” (suppress toast popup)
ToastNotification toasty = new ToastNotification(doc);toasty.Tag = "Windows Phone";toasty.Group = "JumpStart";toasty.ExpirationTime = (DateTimeOffset.Now + TimeSpan.FromHours(2));toasty.SuppressPopup = true;
Example
![Page 47: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/47.jpg)
Remove Notifications
ToastNotificationHistory tnh = ToastNotificationManager.History;tnh.Remove("WindowsPhone");tnh.RemoveGroup("JumpStart");
Example
![Page 48: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/48.jpg)
Demo: Action Center In Action
![Page 49: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/49.jpg)
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 Runti
me apps)
Quickstart
: Creating a default tile using the Microsoft Visual Studio manifest edit
or (Windows Runtime apps) (Windows)
Quickstart
: Sending a badge update (Windows Runtime apps using C#/VB/C++
and XAML)
![Page 50: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/50.jpg)
References
Quickstart
: Pinning a secondary tile (Windows Runtime apps using C#/VB/C++ a
nd 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#/V
B/C++ and XAML)
How to schedule a toast notification (Windows Runtime apps using C#
/VB/C++ and XAML)
![Page 51: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/51.jpg)
References
Quickstart
: Setting up periodic notifications (Windows Runtime apps using C#/V
B/C++ and XAML)
Using the notification queue (Windows Runtime apps)
![Page 52: WP8.1 Tiles and Notifications](https://reader036.fdocuments.us/reader036/viewer/2022062405/5560b590d8b42afe3b8b49ad/html5/thumbnails/52.jpg)
Thank you for listeningSample code: http://1drv.ms/1mgCrNW