Charla en el evento Hel10 Windows 10, hablando de las nuevas notificaciones interactivas de Windows 10 y los nuevos templates para crear Tiles y notificaciones toast

1. #helloWindows10
Hel10 Windows 10!

2. #helloWindows10
Rafa Serna
Desarrollador en Diez Software (Grupo SDM)
@rafasermed – rafaserna@outlook.com
Un mundo de
notificaciones

4. #helloWindows10
Nuevas plantillas para nuestros live tiles
Notificaciones toast interactivas
El Action Center
Agenda

5. #helloWindows10
Developer en Diez Software
MVP Windows Platform Developer
Nokia Developer Champion
@rafasermed
rafaserna@outlook.com

6. #helloWindows10
Nuevas plantillas para nuestros live tiles

7. Plantillas heredadas
• Si una plantilla se adapta a
nuestras necesidades,
podemos seguir usándola.
• Las plantillas anteriores se
mantienen
• Las plantillas de Phone y Windows se han
fusionado.
• Hay mas de 80 plantillas disponibles

9. Responsive tiles
• Los tiles no son
siempre del mismo tamaño
• Los tiles se adaptan a
la pantalla en la que están
Dado que el grid de la pantalla de start tiene diferentes
densidades y se adapta al tamaño de la pantalla del
dispositivo, también lo hacen los tiles y su contenido.
High density exampleLow density example

10. Tiles adaptables – Estructura XML
Min. Med Size Max Med. Size
<tile>
<visual>
<binding template="TileSmall">
...
</binding>
<binding template="TileMedium">
...
</binding>
<binding template="TileWide">
...
</binding>
<binding template="TileLarge">
...
</binding>
</visual>
</tile>

11. Tiles adaptables – Código C#
Min. Med Size Max Med. Size
TileContent content = new TileContent()
{
Visual = new TileVisual()
{
TileMedium = new TileBinding()
{
....
},
TileWide = new TileBinding()
{
....
},
TileLarge = new TileBinding()
{
....
}
}
};

12. Tiles adaptables
<tile>
<visual
version? = "integer"
lang? = "string"
baseUri? = "anyURI"
branding? = "none"
addImageQuery? = "boolean"
contentId? = "string"
displayName? = "string" >
<!-- Child elements -->
<binding template="TileSmall">
...
</binding>
...
</visual>
</tile>
<binding
template = "tileTemplateNameV3"
fallback? = "tileTemplateNameV1"
lang? = "string"
baseUri? = "anyURI"
branding? = "none"
addImageQuery? = "boolean"
contentId? = "string"
displayName? = "string"
hint-textStacking? = "top"
hint-overlay? = [0-100]
hint-presentation=""
hint-lockDetailedStatus1=""? = string=""
hint-lockDetailedStatus2=""? = string=""
hint-lockDetailedStatus3=""? = string="" >
<!-- Child elements -->
( image
| text
| group
)*
</binding>

13. Tiles adaptables
<image
src = "string"
placement? = "inline | “background" | “peek"
alt? = "string"
addImageQuery? = "boolean"
hint-crop? = "none"
hint-removeMargin? = "boolean"
hint-align? = "stretch" | "left" | "center" | "right" />
<text
lang? = "string"
hint-style? = "textStyle"
hint-wrap? = "boolean"
hint-maxLines? = "integer"
hint-minLines? = "integer"
hint-align? = "left" | "center" | "right" >
</text>
caption
captionSubtle
body
bodySubtle
base
baseSubtle
subtitle
subtitleSubtle
title
titleSubtle
titleNumeral
subheader
subheaderSubtle
subheaderNumeral
header
headerSubtle
headerNumeral

14. Tiles adaptables
<text hint-style="*" /> Font Height Weight
caption 12 epx Regular
body 15 epx Regular
base 15 epx SemiBold
subtitle 20 epx Regular
title 24 epx Semilight
subheader 34 epx Light
header 46 epx Light
Subtle (text 60 opaque)
captionSubtle
bodySubtle
baseSubtle
subtitleSubtle
titleSubtle
titleNumeralSubtle
subheaderSubtle
subheaderNumeralSubtle
headerSubtle
headerNumeralSubtle
Numeral (reduce the line height so that content
above and below come extremely close to the text)
titleNumeral
subheaderNumeral
headerNumeral

15. DEMO
Tiles Adaptables

16. Tiles adaptables - Agrupaciones
<group>
<!-- Child elements -->
<subgroup
hint-weight? ="" [0-100]
hint-textStacking=""? = "top" | "center" | "bottom" >
<!-- Child elements -->
</subgroup>
<subgroup
hint-weight? ="" [0-100]
hint-textStacking=""? = "top" | "center" | "bottom" >
<!-- Child elements -->
</subgroup>
</group>

