Windows Phone 8 : Novidades nos Live tiles para desenvolvedores

Windows Phone 8 : Novidades nos Live tiles para desenvolvedores

Talvez a feature mais bacana do Windows Phone sejam os Live Tiles. Acredito que muitos concordariam com essa afirmação. Os Tiles “ao vivo” são o coração do sistema operacional, o motivo de ser tão diferente do Android e Ios. Quando você pega um Windows Phone na mão, são os tiles que te chamam a atenção, seja por ser algo totalmente diferente, em relação a cores ou por conter animações, seja pelo fato de que cada app pode ter o seu tile, colorido, informando sobre essa determinada aplicação.

Adicione ai o fato de que cada pessoa colocará os tiles em sua tela de maneira diferenciada e você tem inúmeras combinações possíveis.

Com o Windows Phone 8 temos algumas questões novas muito interessantes e hoje vamos mostrar como tudo continua simples e, acima de tudo, parecido com o que tínhamos anteriormente (nem preciso comentar mais uma vez sobre o “Silverlight morreu não é mesmo?”).

Do lado do consumidor, algo muito interessante é que agora é possível alterar o tamanho dos tiles conforme desejar. Isso gera telas iniciais muito mais personalizadas. Vejam o exemplo:

Esse é o meu telefone. Sem nem olhar qualquer telefone de vocês, tenho a plena certeza de que ele é diferente. Seja no tema, na cor laranja, nas aplicações, nas informações mostradas.

Na minha tela inicial tenho tiles de três tamanhos, e sou eu, como usuário, quem define tamanho e posicionamento de cada um.
Anteriormente não tínhamos o tile de tamanho pequeno (como os que estão na primeira linha superior do meu celular) e somente aplicações nativas podiam ocupar o chamado tile “wide”, ou de tamanho grande (como o ocupado pelo tile da minha noiva, Tuaine, na última linha).

Resumindo, para quem ainda tem dúvidas ou está começando agora o desenvolvimento para Windows Phone, tiles são uma forma de, através da tela inicial, já entregar uma informação ao seu usuário. Note que não preciso entrar na aplicação da ESPN para verificar um resultado que me interessa (posso escolher os times e esportes que o tile irá me mostrar). Sei a quantidade de episódios que estou atrasado nas séries que acompanho e quais são as próximas com novos episódios. Se eu ou a minha noiva tivermos updates em nossas redes sociais, essas informações já podem ser mostradas também na tela inicial.

Muito interessante, mas o que nós devs ganhamos na nossa versão do S.O.?
Agora não só é possível para o desenvolvedor criar aplicações que entreguem os três tamanhos de tiles disponíveis, alterando informações e imagens conforme o usuário requisita mais ou menos detalhes conforme tamanho escolhido, mas também está disponível a nós três modelos de tiles, dois deles tipos de tiles anteriormente só disponíveis para aplicações nativas.

Os templates para tiles são:

Flip Template

Esse tipo de tile é o que já estava disponível desde o 7.5, com a parte frontal e traseira disponível para alteração por parte do desenvolvedor. O tile gira e mostra os dois lados de informação ao usuário. A diferença agora é que o tile, no tamanho maior, pode mostrar mais textos e, quando escolhido pelo usuário para ficar no tamanho pequeno, não irá girar e mostrará apenas a parte da frente.
Alterações permitidas:
Na parte da frente, título (“Contoso” na foto), contador (“10”) e uma imagem de fundo.
Na parte de trás, Texto (mostrado como “Lorem ipsum ...”), Título (“Contoso”) e uma imagem de fundo (que nesse caso não foi utilizada, mantendo a cor de acentuação escolhida pelo usuário – vermelho)

Iconic Template

De acordo com a Microsoft, uma das features mais requisitadas era essa, o Iconic tile é a representação do tile com os princípios de design do Windows Phone. Esse tipo de tile era utilizado já na versão 7.x pelo email e alguns outros aplicativos, mas não era disponibilizada no sdk. Agora você pode criar seu tile com esse formato.

Alterações permitidas:

