Windows App - Tiles e Notificações

Por Renato Haddad

Maio, 2013

Dn175724.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Dn175724.38722503A381907ECA35F656B5884512(pt-br,MSDN.10).png

Visão Geral

Os Tiles (ícones na tela inicial, mas chamarei de Tile neste documento) são elementos importantes da experiência do usuário em um aplicativo estilo Modern UI. Quando um aplicativo é instalado, um tile é criado na tela inicial do Windows 8. Conhecido como tile primário, serve como um atalho da aplicação. Por padrão, a imagem de um tile principal vem do arquivo Logo.png incluído no Visual Studio em um projeto Modern UI. Essa imagem mede 150 x 150 pixels e representa um tile quadrado. No entanto, você também pode incluir um tile largo (wide) em seu aplicativo, adicionando uma imagem de 310 x 150 pixels ao seu projeto e designando-o como o "wide logo" no manifesto do aplicativo, conforme a Figura 1. Se um aplicativo suporta os tiles largos, os usuários podem alternar entre os tiles quadrados ou largos na tela inicial.

Dn175724.29EB1E15B9D469B71354A59F4B802AE1(pt-br,MSDN.10).png

Figura 1 – Tipos de tiles

Aplicativos de estilo Modern UI também tem a opção de criar tiles adicionais, conhecidos como tiles secundários. Tiles secundários servem de atalhos para lançar um aplicativo e deve ir para um local pré-definido ou estado. Por exemplo, uma aplicação de clima pode permitir que usuários criem tiles secundários que representam localizações geográficas, como Redmond, WA, e Atlanta, GA. Um usuário pode, então, iniciar o aplicativo e ver o tempo em Redmond ou Atlanta ou simplesmente tocando no tile secundário, conforme a Figura 2.

Dn175724.97F2D0E9FFE9037206B4A78202A0F6ED(pt-br,MSDN.10).png

Figura 2 – Tiles de clima e ações

Você pode criar tiles secundários usando classe Windows.UI.StartScreen.SecondaryTile do WinRT. A criação é geralmente iniciada por uma ação realizada pelo usuário, por exemplo, selecionar um comando na barra de aplicação. Na criação de um tile secundário existem uma série de parâmetros, incluindo a URIs de imagens de fundo do tile (ambos quadrado e largo, se você quer que o usuário seja capaz de alternar entre os dois) e uma string representando argumentos de ativação. Quando o aplicativo é iniciado a partir do tile secundário, o sistema operacional passa os argumentos de ativação para o aplicativo, os quais são necessários para a inicialização. Para uma aplicação de clima, os argumentos de ativação podem ser nada mais do que um código postal.

Uma vez que um tile é criado, ele não tem de permanecer estático. Aplicativos de estilo Modern UI desfrutam de uma série de maneiras de tornar o conteúdo de um tile, tanto dinâmico e atraente através de atualizações de tiles e envio de notificações (Push Notifications). Por exemplo, uma aplicação pode usar a classe Windows.UI.Notifications.TileUpdater para atualizar o conteúdo de um tile. Essas atualizações podem ser opcionalmente enfileiradas, que quando ativadas, o sistema operacional mostra as últimas cinco atualizações em alguns segundos, fazendo com que o tile fique atualizado e vivo.

Um aplicativo deve ser executado usando a classe TileUpdater para atualizar o tile. Os tiles podem ser atualizados mesmo quando o aplicativo não estiver sendo executado através do Serviço de Notificação do Windows, ou WNS (Windows Notification Service). Suponha que a aplicação de clima quer exibir alertas meteorológicos, mesmo não estando rodando. Através do WNS, os servidores para a aplicação de clima enviam notificações para atualizar os tiles na tela inicial.

Envio de notificação não está limitado a atualização de tiles. Eles também podem aparecer em uma janela Pop-Up (chamado de Toast Notification), contendo uma mensagem para o usuário, por exemplo, "O mau tempo detectado na sua área", e podem exibir um emblema - um número pré-definido ou glifo – no tile. Pense em uma aplicacão de e-mail que avisa o usuário sobre novas mensagens em sua caixa de entrada. Veja alguns exemplos na Figura 3.

Dn175724.228039DAE80AFADBD13C78BD39A25040(pt-br,MSDN.10).png

Figura 3 – Exemplos de notificações

