Criando aplicações WAP com ASP.NET Mobile - Crie aplicações móveis para qualquer celular

Neste artigo, você vai criar um simples programa que permite a consulta de uma agenda de telefones e endereços. Através da recuperação textual, podemos procurar por qualquer palavra no banco de dados e mostrá-la no micro browser de qualquer celular.

por José Antonio Leal de Farias

Vamos admitir. Muito se fala em CompactFramework, J2EE e outros, mas a grande maioria das aplicações móveis que são usadas regularmente falam um único idioma: WAP.

WAP é a sigla em inglês para Wireless Application Protocol. Trata-se de um protocolo de comunicação para dispositivos portáteis, que usam micro browsers, tais como os encontrados na maioria dos telefones celulares.

O WAP contém sua própria linguagem de páginas, o WML (Wireless Markup Language) e também há suporte a um subconjunto do JavaScript, chamado WMLScript.

Não vou entrar em detalhes aqui sobre a estrutura de uma página WML ou mesmo seus controles. Da mesma forma que você não precisa, necessariamente, saber HTML para usar ASP.NET, você não precisa saber usar WML para usar o ASP.NET Mobile.

Criando o projeto

Neste artigo, você vai criar um simples programa que permite a consulta de uma agenda de telefones e endereços. Através da recuperação textual, podemos procurar por qualquer palavra no banco de dados e mostrá-la no micro browser de qualquer celular.

O uso da recuperação textual é importante porque permite uma forma de consulta bastante intuitiva e torna a interface com o usuário bastante simples de operar, nada de procurar por código, nome, estado, etc. Apenas por palavras. E lembre-se que em um celular o usuário não tem uma tela grande, nem um bom teclado ou mouse. A regra de ouro é manter as coisas simples.

Então crie um novo projeto ASP.NET Mobile e o renomeie para ListaMobile, como na figura 1:

Figura 1: Criando o projeto ASP.NET Mobile

O Banco de Dados

