A funcionalidade de live tiles é
deixar a experiência do usuário muito mais rica em aplicativos desenvolvidos
para o Windows Phone e Windows 8, uma vez que podemos exibir informações extremamente
úteis diretamente na tela inicial do sistema operacional, sem que o usuário
tenha que abrir o aplicativo. Esse artigo é útil para todo desenvolvedor que
estiver implementando um aplicativo para a Windows Store e que queira proporcionar
uma experiência rica e interessante para o usuário através da utilização de
live tiles, que é um dos grandes diferenciais dos novos aplicativos para a
plataforma Microsoft.
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.
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.
Para que o aplicativo suporte todos os formatos de tiles, é necessário definir pelo menos cinco imagens no manifesto da aplicação: quatro imagens para tiles quadradas (30x30, 70x70, 150x150, 310x310) e uma imagem para tile retangular (310x150).
O formato 30x30 será utilizado na lista de aplicativos e os outros formatos serão utilizados nas tiles do seu aplicativo, dependendo do tamanho de tile que o usuário escolher.
Veja a seguir exemplos dos mais diversos formatos de imagens sendo utilizados em tiles no Windows 8. As Figuras 5 a 7 mostram como ficam as tiles da nossa aplicação já no menu Iniciar do Windows.
Figura 5. Imagem de 30x30 sendo exibida na lista de aplicativos do Windows
Figura 6. Tile quadrada de um suposto aplicativo da DevMedia no canto inferior direito
Figura 7. Tile
retangular de um suposto aplicativo da DevMedia n ...
