Construindo uma aplicação Silverlight para Windows Phone 7

O tutorial a seguir mostrara como construir de forma simples uma aplicação Silverlight para visualizar post's de um determinado usuário do twitter com Windows Phone 7.

por Anderson Castro

Durante o Mix10 pudemos ver um pouco mais sobre o desenvolvimento para o Windows Phone 7 que tem como base o silverlight.

O mais envolvente nisso é que o mesmo Silverlight que já conhecemos não haverá uma versão especifica para Windows Phone 7 é "apenas" Silverlight.

Para começarmos a desenvolver para Windows Phone 7 vamos precisar de :

Windows Phone Developer Tools CTP (http://go.microsoft.com/fwlink/?LinkID=185584)

VS 2010 RC tools for Silverlight 4 (http://www.microsoft.com/downloads/details.aspx?FamilyID=05b2c62c-6b1d-4822-9b2b-7d1410af452d&displaylang=en)

Silverlight 4 RC (http://www.silverlight.net/getstarted/silverlight-4/)

Após o download e instalação do Windows Phone Developer Tools CTP voce tera o Visual Studio 2010 Express for Windows Phone.

O tutorial a seguir mostrara como construir de forma simples uma aplicação para visualizar post"s de um determinado usuário do twitter.

Essa demo foi demonstrada durante o mix10 então quem não teve a oportunidade de acompanhar ai esta.

Figura 1: Visual Studio 2010 Express for Windows Phone.

Vamos iniciar um novo projeto do tipo Windows Phone Application,neste caso estou chamando de TwitterPhone7.

Figura 2:Novo Projeto Windows Phone Application.

Perceba que ele já trás a interface do Windows Phone.

Sua estrutura inicial e composta por dois Grid"s ,no primeiro encontramos dois TextBlock:

1. MY APPLICATION

2. page title

No segundo Grid iremos adicionar o conteúdo de nossa aplicação.

Figura 3:Interface Inicial.

Vamos começar por nossa interface,vamos adicionar um Button e um TextBox.Aproveitamos também para colocarmos o nome de nossa aplicação no TextBlock da parte superior.

Figura 4 : Incluindo controles.

No Grid inferior vamos adicionar um ListBox.

Figura 5 : Incluindo ListBox.

Agora vamos trabalhar no MainPage.cs,repare que ele já trás configurado suporte para que sua aplicação funcione nos dois modos de orientação através do "SupportedOrentations".

Em seguida vamos criar o evento de nosso botão.

Figura 6 : MainPage.cs

Dentro de nosso evento click vamos instanciar um WebClient,ele será responsável por importar os Feeds do Twitter.

Apos instanciar o WebClient vamos criar o evento DonloadStringCompleted que será usado mais a diante,em seguida fazemos a chamada do método DownloadStringAsync onde iremos passar como parâmetro a Uri da api do Twitter juntamente com o nome do usuário o qual vamos pesquisar.Ele ira rertonar um XML com os post mais recentes.

Figura 7 : Configurando evento Click.

Como nosso método retorna um XML iremos usar o LinqToXml para que possamos fazer nossas consultas de maneiras mas simples.

Vamos então adicionar a referencia do LinqToXml ao nosso projeto.

Figura 8: Adicionando Reference System.Xml.Linq.

Não esqueça de adicioná-la também na MainPage.cs : Using System.Xml.Linq;

Feito isso vamos criar nossa classe com os itens que iremos trabalhar em nossa aplicação:

· UserName

· Mensage

· ImageSource

Figura 9: TwitterItem

Lembram-se de nosso evento DonloadStringCompleted,iremos agora implementá-lo.

Nossa Consulta ira retornar os elementos necessários para nossa aplicação,ImageSource,Message e Username.A partir dai preenchemos nosso listBox.

Figura 10 : DonloadStringCompleted

Voltando a nossa interface vamos ajustar nosso ListBox.

Para isso vamos adicionar um ItemTemplate em nosso ListBox.

Achei esse tipo de visualização mais amigável mas isso não impede que você faça a interface de sua maneira.

Figura 11: ListBox Template

Executando nossa aplicação o visual Studio ira abrir o Windows Phone Emulator ,ele já prevê também o Windows Phone Device caso você possua o dispositivo para testar sua aplicação.

No TextBox digite o usuário no qual você queira ver os últimos post e clique em pesquisar(Obs.:neste caso o mouse simula o toque do dedo na tela do dispositivo)

Figura 12 : Aplicação Funcionando

Testando aplicação em modo "paisagem".

Figura 13: Orientation.

Perceba que nossa aplicação encontra-se no menu do dispositivo.

Figura 14 : Aplicação no Menu do Windows Phone 7.

Espero que tenham gostado até a próxima.

www.blog.ronnin.com.br

Twitter : @andersoncastro

Esse tutorial é apenas uma pequena amostra do que esta por vir nos próximos meses.