Neste laboratório, você receberá em primeira mão a experiência com tiles secundários, envio de notificações e Pop-Ups adicionados ao Cardápio Eletrônico. Ao final, os usuários serão capazes de fixar receitas favoritas como tiles secundários, ver tiles atualizados pelo serviço de notificação do Windows, e ver os Pop-Ups agendados em ação.

Objetivos

Neste lab você aprenderá:

Criar tiles secundários

Usar envio de notificações para atualizar o tile primário

Agendar mensagem Pop-Up ao usuário mesmo se o aplicativo não estiver rodando

Requirementos do Sistema

Você deverá ter os seguintes itens para completar os exercícios:

  • Microsoft Windows 8
  • Microsoft Visual Studio 2012 RC

Configuração

Você deverá seguir estes passos para preparar o seu computador para estes exercícios:

  • Instalar o Microsoft Windows 8 Release Preview
  • Instalar o Microsoft Visual Studio 2012 RC

Exercício 1: Incorporar Tile Secundário

Neste exercício, você irá adicionar um comando na barra de aplicação da página de detalhes da receita para permitir ao usuário marcar uma receita favorita na tela principal do Windows 8, como um tile secundário. Você também adicionará uma lógica ao Cardápio Eletrônico para exibir a receita correspondente quando a aplicação for ativada pelo tile secundário.

Tarefa 1 – Modificar a Barra de Aplicação

A primeira coisa que faremos é adicionar um botão de comando na barra de aplicação e escrever o código para criar o tile secundário para a respectiva receita.

  • Abra o projeto do Cardápio Eletrônico no Visual Studio.
  • Abra a página ItemDetailPage.xaml e adicione os seguintes códigos XAML destacados em amarelo no final da seção “LeftCommands” da barra de aplicação. Isto criará a opção chamada Pin (fixar) no menu. Note que há a declaração do evento Click chamado OnPinRecipeButtonClicked.
    <StackPanel x:Name="LeftCommands" Orientation="Horizontal" Grid.Column="0" HorizontalAlignment="Left">
        <Button x:Name="BragButton" HorizontalAlignment="Left" 
                Style="{StaticResource BragAppBarButtonStyle}" 
                Click="OnBragButtonClicked" />
        <Button x:Name="PinRecipeButton" HorizontalAlignment="Left"             Style="{StaticResource PinAppBarButtonStyle}"             Click="OnPinRecipeButtonClicked" />
    </StackPanel>
  • Veja na Figura 4 como ficaram os dois botões na barra da aplicação.

Dn175724.94D7E4B4CC79D775EAC829543697EB93(pt-br,MSDN.10).png

Figura 4 – Barra da aplicação

  • Pressione F7 para mostrar os códigos C#. Insira o seguinte código na lista de using no topo da tela.
    using Windows.UI.StartScreen;
  • Agora adicione o seguinte método na classe ItemDetailPage que é o código a ser disparado na opção Pin do menu na barra de aplicação.
    private async void OnPinRecipeButtonClicked(object sender, RoutedEventArgs e)
    {
        var item = (RecipeDataItem)this.flipView.SelectedItem;
        var uri = new Uri(item.TileImagePath.AbsoluteUri);
    
        var tile = new SecondaryTile(
                item.UniqueId,              // Tile ID
                item.ShortTitle,            // Tile short name
                item.Title,                 // Tile display name
                item.UniqueId,              // Activation argument
                TileOptions.ShowNameOnLogo, // Tile options
                uri                         // Tile logo URI
            );
    
        await tile.RequestCreateAsync();
    }
  • Veja a explicação detalhada do código anterior, para um melhor entendimento.
    // O método contém o ASYNC porque será executado assíncrono
    private async void OnPinRecipeButtonClicked(object sender, RoutedEventArgs e)
    {
        // Captura a receita selecionada no controle flipView
        var item = (RecipeDataItem)this.flipView.SelectedItem;
        // Lê a propriedade que contém a URI da imagem da receita selecionada
        var uri = new Uri(item.TileImagePath.AbsoluteUri);
    
        // Monta o Tile secundário com todas as propriedades da receita
        // Esta classe tem diversas opções, pressione F12 no SecondaryTile para pesquisar
        var tile = new SecondaryTile(
                item.UniqueId,              // Tile ID
                item.ShortTitle,            // Tile short name
                item.Title,                 // Tile display name
                item.UniqueId,              // Activation argument
                TileOptions.ShowNameOnLogo, // Tile options
                uri                         // Tile logo URI
            );
    
        // Cria o tile na tela inicial do Windows 8
        await tile.RequestCreateAsync();
    }