Sua imagem deve ser branca. Caso coloque uma imagem com outra cor, ela será alterada para branco. Essa imagem é o logo, que aparece nos três tiles. O contador (“10” na imagem), título (“Contoso”) e, no caso do tile mais largo, três textos que podem ser utilizados pelo desenvolvedor. Notem como é claro que o usuário tem opções infinitas de personalização e como cada alteração de tamanho de tile gera um novo tipo de tela inicial.

A cor também é alterável, podendo tornar o tile algo realmente icônico para sua empresa/app.

Cycle Template

O template cíclico é talvez o que eu mais gostaria de ver. Para algumas aplicações esse tipo de tile cai muito bem. É o tipo de tile que tínhamos no Windows Phone 7.5 para fotos, em que um slideshow acontece na sua tela inicial. Agora no Windows Phone 8 o desenvolvedor pode criar sua app e colocar 9 imagens para que as mesmas fiquem passando no tile. Lembrando que essa alteração só acontece com tiles no tamanho médio e grande. Novamente, a decisão está na mão do usuário, sempre.

Além disso, é possível, mas nunca obrigatório, ter um contador para mostrar a quantidade de novidades do seu aplicativo.

E, falando em código, como trabalhar com os novos tiles?

Vamos ao Visual Studio!

Crie um novo aplicativo Windows Phone 8.

Após isso, vá até o folder Properties e clique no arquivo WMAppManifest.xm. Você verá que agora temos um designer do arquivo, tornando mais fácil seu update.

Aqui você pode definir as propriedades iniciais do seu tile principal. Lembrando que toda aplicação tem ao menos um tile, que é o principal e é o tile que o usuário traz para a tela inicial ao selecionar seu app na lista de aplicativos.

Nosso tile principal será do tipo Flip (e depois o atualizaremos).

Usei imagens diferentes para cada tamanho de tile. Isso foi feito para entenderem alguns conceitos. No caso do tile médio iremos usar como imagem de fundo + adição de um título, mas no caso do wide tile, iremos utilizar apenas a imagem. Lembrem-se, como podemos atualizar o tile com uma imagem disponível remotamente, é plenamente possível montar uma imagem no servidor que já contenha gráficos, contadores, etc. a única coisa que não conseguirá é criar uma animação qualquer definida por você.

O tile na tela inicial:

Tile adicionado (tamanho médio)

Usuário requisita alteração do tamanho do tile

Assim que o tamanho do tile é alterado, é carregada nossas imagens grande e pequena, conforme WMAppManifest.


Agora o que vamos fazer é o update desse tile principal, assim como criar dois tiles secundários, para mostrar o tile Iconic e Cycle.

Coloque três botões na sua MainPage.xaml.

Seu tile inicial será apenas atualizado (um Flip template) e criaremos tiles secundários no modo Iconic e Cycle.

Como a tela não interfere em nada o funcionamento da app, tendo apenas função didática, não será mostrado aqui o código para criação dos botões. Apenas os coloque na tela e gere os eventos de clique. Vamos entender como os tiles funcionam, depois você pode criar a melhor forma de colocar em seu aplicativo.

A tela que usei está assim:

Nossos eventos de click no botão ficarão da seguinte forma:

Flip Template – Update do tile principal. Evento do primeiro botão.

A novidade é que agora temos a classe FlipTileData, assim como uma classe Iconic e outra Cycle. Fora esse fato, o processo para atualizar / criar um tile é exatamente o mesmo do que na versão anterior. Veja a imagem e código abaixo:

O código para atualizar o flip tile. Note que não estamos atualizando todas as propriedades, possíveis, cmo por exemplo o background da parte de trás em nenhum dos tamanhos (médio e grande). Isso deixará tais fundos na cor de acentuação escolhida pelo usuário.

O código fica:

private void FlipTile_Click(object sender, RoutedEventArgs e)
{
            ShellTile tile = ShellTile.ActiveTiles.First();
            FlipTileData data = new FlipTileData()
            {
                WideBackContent = "Esse é o tile wide e somente quando escolhido esse tamanho o texto aparecerá.",
 
                BackContent = "Tile médio. Texto de fundos do tile aparece aqui",
 
                Count = 12 // aqui voce pode calcular a quantidade de novidades de seu aplicativo ainda não visualizadas pelo usuário
            };
 
            tile.Update(data);
}


