un mundo de notificaciones
TRANSCRIPT
#helloWindows10
Hel10 Windows 10!
#helloWindows10
Rafa SernaDesarrollador en Diez Software (Grupo SDM)@rafasermed – [email protected]
Un mundo de notificaciones
#helloWindows10
Nuevas plantillas para nuestros live tiles
Notificaciones toast interactivas
El Action Center
Agenda
#helloWindows10
Developer en Diez SoftwareMVP Windows Platform DeveloperNokia Developer Champion
Rafa Serna Medina
#helloWindows10
Nuevas plantillas para nuestros live tiles
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
Responsive tiles• Los tiles no son siempre del mismo tamaño
• Los tiles se adaptan ala pantalla en la que estánDado que el grid de la pantalla de start tiene diferentesdensidades y se adapta al tamaño de la pantalla deldispositivo, también lo hacen los tiles y su contenido.
High density exampleLow density example
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>
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() { .... } }};
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>
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>
captioncaptionSubtlebodybodySubtlebasebaseSubtlesubtitlesubtitleSubtletitletitleSubtletitleNumeralsubheadersubheaderSubtlesubheaderNumeralheaderheaderSubtleheaderNumeral
Tiles adaptables<text hint-style="*" />
Font Height Weight
caption 12 epx Regularbody 15 epx Regularbase 15 epx SemiBoldsubtitle 20 epx Regulartitle 24 epx Semilightsubheader 34 epx Lightheader 46 epx Light
Subtle (text 60 opaque)captionSubtlebodySubtlebaseSubtlesubtitleSubtletitleSubtletitleNumeralSubtlesubheaderSubtlesubheaderNumeralSubtleheaderSubtleheaderNumeralSubtle
Numeral (reduce the line height so that content above and below come extremely close to the text)titleNumeralsubheaderNumeralheaderNumeral
Click icon to add picture
DEMOTiles Adaptables
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>
Tiles adaptables
<group> <subgroup> ……… </subgroup></group>
<group> <subgroup> ……… </subgroup></group>
Agrupaciones Columnas<group> <subgroup hint-weight=“1”> ……… </subgroup> <subgroup hint-weight=“2”> ……… </subgroup></group>
Click icon to add picture
DEMOTiles Adaptables(Agrupaciones)
Plantillas heredadas• Si una plantilla se adapta a nuestras necesidades, podemos seguir usándola.
• Las plantillas anteriores se mantienen
Estados de un ToastCollapsed Expanded
Toast adaptables – Estructura XML
<toast>
<visual> <binding template=""> ... </binding> </visual>
<actions> ... </actions>
<audio/>
</toast>
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>
Toast adaptables
Toast templatesToastGenericToastText01ToastText02ToastText03ToastText04ToastImageAndText01ToastImageAndText02ToastImageAndText03ToastImageAndText04
<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"/>
Toast adaptables
Media Filems-winsoundevent:Notification.Defaultms-winsoundevent:Notification.IMms-winsoundevent:Notification.Mailms-winsoundevent:Notification.Reminderms-winsoundevent:Notification.SMSms-winsoundevent:Notification.Looping.Alarm .. 10ms-winsoundevent:Notification.Looping.Call .. 10
<audio src? = "string" loop? = "boolean" silent? = "boolean" />
Click icon to add picture
DEMOToast Básicas
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>
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
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
Toast adaptables – ActivacionesBackground
<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;
} }}
Click icon to add picture
DEMOToast Interactivas
Action Center
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");
Action Center• ToastNotificationHistoryChangedTrigger• Fires whenever a user dismisses a notification from Action
Center• Or when an app adds or removes or replaces a notificationpublic 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();
..... } }}
Click icon to add picture
DEMOAction center
#helloWindows10
Q&AQR Code
#helloWindows10
No olvides realizar la encuesta¡Gracias!Rafa SernaDesarrollador en Diez Software (Grupo SDM)@rafasermed – [email protected] http://aka.ms/W10Ev05