Observação

Neste exemplo, o logo do tile é a imagem de 150x150 que está na pasta Images. A imagem do tile secundário pode ser carregada localmente. Eles não podem ser carregados remotamente como as imagens comuns.

  • Pressione F5 para execuar a aplicação. Selecione uma receita para mostrar a página de detalhes da mesma.
  • Clique com o botão direito ou pressione Win + Z para mostrar a barra da aplicação. Certifique-se que a barra exibe o comando Pin, como a Figura 5.

Dn175724.9E0A1593F7A54133BED13609E7FBC6C4(pt-br,MSDN.10).png

Figura 5 – Opções na barra da aplicação

  • Retorne ao Visual Studio e pare a execução.

Tarefa 2 – Modificar o OnLaunched

É fácil criar um tile secundário, mas também é preciso reconhecer quando o aplicativo foi ativado a partir de um tile secundário. Em seguida, irá navegar até a página de detalhes para exibir a receita.

  • Abra a página App.xaml.cs e localize o método OnLaunched.
  • Adicione uma segunda condição dentro da primeira. Veja o código destacado em amarelo a ser adicionado. Este código verifica se os argumentos passados na assinatura do método são diferentes de nulos ou vazios. Caso verdadeiro, é mostrada a página de detalhe da receita (ItemDetailPage) dentro do frame da janela atual.
    // Do not repeat app initialization when already running, just ensure that
    // the window is active
    if (args.PreviousExecutionState == ApplicationExecutionState.Running)
    {
        if (!String.IsNullOrEmpty(args.Arguments))        ((Frame)Window.Current.Content).Navigate(typeof(ItemDetailPage), args.Arguments);
    
        Window.Current.Activate();
        return;
    }

Observação

Quando um aplicativo estilo Modern UI é lançado, LaunchActivatedEventArgs.Kind diz-lhe por que ele foi lançado, e LaunchActivatedEventArgs.PreviousExecutionState informa se o aplicativo foi encerrado após a sua execução anterior. Da mesma forma, quando um aplicativo é iniciado a partir do tile secundário, LaunchActivatedEventArgs.Arguments fornece os argumentos de ativação passados no quarto parâmetro para o construtor do SecondaryTile. O que você está fazendo aqui é navegar para a página de detalhe da receita, para mostrar os dados da receita, se o aplicativo já estava em execução quando o usuário selecionou o tile secundário.

  • Adicione os seguintes códigos no método OnLaunched logo após a instrução que chama SuspensionManager.RegisterFrame. Isto navegará até a página da receita, se a aplicação foi lançada a partir do tile secundário e não estava em execução.
    // If the app was activated from a secondary tile, show the recipe
    if (!String.IsNullOrEmpty(args.Arguments))
    {
        rootFrame.Navigate(typeof(ItemDetailPage), args.Arguments);
        Window.Current.Content = rootFrame;
        Window.Current.Activate();
        return;
    }

Tarefa 3 – Atalho da Receita

Agora vamos testar as modificações para criar o atalho da receita na tela principal do Windows 8 e ter certeza que a receita correta será mostrada quando selecionar o atalho.

  • Pressione F5 para executar a aplicação.
  • Clique com o botão direito ou pressione Win + Z para exibir a barra da aplicação. Note que o botão Pin é exibido, portanto, clique neste botão.
  • Será mostrada uma janela com a imagem e o nome da receita, conforme a Figura 6. No nome você pode escrever o que quiser para identificar o tile secundário na janela principal do Windows 8.

Dn175724.328219E88051C8F36CD9C16247E30D58(pt-br,MSDN.10).png

Figura 6 – Janela Pop-up para criar o atalho da receita

  • Clique no botão Fixar em Iniciar.
  • Retorne ao Visual Studio e pare a execução.
  • Vá para a janela principal do Windows e verifique que agora contém o tile secundário correspondente a esta receita, conforme a Figura 7.

Dn175724.38722503A381907ECA35F656B5884512(pt-br,MSDN.10).png

Figura 7 – Tile da receita

  • Selecione o tile secundário, certifique-se que o Cardápio Eletrônico é iniciado e é exibida a respectiva receita definida no atalho, conforme a Figura 8.

Dn175724.360402CCE0285ACF19F80A93840917BC(pt-br,MSDN.10).png