17. Tiles adaptables
<group>
<subgroup>
………
</subgroup>
</group>
<group>
<subgroup>
………
</subgroup>
</group>
Agrupaciones Columnas
<group>
<subgroup hint-weight=“1”>
………
</subgroup>
<subgroup hint-weight=“2”>
………
</subgroup>
</group>

18. DEMO
Tiles Adaptables
(Agrupaciones)

19. Plantillas heredadas
• Si una plantilla se adapta a
nuestras necesidades,
podemos seguir usándola.
• Las plantillas anteriores se
mantienen

20. Estados de un Toast
Collapsed Expanded

21. Toast adaptables – Estructura XML
<toast>
<visual>
<binding template="">
...
</binding>
</visual>
<actions>
...
</actions>
<audio/>
</toast>

22. Toast adaptables
<toast
launch? = "string"
duration? = "short|long"
activationType? = "foreground|background|protocol"
scenario? = "default|alarm|reminder|incomngCall"
hint-people? = "string" >
<visual
version? = "nonNegativeInteger"
lang? = "string"
baseUri? = "anyURI"
branding? = "none|logo|name"
addImageQuery? = "boolean" >
<binding />
</visual>
<actions/>
<audio/>
</toast>

23. Toast adaptables
Toast templates
ToastGeneric
ToastText01
ToastText02
ToastText03
ToastText04
ToastImageAndText01
ToastImageAndText02
ToastImageAndText03
ToastImageAndText04
<binding
template? = "toastTemplate"
lang? = "string"
baseUri? = "anyURI"
addImageQuery? = "boolean" >
<text id = "integer"
lang? = "string" />
</text>
</binding>
<image
src = "string"
placement? = "inline|appLogoOverride"
alt? = "string"
addImageQuery? = "boolean"
hint-crop? = "none|circle"/>

24. Toast adaptables
Media File
ms-winsoundevent:Notification.Default
ms-winsoundevent:Notification.IM
ms-winsoundevent:Notification.Mail
ms-winsoundevent:Notification.Reminder
ms-winsoundevent:Notification.SMS
ms-winsoundevent:Notification.Looping.Alarm .. 10
ms-winsoundevent:Notification.Looping.Call .. 10
<audio src? = "string"
loop? = "boolean"
silent? = "boolean" />

25. DEMO
Toast Básicas

26. Toast adaptables
<actions>
<input
id="string"
type="text|selection"
title? = "string"
placeHolderContent? = "string"
defaultInput? = "string" >
<selection
id = "string"
content = "string" />
</input>
<action
content = "string"
arguments = "string"
activationType? = "foreground|background|protocol|system"
imageUri? = "string"
hint-inputId = "string" />
</actions>

27. Toast adaptables - Activaciones
<action activationType="foreground" />
<action activationType="background" />
<action activationType="protocol" />
<action activationType="system" />
Tap button App launches Retrieve Args Take actions
Tap button Task launches Retrieve Args Take actions
Tap button Protocol activates Web / app
Tap button System handles

28. Toast adaptables – Activaciones
protected override void OnActivated(IActivatedEventArgs args)
{
base.OnActivated(args);
if (args is ToastNotificationActivatedEventArgs)
{
var toastActivationArgs = args as ToastNotificationActivatedEventArgs;
if (toastActivationArgs.Argument.Equals("patata") == true)
{
if (toastActivationArgs.UserInput.ContainsKey("origen"))
{
string patata = (string)toastActivationArgs.UserInput["origen"];
}
}
}
}
Foreground

29. Toast adaptables – Activaciones
Background
<Extension Category="windows.backgroundTasks“ EntryPoint="RuntimeComponent1.ActionBTask">
<BackgroundTasks>
<Task Type="systemEvent" />
</BackgroundTasks>
</Extension>
public class ActionBTask : IBackgroundTask
{
public void Run(IBackgroundTaskInstance taskInstance)
{
var details = taskInstance.TriggerDetails as ToastNotificationActionTriggerDetail;
if (details != null)
{
string arguments = details.Argument;
var userInput = details.UserInput;
}
}
}

30. DEMO
Toast Interactivas

31. Action Center

32. Action Center
• 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
ToastNotificationHistory tnh = ToastNotificationManager.History;
tnh.Remove(“T1“, “G2“);
tnh.RemoveGroup(“G1");

33. Action Center
• ToastNotificationHistoryChangedTrigger
• Fires whenever a user dismisses a notification from Action Center
• Or when an app adds or removes or replaces a notification
public sealed class ToastChanged : IBackgroundTask
{
public void Run(IBackgroundTaskInstance taskInstance)
{
var toasts = ToastNotificationManager.History.GetHistory();
if (toasts != null)
{
var count = toasts.Select(t => t.Group == "G2").Count();
.....
}
}
}

34. DEMO
Action center

35. #helloWindows10
Q&A

36. #helloWindows10
No olvides realizar la encuesta
¡Gracias!
Rafa Serna
Desarrollador en Diez Software (Grupo SDM)
@rafasermed – rafaserna@outlook.com
http://aka.ms/W10Ev05