Hoje vamos usar novamente o LightBase (http://www.lightinfocon.com.br) que é um banco de dados que fornece os serviços de recuperação textual que iremos precisar. Como ele é um banco de dados OO, crie primeiro a classe que será armazenada no banco, como abaixo:

class Pessoa description="Uma pessoa que eu conheço"

(extent Pessoas description="Lista de pessoas")

{

attribute string Nome textualindex;

attribute string Endereco textualindex;

attribute string Cidade textualindex;

attribute string Estado index size=2;

attribute string Telefone textualindex;

}

Adicione alguns dados e vamos nos concentrar na aplicação em si. Para quem for baixar uma versão demo do LightBase, a figura 2 mostra um pouco do ambiente que você vai usar.

Figura 2: Criando a classe persistente no LightBase

Criando a aplicação

Existe uma particularidade com os formulários de uma aplicação ASP.NET Mobile. No ASP.NET comum, cada formulário era uma página ASPX, mas em ASP.NET Mobile , cada página aspx pode conter mais de um formulário! Isso é devido ao formato das páginas WML que podem ter “seções” dividas em formulários (chamados de “cards”) e pode-se ativar a seção desejada a qualquer instante, durante a execução da aplicação. Isso é bastante útil, já que uma aplicação WAP normalmente é dividida em várias pequenas páginas e assim podemos colocar diversos formulários dentro de uma mesma página, facilitando o design de nossa aplicação.

Então, procure na Toolbox um controle chamado “form” (deve ser o primeiro da lista). Arraste dois para a página. Agora ela contém três formulários que iremos usar para criar nossa aplicação.

O primeiro formulário será a página inicial de busca (tipo o Google). O segundo conterá o resultado da pesquisa e um terceiro apenas uma página de ajuda.

Comece pelo primero form. Primeiro modifique a propriedade Title para “Lista Telefônica WAP”. Essa propriedade define o nome do formulário, da mesma forma como em ASP.NET.

Adicione dois Labels ,um TextBox , um RequiredFieldValidator ,um Command e um Link .

Observe que você não pode posicionar os controles livremente. Isso se deve ao esquema de auto-posicionamento do ASP.NET Mobile necessário para criar corretamente a página para os micro browsers, que rodam em dispositivos com resoluções baixíssimas, algo como 128x64 pixels ou menor.

No primeiro Label, altere a propriedade Text para “Lista WAP” e a propriedade StyleReference para “title”. Troque também a propriedade Alignment para “center”.

Note que você não deve alterar as propriedades da fonte do Label diretamente, como faz em ASP.NET, por exemplo. Como os micros browsers são simplíssimos, muitas vezes você pode especificar um tipo de fonte que não é suportado pelo celular. Para isso, use a propriedade StyleReferente dos controles para especificar um “estilo” para o controle e deixar para o ASP.NET Mobile gerar o código WML para aquele micro browser que mais se assemelha ao estilo escolhido.

No segundo Label, altere a propriedade Text para “procurar” e, contrariando o que eu disse antes, coloque a fonte em bold. Apenas para testar o que eu disse, ok?

No controle RequiredFieldValidator, coloque a propriedade ControlToValidate para TextBox1 e a propriedade ErrorMessage para “O que você procura?”.

No controle Command, modifique a propriedade Text e SoftKeyLabel para “Buscar”. O SoftkeyLabel representa o texto que irá aparecer nos menus que ficam na parte inferior da tela, em dispositivos que os suportam. Modifique também a propriedade StyleReference para “subcommand”.

No controle Link, modifique a propriedade Text e SoftKeyLabel para “Ajuda” e na propriedade NavigateUrl selecione o Form3. Isso mesmo, com esse controle você pode navegar entre os diferentes Forms de sua aplicação.

Bom, ao final disso tudo seu formulário deve se parecer com o da figura 3.

Figura 3: O primeiro formulário

Agora, dê um duplo clique no Command e digite o código abaixo:

if (Page.IsValid)

{

ActiveForm = Form2;

}

A propriedade ActiveForm da página especifica o formulário ativo. Nesse caso apenas verificamos se a página está válida e ativamos o Form2.

No Form2, modifique a proprieade Title para “resultado” e adicione um controle ObjectList . Este controle é um dos mais sofisticados controles do .NET. Ele permite a exibição de dados tabulares, como o DataGrid faz em ASP.NET e além disso permite a exibição detalhada de uma linha, automaticamente! Parece o controle GridView do ASP.NET 2.0 (mas isso é assunto para outro artigo).

Modifique a propriedade DetailsCommandText para “Detalhes” e a propriedade MoreText para “Mais”. Essas propriedades definem o texto que aparece na paginação do controle. Pode experimentar novos valores, se quiser.

Modifique também a propriedade AutoGenerateFields para false, pois você irá informar quais os campos do banco de dados que quer usar manualmente.

Agora, clique com o botão direito no ObjectList e abra o PropertyBuilder e informe como nas figuras 4 e 5.

Figura 4: Configurando o ObjectList

Figura 5: Definindo os campos do ObjectList

Agora adicione um Link, modifique sua propriedade Text para “Nova Pesquisa”, a propriedade NavigateUrl para Form1 e a propriedade StyleReference para “subcommand”. Após tudo isso, o Form2 deve se parecer com o da figura 6:

Figura 6: O form de resultado

Quando o Form2 for exibido, ele deve mostrar o resultado da pesquisa. Então clique duas vezes no formulário para abrir o evento OnActivate e digite o código a seguir:

LightBaseConnection objConnection = new LightBaseConnection("user=lbw;password=lbw;udb=defudb;server=localhost");

objConnection.Open() ;

try

{

LightBaseCommand objCommand = new LightBaseCommand("textsearch in Pessoas " + this.TextBox1.Text,objConnection);

LightBaseDataReader objReader = objCommand.ExecuteReader();

this.ObjectList1.DataSource = objReader;

this.ObjectList1.DataBind() ;

objReader.Close();

}

finally

{

objConnection.Close();

}

No Form3, adicione um Label e modifique as propriedades para que fique como na figura 7. O Link “voltar” deve ter a propriedade NavigateUrl com Form1.

Figura 7: O Form de ajuda

E pronto! Nossa aplicação está pronta. Você pode testá-la usando o Internet Explorer mesmo, mas isso é muito sem graça, já que o explorer é um browser “rico”. Bom mesmo é testar a aplicação em um micro browser! Mas calma, você não precisa publicar sua aplicação nem gastar os preciosos créditos de seu celular. Da mesma forma como existem emuladores para o .NET, existem para WAP também.

Sugiro usar o OpenWave Phone Simulator (http://developer.openwave.com/dvl/tools_and_sdk/openwave_mobile_sdk/phone_simulator/) , que é gratuito e funciona bem. A interface dele pode ser vista na figura 8.

Figura 8: O OpenWave Phone Simulator

Ele pode simular diversos aparelhos diferentes, mas o que já vem com ele tem um micro browser super simples, que é o usado nos celulares mais populares. Vamos usá-lo então.

Antes de rodar a aplicação nele, é melhor configurar o acesso a rede. Vá em Settings/Server Profiles e deixe como na figura 9.

Figura 9: As configurações do simulador

Agora é só colocar o endereço da aplicação no simulador e pronto. Você a verá rodando como nas figuras a seguir:

Conclusão

Criar programas para celulares pode ser tão simples quanto criar páginas Web. O ASP.NET Mobile fornece um conjunto de controles bastante rico e a recuperação textual torna suas aplicações simples o suficiente para caber dentro da pequena tela de um celular.

Há outros aspectos a considerar quando se está projetando uma aplicação para celular e uma das principais com certeza velocidade da conexão. Portanto, cuidado com páginas muito carregadas, imagens, etc.