Figura 8 – Detalhes da receita

  • Pressione Alt+F4 para fechar a aplicação.

Exercício 2: Enviar Notificações

O envio de notificações habilita aplicativos de estilo Modern UI atualizar o conteúdo de seus tiles - primário ou secundário - mesmo quando os aplicativos não estão funcionando. As notificações também podem atualizar o emblema de um tile, que é um número de 0 a 99 ou um glifo especial, tal como um asterisco que aparece no tile, conforme a Figura 9. Notificações originam do Windows Notification Service (WNS), em resposta a apelos de serviços baseados em nuvem associados à sua aplicação. Neste exercício, você adicionará o envio de notificações para o Cardápio Eletrônico.

Dn175724.56B8BA95D2AABA4D75C139155497D6A3(pt-br,MSDN.10).png

Figura 9 – Exemplo de emblema (badge) no tile

Veja na Figura 10 um exemplo de alguns emblemas (badges) permitidos na notificação.

Dn175724.3C3821F8A3CDE48E4345E72703697E8B(pt-br,MSDN.10).png

Figura 10 – Alguns badges permitidos

Tarefa 1 – Modificar o Manifesto da Aplicação

A Microsoft já implementou um serviço do Windows Azure que o Cardápio Eletrônico pode chamar para assinar o envio de notificações e transmiti-las através dos WNS. Quando o serviço foi implantado, foi configurado para transmitir as notificações para aplicativos que possuem um nome de pacote especial de um determinado editor ("Contoso"). Para receber notificações enviadas pelo serviço, você precisa modificar o manifesto do aplicativo para usar o nome do pacote correto e publisher ID.

  • No Solution Explorer, dê um duplo clique no arquivo de manifesto Package.appxmanifest para abri-lo. É preciso seguir os próximos passos com atenção para simular o envio de notificações diretamente do WNS.
  • No editor do manifesto, clique na guia Packaging.
  • Troque o campo Package Name para “BUILD.87821274-9e97-488c-b5af-69dace508bff”. Quando se cria um projeto, o Visual Studio gera automaticamente um GUID único. No entanto, precisamos alterar este GUID justamente porque na plataforma de WNS da Microsoft no Azure já está cadastrada uma aplicação para enviar notificações para este GUID alterado.
  • Altere o Package Display Name para “Contoso Cookbook”.
  • Altere o Publisher Display Name para “Contoso”.
  • Agora é preciso adicionar um certificado que se encontra junto com os arquivos de Assets, no material de apoio para os exercícios. Na linha Publisher, atualmente está configurado para o meu nome (CN=Renato). Para alterar, clique no botão “Choose Certificate” para abrir a janela conforme a Figura 11.

Dn175724.F5452D9E8CFD8038028E5E22FBA0E42C(pt-br,MSDN.10).png

Figura 11 – Escolher o certificado

  • Clique no botão “Configure Certificate” e nas opções abertas, selecione “Select from file…”, conforme a Figura 12.

Dn175724.000350A8BCC35D9DB41E6FBB0889E01F(pt-br,MSDN.10).png

Figura 12 – Selecionar um certificado a partir de um arquivo

  • Na janela aberta para selecionar um arquivo, localize a pasta Assets/Certs do material de apoio dos exercícios, conforme a Figura 13. Existe o arquivo chamado Contoso.pfx, e este deverá ser selecionado. Clique no botão Abrir.

Dn175724.B1A667AD2C4B25C7FB1FA306809092CA(pt-br,MSDN.10).png

Figura 13 – Selecionar o Contoso.pfx

  • Veja na Figura 14 que o certificado selecionado no Contoso.pfx mostra as devidas informações necessárias para que o servidor de notificações entenda esta aplicação como sendo válida.

Dn175724.9B3E2851D719E37E5CE4D9E2DF3926CD(pt-br,MSDN.10).png

Figura 14 – Informações do Contoso.pfx

  • Clique no botão OK e certifique-se que os dados de Package Name, Package Display Name, Publisher e Publisher Display Name estão de acordo com o mostrado na Figura 15.

Dn175724.B75D297B661B3A29FCD9B06B0A66DB5F(pt-br,MSDN.10).png

Figura 15 – Dados completos do manifesto

  • Pressione CTRL + S para salvar as alterações no arquivo Package.appxmanifest.

Tarefa 2 – Assinar o Envio de Notificações

