Toast Adaptativo e Interativo

Notificação Toast adaptativo e interativo são algumas das novas funcionalidades do Windows 10. Eles permitem:

  • Criar notificações do sistema flexíveis, com mais conteúdo e imagens em linha, sem ser limitado e restrito ao “toast template catalog” existente.
  • Criar notificações que permitem a interação com o usuário.
Toast_notifiation_8
Notificação Toast no Windows 8.1
Toast_notification_ex_5
Notificação Toast no Windows 10

Nesse post vamos ver a estrutura do novo toast notification e alguns exemplos de como construir essa nova funcionalidade.

Estrutura do Toast Notification

O Toast Notification é construído usando XML, que deve conter os seguintes elementos:

  • <visual>: Conteúdo visual, incluindo texto e imagens;
  • <actions>: Contém os campos que vão receber ações dos usuários dentro da notificação;
  • <audio>: Som que será reproduzido quando a notificação for exibida.

Exemplo de XML usando esses três elementos:

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Sample</text>
      <text>This is a simple toast notification example</text>
      <image placement="AppLogoOverride" src="oneAlarm.png" />
    </binding>
  </visual>
  <actions>
    <action content="check" arguments="check" imageUri="check.png" />
    <action content="cancel" arguments="cancel" />
  </actions>
  <audio src="ms-winsoundevent:Notification.Reminder"/>
</toast>

Tendo como resultado a seguinte notificação:

Toast_Notitication_Example

Visual

Dentro do elemento visual vão estar presentes todos os elementos de textos e imagens, que formam o conteúdo da notificação.

Diferente da notificação de Tile (já visto aqui) que suporta vários modelos baseado em diferentes tamanhos, a notificação de sistema para Windows 10 só tem um modelo – Toast Generic – com dois formatos:

  • Flexível: Pode-se alterar o conteúdo da notificação, adicionar mais uma linha de texto, adicionar uma imagem ou alterar a miniatura da aplicação para outra imagem desejada, sem se preocupar em mudar todo o modelo da notificação;
  • Adaptativo: Os desenvolvedores podem usar o mesmo código para construir a mesma notificação para diferentes tipos de dispositivos do Windows, como telefone, tablet, desktop PC ou Xbox – os diferentes dispositivos aceitarão a notificação e irão exibir para o usuário sob suas próprias políticas de interface com as características visuais apropriadas.

Actions

No Windows 10 em aplicativos UWP (Universal Windows Platform), os desenvolvedores podem adicionar ações personalizadas para suas notificações, para fornecer uma interação com o aplicativo, mesmo com ele fechado. As ações são especificadas no elemento <actions>, que possuem dois tipos:

  • <visual>: Pode-se especificar até três ações personalizadas ou do sistema dentro de uma notificação;
  • <input>: Pode-se permitir que os usuários contribuam com o aplicativo por meio de uma notificação. Por exemplo, ser capaz de escrever uma resposta a uma mensagem instantânea diretamente dentro de um Toast.

Nota:

Ambos <visual> e <input> são adaptáveis dentro da família Windows. Por exemplo, no Windows Mobile ou Desktop, uma <actions> para um usuário é um botão para tocar / clicar. Um <input> é uma caixa de texto que o usuário pode inserir texto com o uso do teclado ou do teclado virtual. No entanto é possível que em alguns dispositivos futuros, uma ação seja realizada por voz, e uma entrada de texto do usuário seja feita por ditado.

Quando uma ação é feita pelo usuário, ao se especificar o atributo activationType dentro de <actions>, pode-se optar pelas seguintes abordagens:

  • Ativar o aplicativo em foreground, com um argumento específico de ação que pode ser usado para navegar até uma página / contexto específico;
  • Ativar o aplicativo em background task, sem afetar o usuário;
  • Ativar outro aplicativo através de protocolo;
  • Especificar uma ação do sistema para executar. As ações de sistema disponíveis atuais são snoozing e dismissing scheduled para alarm/reminder, que mostraremos mais abaixo.

Áudio

O elemento <audio> permanece como é no Windows Phone 8.1, com apenas uma alteração: é possível adicionar um áudio local do aplicativo, usando ms-appx:/// ou ms-appdata:///.

Exemplos


Notificação com conteúdo visual rico
Você pode ter várias linhas de texto, uma imagem pequena para substituir o logotipo do aplicativo e uma imagem inline.

<toast>
  <visual>
