Windows Phone 7 – criando um mini navegador

Se você pretende desenvolver aplicações para a plataforma mobile, o Windows Phone
7 traz um arsenal de recursos que, juntamente com o SilverLight, o XNA e o
.NET Compact Framework, permite que você desenvolva de forma rápida e
descomplicada aplicações com interfaces ricas, modernas e agradáveis aos
usuários finais.

O Windows Phone 7 pode ser considerada como uma nova tecnologia – ele não é considerado uma continuação do Windows Phone 6. A nova versão traz uma série de novos recursos
como a nova interface “Metro”, acesso a ferramentas e redes sociais como
Facebook, aplicativos de mapas como o
Bing Maps, pesquisa em buscadores, acesso a jogos da rede X-Box, etc.

A arquitetura da plataforma Windows Phone 7 é constituída de 4 principais
componentes: RunTime, Tools, Cloud e Portal Services:

O que você precisa para começar a desenvolver nessa nova plataforma?

Elementar… Você só precisa de uma coisa: o

Windows Phone Developer Tools, que inclui o
Visual Studio 2010 Express for Windows Phone, WIndows
Phone Emulator, SilverLight for Windows Phone, MIcroSoft Expression Blend for
Windows Phone e XNA Game Studio 4.0. Se você tiver versões anteriores, será preciso
desinstalá-las antes de instalar a versão atual .

Todos os programas para Windows Phone 7 são escritos em código .NET
código gerenciado.

O download gratuito do Microsoft Visual Studio 2010 Express para Windows
Phone inclui o XNA Game Studio 4.0 e um emulador de dispositivo, e
também se integra com o Visual Studio 2010. Você também pode desenvolver
recursos visuais e animações para aplicações em Silverlight utilizando o
Microsoft Expression Blend.

As plataformas Silverlight e XNA para Windows Phone 7 compartilham
algumas bibliotecas, e você pode usar algumas bibliotecas de XNA em um programa
Silverlight e vice-versa. Mas você não pode criar um programa que mistura
visuais de ambas as plataformas. Talvez isso será possível no futuro, mas não
agora. Antes de criar um projeto Visual Studio, você deve decidir se o projeto
será um programa Silverlight ou um programa XNA.

O Silverlight é ótimo para trazer para o Windows Phone o estilo de Rich
Internet Applications (RIA), incluindo meios de comunicação e internet. O
Silverlight para Windows Phone é uma versão do Silverlight
3 excluindo algumas funcionalidades não adequadas para o dispositivo, mas
compensando com algumas melhorias.

O XNA é usado principalmente para escrever jogos de alta performance.
Para jogos 2D, você define sprites e fundos em torno de bitmaps; para jogos 3D,
você define modelos no espaço 3D. A ação do jogo, que inclui objetos gráficos em
movimento ao redor da tela e sondagens para o usuário entrada, é sincronizada
pelo built-in XNA.

Na figura abaixo, temos um esquema do ciclo de vida de desenvolvimento de uma
aplicação Windows Phone 7:

Resumindo, podemos dizer que o fluxo de desenvolvimento de uma aplicação
Windows Phone 7 possui 3 pilares:

1. Estrutura – O produto final é um Software empacotado no formato XAP
   com imagens, arquivos, texto, bibliotecas, etc.
2. Desenvolvimento – Usando o Microsoft Visual
   Studio e o  Microsoft Expression Blend para desenvolver aplicações
   SilverLight ou XNA;
3. Licença – Licença concebida usando a criptografia e assinatura da
   aplicação gerando o arquivo empacotado;

Além disso, você pode baixar também o

 Download the Silverlight for
Windows Phone Toolkit

Mãos à obra – criando um mini navegador

Após baixar e instalar o Windows Phone Developer
Tools, serão instalados os seguintes recursos: Visual Studio 2010 Express for Windows Phone, WIndows Phone Emulator,
SilverLight for Windows Phone, MIcroSoft Expression Blend for Windows Phone e
XNA Game Studio 4.0.

Após instalar o pacote acima, você poderá criar aplicações Windows Phone 7
usando o Visual Studio 2010 Express for Windows Phone ou o seu Visual
Studio 2010.

Vamos então abrir o Visual Studio 2010 (a minha versão é a Ultimate) e
criar a nossa aplicação Windows Phone 7: um mini navegador.

No menu File, selecione  New Project.

A seguir, vamos selecionar a Linguagem Visual Basic, o item
SilverLight for Windows Phone e template Windows Phone Application,
informando o nome WP7_Demo e clicando no
botão OK.

Será criar o projeto conforme a figura abaixo, na qual temos a figura do
dispositivo no arquivo MainPage.xaml e o respectivo código XAML:

A figura do dispositivo possui os seguintes detalhes:

A parte frontal do dispositivo consiste em um display
multitouch e em três botões de hardware em geral posicionados em uma linha abaixo do visor. Da esquerda para a direita, esses
botões são chamados de Voltar, Iniciar e Pesquisar.

• Back (Voltar) –  Os programas podem usar esse botão para
  sua necessidades de navegação, como o botão Back (Voltar) em um navegador
  web. A partir da página inicial do programa, o botão faz com que o programa termine;
• Start (Iniciar) – Este botão leva o usuário para a tela inicial
  do celular, caso contrário, é inacessível para os programas em execução no
  dispositivo;
• Search (Procurar) – O sistema operacional usa este botão para
  iniciar um recurso de pesquisa.

Nosso objetivo será criar um mini-navegador para acessar páginas no celular.

O leiaute da nossa aplicação deverá estar conforme mostra a figura abaixo:

Vamos iniciar alterando o texto do controle TextBlock
de MY APPLICATION para Minha Primeira aplicação WP7.

Selecione o controle e pressione F4 para abrir a janela de propriedades;
altere a propriedade Text para Minha Primeira aplicação WP7.

Vamos alterar também o texto do controle TextBlock
de page name para Mini-Navegador, repetindo o
processo descrito anteriormente.

Agora, no código XAML, selecione a primeira linha de código para que a
propriedade PhoneApplicationPage seja exibida na
janela de propriedades.

A seguir, altere a sua propriedade SupportedOrientation
para PortraitOrLandscape de forma que a nossa aplicação suporte o modo
retrato e o paisagem.

Agora vamos incluir 3 controles no descrito XAML a partir
da ToolBox:

Os 3 controles que serão usados no leiaute da aplicação
Windows Phone 7:

• TextBox – txtUrl
• Button – btnIr
• WebBrowser – WebBrowser1

Agora, a partir da ToolBox, vamos incluir um controle
TextBox logo abaixo do texto Mini-Navegador, arrastando-o e soltando-o na página
MainPage.xaml.

Em seguida, configure as seguintes propriedades deste
controle TextBox:

Propriedade de TextBox	Valor
Name	txtUrl
Text	http://www.macoratti.net
Height	Auto
Width	Auto
HorizontalAlignment	Strech
VerticalAlignment	Top

Essas configurações permitem que o controle se posicione corretamente em
ambos os modos retrato e paisagem.

Agora vamos incluir um controle Button ao lado do controle TextBox e
alterar as seguintes propriedades desse controle:

Propriedade de Button	Valor
Name	btnIr
Text	Ir
Height	Auto
Width	Auto
HorizontalAlignment	Right
VerticalAlignment	Top

Finalmente, vamos incluir um controle WebBrowser logo abaixo dos
controles TextBox e Button adicionados. A seguir, defina as seguintes
propriedades desse controle:

Propriedade de WebBrowser	Valor
Name	WebBrowser1
Height	Auto
Width	Auto
HorizontalAlignment	Stretch
VerticalAlignment	Stretch

Ao final, o leiaute da aplicação em tempo de projeto deverá estar conforme a
figura abaixo:

Observe que o código XAML exibe todos controles e propriedades
definidas:

Vamos agora incluir o código no evento Click do botão
btnIr. Para isso, clique duas vezes sobre o controle para abrir a janela de
código code-behind do arquivo MainPage.xaml.vb.

Em seguida, digite o código abaixo no evento Click do botão Ir:

  Private Sub btnIr_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnIr.Click

        Dim site As String = txtUrl.Text

        WebBrowser1.Navigate(New Uri(site, UriKind.Absolute))

    End Sub

Agora, vamos dar um Build no projeto selecionando no menu Build a opção
Build WP7_Demo.

Antes de executar o projeto, verifique se na barra padrão esta selecionado o
emulador : Windows Phone 7 Emulator.

Pressione F5 ou clique no ícone da seta (Start Debugging).

O emulador será carregado e após alguns instantes exibirá a aplicação
conforme a figura abaixo:

Clicando no botão “Ir”, a página
http://www.macoratti.net será aberta e iremos obter

Podemos configurar o tamanho usando o ícone na barra lateral direita, definindo um tamanho mais adequando conforme abaixo:

Também podemos alterar a orientação da exibição na tela do dispositivo
conforme a figura abaixo:

Clicando no ícone para rotacionar mudamos a orientação da exibição da tela.

Dessa forma, acabamos de criar a nossa primeira aplicação Windows Phone7, sem usar muitos recursos, é verdade, mas até que a aplicação não é de todo
inútil!

O objetivo foi mostrar como é simples criar aplicações usando os novos
recursos do Windows Phone 7.

Aguarde em breve mais artigos sobre o assunto.

Pegue o projeto completo aqui: 
WP7_Demo.zip

Eu sei, é apenas Windows Phone 7, mas eu gosto…