Windows Store Apps: Utilizando Live Tiles

O conceito de live tiles surgiu com o lançamento da primeira versão do Windows Phone, em Outubro de 2010, quando a Microsoft começou a introduzir o seu novo modelo para a interface de usuário chamado “Moderno” (anteriormente chamado de “Metro”).

Esse modelo de interface de usuário foi baseado no finado dispositivo Zune HD, que nem chegou a ser vendido oficialmente no Brasil. Basicamente, esse padrão de interface utiliza blocos na tela inicial do aparelho para os atalhos de cada uma das aplicações.

Se fizermos uma relação com as versões mais antigas do Windows, poderíamos entender que cada tile seria um ícone na área de trabalho (ilustrado na Figura 1).

Figura 1. Exemplo de tiles no Windows Phone

O grande diferencial das tiles introduzidas no Windows Phone é que elas podem exibir informações adicionais em tempo real sobre a aplicação que elas representam, como notificações. É daí que surgiu o termo “live tile” (“tile viva”).

Com a chegada do Windows 8, a Microsoft introduziu também a interface moderna no seu sistema operacional para computadores.

A interface do Windows 8 é dividida entre o desktop “normal”, como estávamos acostumados, e a “tela inicial” (Figura 2), que nada mais é do que uma versão adaptada da tela inicial do Windows Phone.

Nessa tela inicial podemos organizar as tiles da maneira que quisermos, e cada uma dessas tiles aponta para os mais diversos aplicativos instalados no computador.

Figura 2. Exemplo de tiles no Windows 8

Como você deve imaginar, a ideia de tiles é um dos grandes diferenciais da atual plataforma Microsoft (tanto no Windows Phone quanto no Windows 8). É por isso que nós, desenvolvedores, não podemos deixar de aproveitar esse diferencial e devemos implementar, sempre que possível, o suporte às live tiles nas nossas aplicações.

Nota: Uma tradução literal para o termo “tile” em português seria “azulejo”, mas essa tradução não é amplamente utilizada. Portanto, esse artigo utilizará o termo original em inglês.

A exibição de tiles estáticas (não “vivas”) é feita de forma automática pelo Windows 8. Não é à toa que o processo de certificação dos aplicativos a serem publicados na Windows Store demanda que uma infinidade de imagens seja definida no manifesto da aplicação. São justamente essas as imagens utilizadas pelo Windows 8 para exibir as tiles estáticas da nossa aplicação.

Para demonstrar esse conceito, utilizando o Visual Studio 2013, vamos criar um projeto do tipo “Blank App”, que se encontra dentro da categoria “Store Apps” (subcategoria “Windows Apps”). Esse será o projeto que utilizaremos no restante do artigo.

Com o projeto criado, antes de configurar as imagens para as tiles da aplicação, precisamos primeiramente adicionar as imagens ao projeto. Não existe uma regra fixa definida para o local onde essas imagens devem ser adicionadas, mas a maioria dos desenvolvedores costuma armazená-las na pasta “Assets” do projeto.

Essa pasta é gerada automaticamente ao criarmos um aplicativo para o Windows 8. Note na Figura 3 a seguir que foram adicionadas cinco imagens na pasta “Assets” com os tamanhos mencionados anteriormente.

Figura 3. Imagens para as tiles estáticas adicionadas na pasta Assets

Uma vez adicionadas as imagens ao projeto, precisamos ir até o manifesto da aplicação para associá-las com os diversos tamanhos de tiles disponíveis. Para abrir o manifesto da aplicação, vá até o “Solution Explorer” e dê um duplo clique no item “Package.appxmanifest”.

No manifesto da aplicação, vá até a aba “Visual Assets” e confira as categorias relacionadas às tiles na lista à esquerda da tela, como mostra a Figura 4.

Figura 4. Itens relacionados às imagens para as tiles no manifesto da aplicação

Associe as imagens adicionadas anteriormente com o item correspondente para cada tamanho de tile. Nessa seção também é possível configurar diversas outras propriedades relacionadas às tiles, como um nome abreviado, tamanho padrão e cor de fundo da tile." [...] continue lendo...