Para assinar o envio de notificações, um aplicativo estilo Modern UI estabelece um canal de notificação do WinRT e passa a URI do canal para um serviço. Quando o serviço deseja atualizar o tile, ele chama o WNS usando a URI do canal, e o WNS, por sua vez, entrega a notificação para o aplicativo. Isto é expressado graficamente na Figura 16, para um melhor entendimento. Vale dizer que o WNS é um serviço gratuito da Microsoft que usa a nuvem (Cloud Service) para ligar o WNS à aplicação Modern UI.

Dn175724.BD5BC7B24B1FFF1FE4CB5714D5B3AC71(pt-br,MSDN.10).png

Figura 16 – Visão geral do envio de notificação

Vamos pegar um canal URI ao iniciar o Cardápio Eletrônico e usá-lo para se inscrever para enviar notificação.

  • Abra o arquivo App.xaml.cs e adicione os seguintes códigos na lista de using no topo do arquivo.
    using Windows.UI.Notifications;
    using Windows.Networking.PushNotifications;
    using Windows.Security.Cryptography;
    using System.Net.Http;
    using Windows.Networking.Connectivity;
    using Windows.UI.Popups;
  • Localize o método OnLaunched. Adicione os seguintes códigos contidos na “#region Notificações” logo após o registro do manipulador do evento CommandsRequested.
	// Register handler for CommandsRequested events from the settings pane
    SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;
    
    #region Notificações
    // Clear tiles and badges
    TileUpdateManager.CreateTileUpdaterForApplication().Clear();
    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Clear();
    
    // Register for push notifications
    var profile = NetworkInformation.GetInternetConnectionProfile();
    
    if (profile.GetNetworkConnectivityLevel() == NetworkConnectivityLevel.InternetAccess)
    {
        var channel = await PushNotificationChannelManager.CreatePushNotificationChannelForApplicationAsync();
        var buffer = CryptographicBuffer.ConvertStringToBinary(channel.Uri, BinaryStringEncoding.Utf8);
        var uri = CryptographicBuffer.EncodeToBase64String(buffer);
        var client = new HttpClient();
    
        try
        {
            var response = await client.GetAsync(new Uri("http://ContosoRecipes8.cloudapp.net?uri=" + uri + "&type=tile"));
    
            if (!response.IsSuccessStatusCode)
            {
                var dialog = new MessageDialog("Unable to open push notification channel");
                dialog.ShowAsync();
            }
        }
        catch (HttpRequestException)
        {
            var dialog = new MessageDialog("Unable to open push notification channel");
            dialog.ShowAsync();
        }
    }
    #endregion
  • Retorne ao Visual Studio e pare a execução.

Observação

A chamada para CreatePushNotificationChannelForApplicationAsync requer um canal de comunicação do Modern UI de tempo de execução. Neste exemplo, você está usando o Base-64-encoding para a URI do canal para passar ao serviço de receita uma seqüência de texto. Base-64-encoding não é estritamente necessário, mas protege contra a possibilidade de que o canal URI possa incluir caracteres que exigem Base-64-encoding para inclusão da seqüência de texto. Você está usando HttpClient que faz parte do .NET (WinRT não inclui suporte de rede HTTP) para disparar uma chamada do serviço da receita hospedado no Windows Azure e passar o URI do canal. Esse serviço mantém um registro de todos os clientes (URIs) que se inscreveram e dispara notificações aos clientes a cada 2 minutos por 20 minutos. Cada canal URI passado para o serviço identifica uma determinada aplicação rodando no computador.

Tarefa 3 – Testar a Notificação

Vamos testar a notificação desta aplicação para ter certeza que foi enviada com sucesso.

  • Pressione F5 para executar a aplicação, onde o tile primário será redefinido e inscrito para notificação.
  • Retorne ao Visual Studio e pare a execução para fechar a aplicação.
  • Vá para a tela inicial do Windows 8 e localize o tile primário da aplicação. Se o tile estiver como quadrado, clique com o botão direito e selecione Maior para mostrar o logotipo largo.
  • Olhe para o tile por alguns momentos. Dentro de dois minutos o tile mostrará uma das várias receitas em destaque, conforme a Figura 17.

Dn175724.74B39DE5CB3DA75D3D1FEF77D43F4EEC(pt-br,MSDN.10).png

Figura 17 – Tile primário após a atualização da receita

  • Volte em mais dois minutos e verifique se o tile mudou novamente. Note que tudo isso está acontecendo mesmo que o aplicativo não esteja executando.

Observação

