Guia de início rápido: usando a biblioteca NotificationsExtensions em seu código (HTML)

  • Artigo

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]

Observação  Não está usando JavaScript? Veja Guia de início rápido: Usando a biblioteca NotificationsExtensions em seu código (XAML).

 

A biblioteca de modelos de objetos NotificationsExtensions permite fornecer conteúdo de modelos XML de bloco, selo e notificação do sistema, sem usar o DOM (Document Object Model) XML. Isso oferece a você um método mais simples, mais nítido e mais direto de fornecer conteúdo de notificação. Usando essa biblioteca no Microsoft Visual Studio, você tem as seguintes vantagens:

  • IntelliSense, que lista as marcas e os atributos disponíveis como propriedades de objetos, sem ter que consultar a documentação do esquema de elementos e estrutura.
  • Uma função de fábrica que permite criar notificações de esqueleto para você preencher com seu conteúdo.
  • Uma forma simplificada de incluir vários tamanhos de blocos em sua carga de notificação (uma prática recomendada!).
  • Uma maneira útil de encontrar e preencher atributos de texto e imagem, nomeados para lhe passar mais informações sobre seu uso pretendido, tamanho ou posição no modelo.

Observação  A biblioteca NotificationsExtensions é liberada sob uma MS-LPL (Licença Pública Limitada da Microsoft). Você pode reutilizar a biblioteca em seu aplicativo da Windows Store ou serviço Web e personalizá-la conforme necessário.

 

Pré-requisitos

  • Um conhecimento prático dos termos e conceitos de bloco e notificação. Para saber mais, consulte Blocos, selos e notificações.
  • A capacidade de criar um aplicativo da Windows Store básico com JavaScript usando as APIs do Tempo de Execução do Windows. Para saber mais, veja Criar o seu primeiro aplicativo da Windows Store em JavaScript.
  • O conhecimento básico de XML possibilitará uma maior noção do que a biblioteca NotificationsExtensions está criando para você.

Instruções

1. Acessar a biblioteca NotificationsExtensions

A biblioteca NotificationsExtensions está incluída em vários exemplos baixáveis de notificações, bloco e notificações do sistema e pode ser copiada deles para uso próprio. Nós vamos usar o exemplo principal de blocos e selos neste procedimento.

Observação  NotificationsExtensions é uma biblioteca C#, mas pode ser incluída e usada com projetos JavaScript, C#, C++ e Microsoft Visual Basic.

 

  1. Baixe o Exemplo de blocos e notificações de aplicativo do Centro de Desenvolvimento do Windows.
  2. Descompacte o arquivo “App tiles and badges sample.zip” em uma pasta de sua escolha.
  3. Vá até a pasta em que você descompactou o exemplo. Copie a pasta NotificationsExtensions do exemplo no seu próprio diretório do projeto, como um irmão do arquivo .sln do seu projeto.

2. Incluir a biblioteca em seu projeto

  1. Inicie o Visual Studio e abra o projeto.
  2. No Explorador de Projeto, clique com o botão direito do mouse na solução na parte superior da árvore.
  3. Selecione Adicionar e, em seguida, Projeto Existente.
  4. Navegue até a pasta NotificationsExtensions no seu projeto e selecione o arquivo NotificationsExtensions.csproj.
  5. Em cada projeto dentro da sua solução, clique com o botão direito do mouse em Referências e selecione Adicionar Referência.
  6. No Gerenciador de Referências, em Solução, selecione NotificationsExtensions e, em seguida, clique em OK. Neste ponto, o NotificationsExtensions estará pronto para uso.

Observação  Se não desejar incluir o projeto NotificationsExtensions completo em sua solução, é possível criar o NotificationsExtensions como um projeto autônomo e simplesmente incluir o NotificationsExtensions.winmd como uma referência em seu projeto.

 

3. Incluir a biblioteca em seu servidor de aplicativos

Você também pode usar NotificationsExtensions no seu código de servidor de aplicativo se estiver usando ASP.NET para enviar notificações por push aos Serviços de Notificação por Push do Windows (WNS) ou se estiver implementando um serviço ASP.NET para tratar de solicitações de atualizações periódicas de blocos ou notificações. O único cuidado é que você tem que adicionar o símbolo de compilação WINRT_NOT_PRESENT às propriedades de NotificationsExtensions do projeto.

  1. Vá até o diretório em que você descompactou o exemplo. Abra a pasta de exemplo e copie sua pasta NotificationsExtensions para um novo local de sua preferência.

  2. Selecione o arquivo NotificationsExtensions.csproj para abrir o projeto no Visual Studio.

  3. No menu Projeto, escolha Propriedades de NotificationsExtensions.

  4. Altere a seleção Tipo de Saída para “Biblioteca de Classes” para criar um arquivo DLL.

  5. Também nas propriedades NotificationsExtensions, selecione a guia Compilar.

  6. Na categoria Geral, adicione “WINRT_NOT_PRESENT” à caixa Símbolos de compilação condicionais. Se a caixa já tiver outros símbolos, adicione um ponto e vírgula como separador antes de “WINRT_NOT_PRESENT”.

  7. Pressione F7 ou use Compilar > Compilar Solução para compilar o projeto.

  8. Copie o arquivo NotificationsExtensions.dll criado de sua pasta (em \NotificationsExtensions\bin\Debug\) no código do servidor de aplicativos.