E o resultado , nos três tamanhos:




Com isso, já temos a possibilidade de atualizar nosso tile, seja ele usado pelo usuário no tamanho pequeno (que comente teremos acesso a imagem de fundo + contador) ou aos outros tamanhos.

E se quisermos utilizar o Iconic Template?

Como já temos o tile principal do aplicativo usando o template Flip, resolvi criar um secundário para o nosso aplicativo.

Nosso evento do botão de criação do Tile Iconic fica assim:

private void IconicTile_Click(object sender, RoutedEventArgs e)
{
            IconicTileData iconicData = new IconicTileData
            {
                BackgroundColor = System.Windows.Media.Color.FromArgb(0, 0, 0, 0),
 
                Count = 6,
 
                Title = "Conexao Windows",
 
                IconImage = new Uri("Assets/Tiles/tileiconic.png", UriKind.Relative),
 
                SmallIconImage = new Uri("Assets/Tiles/tileiconicP.png", UriKind.Relative),
 
                WideContent1 = "ESSSA É A PRIMEIRA LINHA",
 
                WideContent2 = "Sub titulo do tamanho wide",
 
                WideContent3 = "linha de conteudo do tile wide iconic"
            };
 
            ShellTile.Create(new Uri("/MainPage.xaml?Iconic=1", UriKind.Relative), iconicData, true);
}
Note que nesse caso estamos fazendo uso de duas imagens já adicionadas ao projeto, e essas imagens devem ser png transparentes BRANCOS.

Outro fato é que, como estamos criando o tile, utilizamos o “Create”. A Única novidade é o último parâmetro, que passamos como “true” e define se aceitamos ou não tiles de tamanho wide, ou seja, grandes.

O resultado na tela:

Por último, o template Cycle.

Aqui definimos apenas um contador e nossas imagens cíclicas (que podem ser nove), além de um título e uma imagem para quando o tile estiver em tamanho pequeno.


private void CycleTile_Click(object sender, RoutedEventArgs e)
{
            Collection<Uri> imagens = new Collection<Uri>{
 
                new Uri("Assets/Tiles/tilecyclewide1.png",UriKind.Relative),
 
                new Uri("Assets/Tiles/tilecyclewide2.png",UriKind.Relative),
 
                new Uri("Assets/Tiles/tilecyclewide3.png",UriKind.Relative)
            };
            CycleTileData iconicData = new CycleTileData
            {
                Count = 7,
 
                SmallBackgroundImage = new Uri("Assets/Tiles/tileiconicP.png", UriKind.Relative),
 
                CycleImages = imagens
            };
            ShellTile.Create(new Uri("/MainPage.xaml?Cycle=1", UriKind.Relative), iconicData, true);
}

O código fica:Nesse exemplo, o grande diferencial é a criação de uma lista de imagens para que possamos usar no nosso tile. Essa lista deve ser local, não é possível listar 9 imagens remotas.

Depois disso, o processo é o mesmo, o tile é criado e o resultado você vê abaixo:





Com isso você viu rapidamente o que já tínhamos definido no artigo passado: Seja Siverlight morto ou não, o nome que for o “da vez”, a tecnologia que ditar os rumos, mas o fato é que o desenvolvimento para Windows Phone 8 continua utilizando seu conhecimento já adquirido. Novas funcionalidades que vem agregar e muito o seu conhecimento, mas sem remover tudo que já aprendeu anteriormente.

Sabendo trabalhar com tiles, nosso passo agora é poder utilizar nosso aplicativo na lock screen, na feature que é talvez a maior personalização já criada desde o Windows Phone 7. Próximo artigo veremos como fazer isso.

Ver Também

Outro importante lugar onde pode encontrar uma enorme quantidade de artigos relacionados com Windows Phone é a própria TechNet Wiki. Onde o melhor ponto de entrada é Recursos Windows Phone no TechNet Wiki!
Classificar por: Data da Publicação | Mais Recente | Mais Úteis
Comentários
  • Muito bom o artigo Rodolpho! Completo e bem ilustrado.

  • Estava falando sobre esse assunto ontem, bom saber que tem uma documentação TOP aqui para repassar aos alunos, valeu

Página 1 de 1 (2 itens)