Se você quiser ver notificações de emblema em ação, troque o "type=tile" na URI passada para HttpClient.GetAsync por "type=badge". Execute o aplicativo novamente e após cerca de dois minutos, um número, ou "badge", aparecerá no tile, conforme a Figura 18.

Dn175724.0A019036097D2751F587DA0DE3827089(pt-br,MSDN.10).png

Figura 18 – Tile com emblema “badge”

Exercício 3: Agendar Notificações

Toasts são mensagens que aparecem no "toast" do Windows no canto direito superior da tela. Toasts aparecem independentemente do aplicativo que os agendou estar rodando ou não, e eles podem ser agendados pela própria aplicação (enquanto ele estiver sendo executado), ou exibido em resposta às notificações do Serviço de Notificação do Windows. Além disso, eles podem incluir sons e textos.

Neste exercício, você agendará um toast no Cardápio Eletrônico para simular um lembrete.

Tarefa 1 – Modificar a Barra de Aplicação

A fim de fornecer uma interface para programação de um toast, vamos acrescentar um comando Lembrete para a barra de aplicação e escrever um manipulador para ele.

  • Abra o arquivo ItemDetailPage.xaml e adicione os seguintes códigos na seção <Page.Resources>. Este bloco definirá o estilo do botão de lembrete na barra de aplicação. Note que o TargetType aponta somente para Button, ou seja, se aplica somente aos botões. Todos os demais estilos estão baseados BasedOn no recurso AppBarButtonStyle, que está no arquivo StandardStyles.xaml, na pasta Common.
    <Style x:Key="ReminderAppBarButtonStyle" TargetType="Button" BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="ReminderAppBarButton"/>
        <Setter Property="AutomationProperties.Name" Value="Lembrete"/>
        <Setter Property="Content" Value="&#xE121;"/>
    </Style>
  • Ainda no ItemDetailPage.xaml, adicione os seguintes códigos no final do bloco “LeftCommands”, para criar o botão na barra de aplicação. O botão chama-se ReminderButton e o visual está definido no recurso ReminderAppBarButtonStyle, definido anteriormente.
	<Button x:Name="ReminderButton" HorizontalAlignment="Left" 
            Style="{StaticResource ReminderAppBarButtonStyle}" 
            Click="OnReminderButtonClicked" />
  • Certifique-se que o menu está montado de acordo com a Figura 19.

Insert Caption

Dn175724.85E4796B53A4DD69C6CBB686543DAC6F(pt-br,MSDN.10).png

Figura 19 – Menu com a opção Lembrete

  • Pressione F7 para mostrar os códigos C# do arquivo ItemDetailPage.xaml.cs. Adicione os seguintes códigos na lista de using no topo do arquivo.
	using Windows.UI.Notifications;
    using Windows.UI.Popups;
  • O botão chamado ReminderButton, inserido na barra de aplicação, aponta para o evento Click="OnReminderButtonClicked". Sendo assim, adicione os seguintes códigos para o método no arquivo ItemDetailPage.cs.
	private async void OnReminderButtonClicked(object sender, RoutedEventArgs e)
    {
        var notifier = ToastNotificationManager.CreateToastNotifier();
    
        // Make sure notifications are enabled
        if (notifier.Setting != NotificationSetting.Enabled)
        {
            var dialog = new MessageDialog("Notificações estão desativadas neste momento. ");
            await dialog.ShowAsync();
            return;
        }
    
        // Get a toast template and insert a text node containing a message
        var template = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);
        var element = template.GetElementsByTagName("text")[0];
        element.AppendChild(template.CreateTextNode("Lembrete, finalizar o projeto"));
    
        // Schedule the toast to appear 30 seconds from now
        var date = DateTimeOffset.Now.AddSeconds(30);
        var stn = new ScheduledToastNotification(template, date);
        notifier.AddToSchedule(stn);
    }
  • Veja uma explicação detalhada deste código, para um melhor entendimento.
	// Veja que a assinatura do método contém o ASYNC para ser assíncrono
    private async void OnReminderButtonClicked(object sender, RoutedEventArgs e)
    {
        // Cria o Toast Notification que permite agendar ou remover notificações
        var notifier = ToastNotificationManager.CreateToastNotifier();
    
        // Verifica se as notificações estão ativadas
        if (notifier.Setting != NotificationSetting.Enabled)
        {
            // Se não estiver ativada, exibe uma mensagem na caixa de diálogo
            var dialog = new MessageDialog("Notificações estão desativadas neste momento. ");
            // Mostra a caixa de diálogo
            await dialog.ShowAsync();
            // para a execução neste ponto
            return;
        }
    
        // Usa o modelo XML de toast e inseri um texto com uma mensagem
        var template = ToastNotificationManager.GetTemplateContent(ToastTemplateType.ToastText01);
        // Adiciona um nó ao XAML contendo o respectivo texto
        var element = template.GetElementsByTagName("text")[0];
        element.AppendChild(template.CreateTextNode("Lembrete, finalizar o projeto"));
    
        // Agenda o toast para aparecer daqui 30 segundos
        var date = DateTimeOffset.Now.AddSeconds(30);
        var stn = new ScheduledToastNotification(template, date);
        notifier.AddToSchedule(stn);
    }
  • Pressione F5 para executar a aplicação. Selecione qualquer receita para ver os detalhes da mesma.
  • Exiba a barra de aplicação (Win + Z) e veja que há o comando Lembrete, conforme a Figura 20.