4. Usar a biblioteca em seu código

Agora é possível usar NotificationsExtensions como um objeto em seu código. Ela inclui três membros importantes:

  • BadgeContent
  • TileContent
  • ToastContent

Cada um desses tipos de conteúdo por sua vez contém membros que representam os elementos e atributos para cada tipo.

O exemplo a seguir usa NotificationsExtensions para atribuir um valor a um selo numérico e o enviar ao bloco.


var badgeContent = NotificationsExtensions.BadgeContent.BadgeNumericNotificationContent(85);
var badgeNotification = badgeContent.createNotification();

Windows.UI.Notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

Para efeito de comparação, o exemplo a seguir mostra o mesmo procedimento sem NotificationsExtensions, usando a manipulação direta do DOM XML.


var notifications = Windows.UI.Notifications;                        
var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(notifications.BadgeTemplateType.badgeNumber);
var badgeAttributes = badgeXml.getElementsByTagName("badge");
badgeAttributes[0].setAttribute("value", "85");
var badgeNotification = new notifications.BadgeNotification(badgeXml);

BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);

O próximo exemplo usa NotificationsExtensions para fornecer texto a uma notificação de bloco. A primeira etapa usa a função TileContentFactory de NotificationsExtensions para criar um objeto baseado em determinado modelo. Existe uma função de criação separada para cada modelo; basta anexar a palavra “create” ao nome do modelo, como “createTileWide310x150ImageAndText01”.

O objeto baseado no modelo depois fornece IntelliSense para mostrar os elementos disponíveis nesse modelo, como propriedades nomeadas de acordo com a sua função, como textHeading, textBodyWrap, textBody1 ou textColumn1Row4. Isso permite-lhe saber com precisão qual elemento você está atribuindo.

Depois de atribuir os valores às propriedades, envie a notificação de bloco normalmente.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Text01();

tileContent.textHeading.text = "Hello!";
tileContent.textBody1.text = "One";
tileContent.textBody2.text = "Two";
tileContent.textBody3.text = "Three";

var tileNotification = tileContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Este exemplo usa NotificationsExtentions para atribuir texto e uma imagem a uma notificação. Assim como no texto, os elementos de imagem são mostrados como propriedades nomeados de acordo com sua função no modelo, como imageMain e imageSmallColumn2Row2.


var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150ImageAndText01();

tileContent.textCaptionWrap.text = "This tile notification uses ms-appx images";

tileContent.image.src = "ms-appx:///images/redWide.png";
tileContent.image.alt = "A red rectangle";

Este exemplo usa NotificationsExtensions para definir uma notificação de bloco completa. Isso ilustra uma peculiaridade dessa biblioteca—a ordem na qual você adiciona os tamanhos de modelo à carga importante.

  • Somente é possível adicionar um modelo pequeno (quadrado 71x71—somente para Windows Phone 8.1) a um modelo médio.
  • Somente é possível adicionar um modelo médio (quadrado 150x150) a um modelo amplo.
  • Somente é possível adicionar um modelo amplo a um modelo grande (quadrado 310x310—somente para Windows).

Se você tentar fazer isso em uma ordem diferente, perceberá que as propriedades necessárias não estão disponíveis.


var tileLargeContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare310x310Text09();
tileLargeContent.textHeadingWrap.text = "Lorem ipsum dolor sit amet, consectetur";
tileLargeContent.textHeading1.text = "Lorem ipsumo";
tileLargeContent.textHeading2.text = "Lorem ipsumo";
tileLargeContent.textBody1.text = "VivAmus tincidunt convallis urn";
tileLargeContent.textBody2.text = "VivAmus tincidunt convallis urn";

var tileWideContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWide310x150Text04();
tileWideContent.textBodyWrap.text = "Lorem ipsum dolor sit amet, consectetur";

var tileMediumContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquare150x150Block();
tileMediumContent.textBlock.text = "24";
tileMediumContent.textSubBlock.text = "Aliquam";
        
tileWideContent.square150x150Content = tileMediumContent;
tileLargeContent.wide310x150Content = tileWideContent;

var tileNotification = tileLargeContent.createNotification();

Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

Esse exemplo usa NotificationsExtensions para fornecer conteúdo para uma notificação do sistema, incluindo parâmetros de texto, de imagem, de áudio, de duração e de inicialização.


var toastContent = NotificationsExtensions.ToastContent.ToastContentFactory.createToastImageAndText01();

toastContent.textBodyWrap.text = "Lorem ipsum dolor sit amet";

toastContent.image.src = "ms-appx:///images/redWide.png";
toastContent.image.alt = "A red rectangle";

toastContent.audio.content = NotificationsExtensions.ToastContent.ToastAudioContent.loopingAlarm;
toastContent.audio.loop = true;

toastContent.duration = NotificationsExtensions.ToastContent.ToastDuration.long;

toastContent.launch = '{"type":"toast","param1":"12345","param2":"67890"}';

var toast = toastContent.createNotification();
Windows.UI.Notifications.ToastNotificationManager.createToastNotifier().show(toast);

Resumo

Este tópico mostrou como usar NotificationsExtensions para simplificar a criação de notificações de selo, de bloco e do sistema. Essa maneira é mais simples de popular um modelo do que lidar diretamente com o DOM XML.