<binding template="ToastGeneric">
	<text>Photo Share</text>
      <text>Andrew sent you a picture</text>
      <text>See it in full size!</text>
      <image placement="appLogoOverride" src="A.png" />
	<image placement="inline" src="hiking.png" />
    </binding>
  </visual>
</toast>

Toast_notification_ex_1

Notificação com ação 1

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Microsoft Company Store</text>
      <text>New Halo game is back in stock!</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="foreground" content="see more details" arguments="details" imageUri="check.png"/>
    <action activationType="background" content="remind me later" arguments="later" imageUri="cancel.png"/>
  </actions>
</toast>

Toast_notification_ex_2

Notificação com ação 2

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Cortana</text>
      <text>We noticed that you are near Wasaki.</text>
      <text>Thomas left a 5 star rating after his last visit, do you want to try?</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="foreground" content="reviews" arguments="reviews" />
    <action activationType="protocol" content="show map" arguments="bingmaps:?q=sushi" />
  </actions>
</toast>

Toast_notification_ex_3

Notificação com input e ação 1

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Andrew B.</text>
      <text>Shall we meet up at 8?</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <input id="message" type="text" placeholderContent="reply here" />
    <action activationType="background" content="reply" arguments="reply" />
    <action activationType="foreground" content="video call" arguments="video" />
  </actions>
</toast>

Toast_notification_ex_4

Notificação com input e ação 2

<toast>
  <visual>
    <binding template="ToastGeneric">
      <text>Andrew B.</text>
      <text>Shall we meet up at 8?</text>
      <image placement="appLogoOverride" src="A.png" />
    </binding>
  </visual>
  <actions>
    <input id="message" type="text" placeholderContent="reply here" />
    <action activationType="background" content="reply" arguments="reply" imageUri="send.png" hint-inputId="message"/>
  </actions>
</toast>

Toast_notification_ex_5

Notificação de lembrete

<toast scenario="reminder">
  <visual>
    <binding template="ToastGeneric">
      <text>Adam's Hiking Camp</text>
      <text>You have an upcoming event for this Friday!</text>
      <text>RSVP before it"s too late.</text>
      <image placement="appLogoOverride" src="A.png" />
      <image placement="inline" src="hiking.png" />
    </binding>
  </visual>
  <actions>
    <action activationType="background" content="RSVP" arguments="rsvp" />
    <action activationType="background" content="Reminder me later" arguments="later" />
  </actions>
</toast>

Toast_notification_ex_6

Recebendo os valores dos inputs

Temos duas maneiras de obter os valores fornecidos pelo usuário: foreground e background.

Foreground

Nesse cenário, o aplicativo é lançado em primeiro plano para responder a uma ação feita dentro da notificação toast.
No Windows 10, a notificação é recebida no OnActivated().

async protected override void OnActivated(IActivatedEventArgs args)
{
	//Find out if this is activated from a toast;
	If (args.Kind == ActivationKind.ToastNotification)
	{
		//Get the pre-defined arguments and user inputs from the eventargs;
		var toastArgs = args as ToastNotificationActivatedEventArgs;
		var arguments = toastArgs.Arguments;
		var input = toastArgs.UserInput[“1”]; 
}
	 
	//...
}

Background

Nesse cenário, o aplicativo trata a ação do usuário em segundo plano. O código abaixo mostra como declarar essa task dentro do manifest e como obter os valores inseridos pelo usuário.

<!-- Manifest Declaration -->
<!-- A new task type toastNotification is added -->
<Extension Category = "windows.backgroundTasks" EntryPoint = "Tasks.BackgroundTaskClass" >
  <BackgroundTasks>
    <Task Type="systemEvent" />
  </BackgroundTasks>
</Extension>

Classe que executa o background task:

namespace Tasks
{
    public sealed class BackgroundTaskClass: IBackgroundTask
    {
        public void Run(IBackgroundTaskInstance taskInstance)
        {
		//Inside here developer can retrieve and consume the pre-defined 
		//arguments and user inputs;
		var details = taskInstance.TriggerDetails as NotificationActionTriggerDetails;
		var arguments = details.Arguments;
		var input = details.Input.Lookup(“1”);

            // ...
        }        
    }
}

Seguindo esses passos básicos já é possível ter uma notificação toast adaptativa e interativa, deixando o seu aplicativo mais atraente e funcional para o usuário.

Até o próximo post!

Imagens: Microsoft

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s