Dn175724.D05E8AFA06BF3BBC58A285DE92777767(pt-br,MSDN.10).png

Figura 20 – Comando Lembrete

  • Retorne ao Visual Studio e pare a aplicação.

Tarefa 2 – Habilitar o Notificação Toast

Se você executar a aplicação não irá conseguir enviar uma notificação porque a ela não está habilitada para isto. Veja na Figura 21 a mensagem exibida alertando sobre esta funcionalidade.

Dn175724.2483DD65E31DC8788D6CE93E2AE6B741(pt-br,MSDN.10).png

Figura 21 – Alerta de notificação desabilitada

Sendo assim, vamos alterar o arquivo de manifesto da aplicação para habilitar a notificação.

  • Abra o arquivo Package.appxmanifest e mostre a guia Application UI.
  • Localize o item “Toast capable” e altere para “Yes”, conforme a Figure 22.

Dn175724.433905F1CD51BACE518B32D384AAF8FB(pt-br,MSDN.10).png

Figura 22 – Habilitar notificação

Observação

A opção "Toast Capable" deve estar ligada antes do aplicativo agendar um Toast. Uma vez que esta configuração estiver ativada, um botão de alternância aparece na página de permissões do aplicativo que permite ao usuário ativar as notificações ligado e desligado. O método OnRedminderButtonClicked adicionado, verifica se as notificações estão habilitadas e avisa o usuário se não estiver.

Tarefa 3 – Testar o Toast

A tarefa final é testar o código para agendar a notificação e ver o restultado.

  • Pressione F5 para executar a aplicação.
  • Selecione uma receita para ver os detalhes.
  • Exiba a barra de aplicação (Win + Z) e selecione o botão Lembrete, conforme a Figura 23.

Dn175724.0F75944122483F91D303E31FE41C26E4(pt-br,MSDN.10).png

Figura 23 – Botão Lembrete para agendar a notificação

  • Retorne ao Visual Studio e pare a execução.
  • Vá para a tela inicial do Windows 8 ou qualquer outra aplicação e aguarde cerca de aproximadamente 30 segundos para aparecer a notificação no canto direito superior, conforme a Figura 24.

Dn175724.F4979F8A612BC86AD652CB4DF55E98C6(pt-br,MSDN.10).png

Figura 24 – Notificação exibida

  • Quando a notificação aparecer, clique nela para ir direto para o Cardápio Eletrônico.

Resumo

Nestes execícios vimos tiles secundários, envio de notificações e o agendamento de notificações em ação. Estes são apenas alguns exemplos que você pode fazer com tiles e notificações para atualizar o conteúdo quando o aplicativo não está executando. Percorremos um longo caminho desde que começamos o projeto do Cardápio Eletrônico. O próximo passo é explorar as APIs do Windows Store que permite ao usuário simular uma compra de aplicação e de receitas adicionais. É extremamente fácil de monetizar uma aplicação Modern UI, deixe a Microsoft fazer o trabalho de marketing para anunciar a sua aplicação e cobrar taxas de compra.

Sobre o Autor

Renato Haddad (rehaddad@msn.comwww.renatohaddad.com ) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010/2012, ASP.NET 4, ASP.NET MVC, Entity Framework, Reporting Services, Windows Phone e Windows 8. Visite o blog https://weblogs.asp.net/renatohaddad.

| Home | Artigos Técnicos | Comunidade