Aplicaes para Celulares 159

Captulo 10

Desenvolvendo Aplicaes para Celulares

Viso geral
Amigos, neste captulo iremos aprender a desenvolver aplicaes WAP para celulares. Mas Facunte, o WAP no foi um fracasso no Brasil? Depende muito do ponto de vista de cada empresa, de cada brasileiro. O WAP uma realidade para muitas empresas, que mesmo aps diversas resistncias, adotaram a tecnologia em suas culturas empresariais. Cultura? isso mesmo! Cultura. O grande problema do WAP que ns brasileiros demoramos para nos acostumar com novidades, alm, claro, da barreira de resistncia a tornar um hbito certas coisas. verdade que o WAP no atingiu o que as teles previam, onde todos os seus assinantes utilizariam o WAP para algum tipo de servio. Isso mesmo, servio. A que est o pecado da coisa. Como pagar por uma coisa que nem sabemos utilizar? Faltou incentivo cultural. Mas, hoje em dia, muitas empresas aproveitam da tecnologia para fora de vendas, troca de mensagens em grupo, pesquisa de campo, entre outras aplicaes que veremos ao longo do captulo.

WAP no Brasil
Continuando com a nossa discusso, ser que temos oportunidades de lucro no Brasil? A oportunidade existe, mas poucas empresas esto investindo nesta rea, certamente lucrativa. Ser que sou um romntico sonhador? Sonhando com o lucro em tempos de vacas magras? Amigos, posso afirmar que no, pois em 2000, quando lancei meu livro de WAP (Wap Guia de Tecnologia), o mercado estava muito aquecido, devido s fortes propagandas de empresas de telefonia em torno do WAP, mas na poca, a barreira cultural de nosso pas quase levou o sonho destas empresas por gua abaixo. Sabem o que elas fizeram? Deixaram o WAP de lado e continuaram a investir em aparelhos mveis, mas destacando apenas sua beleza e algumas funcionalidades. Facunte, ento o sonho do lucro ficou ainda mais distante? Amigos, a que entra o consultor, para explicar aos gerentes de tecnologia, CEOs, que a relao custo benefcio com o WAP muito boa, e que o desenvolvimento quase transparente, pois podemos criar aplicaes WAP na maioria das linguagens, como: Delphi, .NET (VB, C#, ASP), PHP, Java (JSP, EJB), entre outras.

159

160 Delphi 7 Internet e Banco de Dados

Modelos de Aparelhos
A disponibilidade de aparelhos no Brasil muito grande, e o preo um forte atrativo, variando entre R$ 199,00 (modelo LG DM 160), at R$ 1.999,00 (Nokia 9210). Imaginem uma equipe de vendas, ou at mesmo uma equipe de pesquisadores, com modelos mais baratos, em torno de R$ 199,00, fechando negcios, elaborando pesquisas, consultando clientes, disponibilidade de estoque, entre outros.

Motorola v.8160

LG DM 160

Startac 7860

Ericsson T60

LG TM 520

LG DM 515

Siemens SX45

Nokia 9210

Tabela 10.1 Celulares com suporte WAP

Cases de Sucesso
Para provar a fora do WAP, vamos conhecer alguns cases de sucesso.

Caixa Econmica Federal

A Caixa Econmica Federal disponibiliza a todos a informao sobre o saldo do FGTS atravs da tecnologia WAP. Para ter uma idia da transparncia neste case, a mesma aplicao disponibiliza informao via telefone (fixo), Internet e celular (WAP). Totalmente desenvolvida em JAVA, a soluo teve seu custo reduzido devido leve infra-estrutura necessria para abrigar toda a aplicao. Embora tenha exemplificado o case da Caixa Econmica Federal, importante ressaltar que a maioria dos bancos nacionais oferecem variados recursos com a tecnologia WAP.

Aplicaes para Celulares 161

InvestShop.COM.BR
A instituio financeira InvestShop desenvolveu em conjunto com a EverSystem (talvez a maior empresa de desenvolvimento deste setor) uma soluo bastante robusta oferecendo ao usurio um controle total de suas aplicaes. S para ter uma idia, a aplicao disponibiliza at grficos de aes em celulares WAP. realmente incrvel.

DETRAN-SP
Um dos pioneiros na tecnologia WAP, o DETRAN de So Paulo disponibiliza informaes de Multas, Pontuaes na Carteira, entre outros. Viram como o poder do WAP grande? Basta uma idia para transform-lo em lucro!

Algumas idias para ganhar dinheiro

Bem, aqui vo algumas sugestes bastante interessantes para ganhar dinheiro com aplicaes WAP. Fora de Vendas Pesquisas de Campo TimeSheet Processos m-Ticket m-Finance m-Commerce Aplicao de auxlio a vendedores externos, com opo de consulta a estoque, faturas de clientes e fechamento de pedidos. Aplicao que auxilia pesquisadores das mais variadas reas: IBOPE, CENSO, Opinio, Produtos, entre outras. Aplicao para TimeSheet de consultores, advogados, tcnicos, entre outros. Gerenciamento de Processos Jurdicos, onde o advogado ou cliente poder consultar informaes sobre os andamentos dos processos. (m=mobile) Vendas de ingressos, passagens areas, cinemas, teatros, etc . Aplicaes para o mercado financeiro. Comrcio em geral atravs de aplicaes WAP.

Entendendo o funcionamento das aplicaes WAP

Para entender um pouco como funciona uma aplicao WAP, precisamos conhecer o funcionamento de uma aplicao servidora. Em nosso caso teremos apenas o mdulo servidor, pois o cliente da nossa aplicao um browser com suporte tecnologia WAP, ou seja, a grande maioria dos celulares comercializados no mercado nacional. Para facilitar a compreenso, a figura 10.1 ilustra bem o nosso caso:

HTTP/WML

WML/HTTP

celular (cliente)

Servidor

GateWay

Figura 10.1 Esquema de funcionamento WAP

162 Delphi 7 Internet e Banco de Dados Na ilustrao, temos um celular, que funciona como o nosso cliente (terminal), onde solicita os servios ao servidor. Os dados (WML) trafegam atravs do protocolo HTTP. Quando os dados chegam no servidor, o mesmo tem que interpretar a requisio, e esse servio feito pelo GateWay. O GateWay tambm tem como funo empacotar o resultado da requisio, para que o servidor retransmita ao celular. Em resumo, necessitamos de duas aplicaes bsicas no servidor: Servidor HTTP (recomendo o Apache Server) Nossa aplicao servidora.

Um detalhe bastante interessante que o Apache Server traz consigo embutido um excelente GateWay WAP. Embora esteja documentado que o Apache apenas suporta aplicaes WAP, ele possui toda a implementao necessria para um perfeito funcionamento. Para que possamos prosseguir no desenvolvimento de nossas aplicaes, precisamos tambm de um simulador WAP. Existem vrios no mercado, mas particularmente prefiro o Deck-it da PyWeb. A figura 10.2 ilustra a interface do Deck-it.

Figura 10.2 Deck-it O Deck-it est disponvel no site da PyWeb (www.pyweb.com) e, assim como o Apache, totalmente freeware.

Mime-Types WAP
Outra coisa importante a saber so os MimeTypes WAP. Mas o que so MimeTypes? Para que os servidores HTTP reconheam um tipo de requisio, ou ento, um mtodo de envio, necessria a definio dos MimeTypes. S para clarear um pouco a informao, uma imagem do tipo JPG definida como image/JPG. Com isso o servidor saber qual o melhor mtodo de transmisso para este tipo de arquivo.

Mime Types do WAP Tipo de Arquivo Cdigo-fonte WML WML compilado Cdigo-fonte WMLScript WMLScript compilado Imagem bitmap Extenso .wml .wmlc .wmls .wmlcs .wbmp MIME Type text/vnd.wap.wml application/vnd.wap.wmlc text/vnd.wap.wmlscript application/vnd.wap.wmlscriptc image/vnd.wap.wbmp

Tabela 10.2 mime types WAP

Aplicaes para Celulares 163 Vamos adicionar os Mime-Types ao Apache, embora a partir da verso 1.3.1 j estejam implementados todos os tipos necessrios. No arquivo httpd.conf adicione as seguintes linhas: AddType AddType AddType AddType text/vnd.wap.wml image/vnd.wap.wbmp text/vnd.wap.wmlscript application/vnd.wap.wmlscriptc .wml .wbmp .wmls .wlsc

Grave o arquivo e reinicie o Apache.

WML
O WML, Wireless Markup Language, a linguagem de programao para o desenvolvimento de documentos WAP. Muito parecida com o HTML e tambm com alguns conceitos do XML. Uma das caractersticas desta linguagem a adoo do case sensitive, ou seja, deck diferente de Deck ou DECK. Fique atento. Normalmente utilizamos letras minsculas para trabalhar com as Tags WML.

Minha opinio
O WML evoluiu muito durante os tempos e o consrcio formado para a criao deste padro continua investindo na tecnologia. Muitas pessoas comentam que o WAP ruim, que isso, que aquilo, mas como disse anteriormente, a oportunidade est a, batendo na sua porta. Voc vai ficar dando ouvidos a quem nunca ao menos tentou fazer a coisa certa?.

TAGS WML
<a> Cria um hiperlink ligando uma URL, ou ID de outra Tag. recomendado o uso desta Tag ao invs da Tag <anchor>. Exemplo

<a href = consulta consulta>

Atributos

Nome id class xml:lang href title

Tipo String String String href String

Obrigatrio No No No Sim No

164 Delphi 7 Internet e Banco de Dados Descritivo dos Atributos

Atributo id class xml:lang href title

<access>

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Definio da linguagem XML Link de referncia Texto, descrevendo o link

A Tag <access> define o controle de acesso a um deck. Na realidade controla acessos preestabelecidos de acordo com a combinao domain+path, ou seja, voc poder definir se determinado deck poder ser acessado a partir de um determinado domnio ou path (caminho). Exemplo:

<access domain = facunte.com.br path=/VIP>

Baseado neste exemplo, vejamos o que permitido:

permitido
www.facunte.com.br/VIP/x.wml www.facunte.com.br/VIP/index.wml

no permitido
www.facunte.com.br/livros.wml www.facunte.com.br/x.wml

Neste exemplo determinamos que o deck atual s poder ser acessado, a partir de uma requisio da domnio facunte.com.br, e do caminho /VIP, ou seja, somente quem estiver no diretrio /VIP poder acessar as informaes do deck em questo. Atributos

Nome id class domain path

Descritivo dos Atributos

Tipo String String String String

Obrigatrio No No No No

Atributo id class domain path

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Domnio que poder acessar o elemento Caminho dentro do domain (domnio) que poder acessar o elemento. Se no for especificado, todos os caminhos do domain podero acessar o elemento

<anchor> Assim como a Tag <a>, cria um hiperlink de um texto. Exemplo:

<anchor href== consulta consulta>

Aplicaes para Celulares 165 <b> Tag utilizada para formatar textos em negrito. recomendado o uso da Tag <strong> ao invs de <b>, <i> ou <u>. Exemplo:

<b> Seja bem-vindo </b>

<big> Utilizada para formatar o texto de maneira enfatizada, grande. Exemplo:

<big> Seja bem-vindo </big>

<br> Utilizada para concluir a linha atual e iniciar uma nova linha. Pode ser utilizada dentro de tabelas. Exemplo:

<br> Linha 1 <br> Linha 2 <br> Linha 3

<card> A Tag <card> utilizada para delimitar um conjunto de elementos. A estrutura da linguagem WML pode conter uma coleo de cards, formando um deck. Exemplos:

<card id =menu> ... </card> <card id =opcao1> .. </card> <card id =opcao2> .. </card> <card id =opcao3> .. </card>

Nome id class xml:lang title newcontext ordered

Tipo String String String String Boolean Boolean

Obrigatrio No No No No No No

Padro

No Sim

166 Delphi 7 Internet e Banco de Dados Descritivo dos Atributos

Atributo id class title newcontext ordered

Eventos do elemento Card

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Indentificao do carto Indica ao browser para trazer o card em questo atualizado Organiza o card

Evento onenterforward onenterbackward ontimer

Descrio Utilizado em conjunto com o elemento GO (veja nas prximas pginas) Utilizado em conjunto com o elemento PREV (veja nas prximas pginas) Utilizado para disparar uma referncia, que pode ser um CARD ou outra URL, quando o tempo determinado expirar

<do> Esta Tag utilizada para acessar informaes acima do card atual. Exemplos:

<do type="accept" label="Segundo"> <do type="accept" label="Primeiro">

Atributos

Nome id class xml:lang type label name optional

Descritivo dos Atributos

Tipo String String String String String String Boolean

Obrigatrio No No No Sim No No No

Atributo id class type label name optional

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Tipos definidos do elemento (veja tabela a seguir) Texto descritivo do elemento, visvel para o usurio Identifica o nome de ligao Define o elemento como opcional

Aplicaes para Celulares 167 Complementos do atributo Type

tipo accept prev help reset options delete unknown

<em>

Descrio Reconhecimento positivo Navegao de retorno Ajuda Limpar, ou resetar Solicitao para opes ou operaes adicionais Apagar item De uso genrico

Utilizada para formatar o texto de maneira enfatizada, parecida com a Tag <big>. Exemplo:

<em> Seja bem-vindo </em>

<fieldset> O elemento fieldset permite o agrupamento de campos relacionados ao texto. Este agrupamento permite otimizar o layout e navegao. Atributos

Nome id class xml:lang title

Exemplo:

Tipo String String String String

Obrigatrio No No No No

<fieldset title=endereco> Endereco: <input type=text name=fendereco maxlength=50/> <br/> Cidade: <input type=text name=fcidade maxlength=30/> <br/> Estado: <input type=text name=festado maxlength=2/> <br/> Cep: <input type=text name=fcep maxlength=8/> <br/> </fieldset> <fieldset title=telefones> Fone_Residencial: <input type=text name=fresidencial maxlength=20/> <br/> Fone_Comercial: <input type=text name=fcomercial maxlength=20/>

168 Delphi 7 Internet e Banco de Dados

<br/> Fone_Celular: <input type=text name=fcomercial maxlength=20/> <br/> </fieldset>

<go> A tag <go> permite a navegao entre cards ou decks, e utilizado em conjunto com o elemento <do>. Atributos

Nome id class href sendreferer method accept-charset

Descritivo dos Atributos

Tipo String String href Boolean Method String

Obrigatrio No No No No No No

Padro

false get unknown

Atributo id class href sendreferer

method optional
Exemplo:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Endereo URL (caminho) Em caso verdadeiro(True), o browser do usurio dever especificar o URL do deck contendo esta tarefa Mtodo de envio de dados (POST ou GET) Define o elemento como opcional

... <card id=inicio title=teste > <do type=accept label=envia> <go href=#recebe> </do> <p>clique em envia para ir ao card recebe</p> </card> <card id=recebe title=teste > <do type=accept label=volta> <go href=#inicio> </do> <p>clique em volta para retornar</p>

Aplicaes para Celulares 169 <head> A tag <head> contm informaes sobre o documento, como os metadatas e as tags de controle de acesso. Atributos

Nome id class
Descritivo dos Atributos

Tipo String String

Obrigatrio No No

Padro

Atributo id class
<i>

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence

Utilizada para formatar o texto em itlico. Exemplo: <i> Seja bem-vindo </i> <img> A tag <img> utilizada para incluir uma imagem no documento. As imagens devem seguir o padro WBMP. Veremos um tpico abordando este assunto. Atributos

Nome id class xml:lang alt scr localscr vspace hspace align height width
Descritivo dos Atributos

Tipo String String String String URL String Length Length String Length Length

Obrigatrio No No No No Sim No No No No No No

Padro

Small, nonzero Small, nonzero bottom

Atributo id class alt

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Texto a ser exibido enquanto a imagem carregada, ou numa possvel falha em seu carregamento

170 Delphi 7 Internet e Banco de Dados

Atributo scr localscr vspace hspace align

height width
Exemplos:

Descrio Especifica o caminho da imagem Alternativa imagem Espao em branco vertical Espao em branco horizontal Alinhamento da imagem em relao pgina top topo da pgina middle meio bottom alinhada abaixo da pgina Tamanho vertical da imagem Tamanho horizontal da imagem

<img src=logo.WBMP> <img alt=logo src=logo.WBMP> <img alt=logo src=logo.WBMP width=32 height=32> <img alt=logo src=logo.WBMP width=32 height=32 vspace=2> <img alt=logo src=logo.WBMP width=32 height=32 hspace=2> <img alt=logo src=logo.WBMP align=top>
<input> A tag <input> utilizada para definir a entrada de dados para o usurio. Atributos

Nome id class xml:lang name type value format emptyok size maxlength tabindex title

Tipo String String String String Input_Type String String Boolean Number Number Number String

Obrigatrio No No No Sim No No No No No No No No

Padro

text *M false Infinite

Aplicaes para Celulares 171 Descritivo dos Atributos

Atributo id class name type value format emptyok size maxlength tabindex title
Mscaras (A)

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Nome do elemento muito importante para tratar o dado Tipo da entrada de dados, que pode ser texto (text), ou senha (pass) Valor padro do campo Mscara do campo (veja a tabela que segue (A)) Permite a escolha de campos opcionais Largura da rea de entrada de dados Tamanho mximo, em caracteres, para a entrada de dados Como no Delphi ordem de entrada Titulo do campo

Mscara A a N X x M m *f nf
Exemplos

Descrio Letras maisculas e caracteres de pontuao Letras minsculas e caracteres de pontuao Somente nmeros Somente letras maisculas Somente letras minsculas Qualquer caractere e assume maisculo (dependendo do browser) Qualquer caractere e assume minsculo (dependendo do browser) Somente caractere numrico Caractere numrico 0 a 9

<input name=nome type=text maxlength=50> <input name=cep type=text maxlength=8 format=NNNNNNNN> <input name=nome type=text maxlength=50> <input name=pais type=text value=Brasil>

<meta> A tag <meta> contm informaes genricas relativas ao deck do WML. Assim, como no padro HTML, utilizada para definir alguns dados do documento.

172 Delphi 7 Internet e Banco de Dados Atributos

Nome Id class http-equiv name forua content scheme Descritivo dos Atributos Atributo id class http-equiv forua

Tipo String String String String Boolean String String

Obrigatrio No No No No No Sim No

Padro

content scheme
<noop>

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Indica que a propriedade deve ser interpretada como um cabealho http Em caso de false, o intermedirio dever remover o elemento meta antes do mesmo ser enviado ao cliente; seno (true), os dados so enviados ao browser do usurio Contedo do metadata, como por exemplo, um tipo Estrutura que dever ser utilizada para interpretar o metadata

A tag <noop> utilizada para cancelar operaes realizadas no deck. Atributos

Nome id class
<onevent>

Tipo String String

Obrigatrio No No

Padro

A tag <onevent> associa uma tarefa a um determinado elemento. Atributos

Nome id class type

<optgroup>

Tipo String String String

Obrigatrio No No Sim

Padro

A tag <optgroup> utilizada para agrupar elementos criados com a tag <option> , definindo assim uma hierarquia.

Aplicaes para Celulares 173 Atributos

Nome id class xml:lang title

Descritivo dos Atributos

Tipo String String String String

Obrigatrio No No No No

Padro

Atributo id class title

Exemplos:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Referncia do grupo

<optgroup title=estado> <option title=So Paulo value=SP> <option title=Rio de Janeiro value=RJ> <option title=Bahia value=BA> .... </optgroup>
<option> A tag <option> cria uma opo de escolha em um elemento selecionado. Atributos

Nome id class xml:lang value title onpick

Descritivo dos Atributos

Tipo String String String String String href

Obrigatrio No No No No No No

Padro

Atributo id class value title onpick

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Valor atribudo opo Expresso apresentada ao usurio Dispara a chamada de uma URL, quando a opo for selecionada

174 Delphi 7 Internet e Banco de Dados Exemplos:

<optgroup title=sexo> <option title=Masculino value=M> <option title=Feminino value=F> .... </optgroup> <optgroup title=idioma> <option title=Portugus value=P onpick=/port.wml> <option title=Ingls value=I onpick=/ingles.wml> .... </optgroup>
<p> A tag <p> inicia um pargrafo com os atributos especificados. Atributos

Nome id class xml:lang align mode

Descritivo dos Atributos

Tipo String String String TAlign Wrapmode

Obrigatrio No No No No No

Padro

left wrap

Atributo id class align

mode
Exemplos:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Alinhamento do pargrafo left = esquerda right = direita center = centralizado Especifica o modo de parada do texto

<p align=left> Estou alinhado a esquerda </p> <p align=right> Estou alinhado a direita </p> <p align=left> Estou alinhado a esquerda </p>

Aplicaes para Celulares 175

<p align=center wrap=nowrap> Este texto dever ser visto sem rolagem e centralizado </p>
<postfield> A tag <postfield> define o nome de um campo e valor para transmisso a um servidor de origem, durante uma requisio de URL. Atributos

Nome id class name value

Descritivo dos Atributos

Tipo String String String String

Obrigatrio No No Sim Sim

Padro

Atributo id class name value

Exemplos:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Nome do campo Valor do campo

<postfield name=PAIS value=BRASIL>

<prev> A tag <prev> retorna a navegao para a URL anterior no histrico do browser. Atributos

Nome id class
Sintaxe

Tipo String String

Obrigatrio No No

Padro

<prev>
<refresh> A tag <refresh> atualiza a URL em atividade e o contexto do dispositivo, de acordo com os dados atuais do servidor.

176 Delphi 7 Internet e Banco de Dados Atributos

Nome Id class
Sintaxe

Tipo String String

Obrigatrio No No

Padro

<refresh>
<select> A tag <select> inicia uma lista de seleo. Os itens da lista so criados atravs da tag <option>. Atributos

Nome id class xml:lang title name value iname ivalue multiple tabindex
Descritivo dos Atributos

Tipo String String String String String String String String Boolean Number

Obrigatrio No No No No Sim No No No No No

Padro

Atributo id class title name value iname ivalue

Exemplos:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Define o ttulo a ser exibido ao usurio Nome do elemento (campo) Recebe o nome da opo selecionada; o nome definido no atributo iname, e o valor no ivalue Declarao do nome do elemento Valor da opo selecionada na lista de opes

<select name=linguagens iname=L ivalue=1;2;3;4 multiple=true> <option value=A>Delphi</option> <option value=B>Java</option> <option value=A>C++</option> <option value=A>.Net</option> </select>
<setvar>

Aplicaes para Celulares 177 A tag <setvar> utilizada para definir o valor de uma varivel. Atributos

Nome id class name value

Exemplo:

Tipo String String String String

Obrigatrio No No Sim Sim

Padro

<setvar name=SOBRENOME value=FACUNTE>

<small> A tag <small> formata o texto com a fonte pequena. Atributos

Nome id class xml:lang

Exemplo:

Tipo String String String

Obrigatrio No No No

Padro

<small> made in Borland </small>

<strong> A tag <strong> formata o texto com a fonte destacadas, fortes. Normalmente esta tag utilizada no lugar das tags <b> <i> e <u>. Atributos

Nome id class xml:lang

Exemplo:

Tipo String String String

Obrigatrio No No No

Padro

<strong> powered by Facunte </strong>

<table> A tag <table> utilizada em conjuntos com as tags <tr> e <td>, para criar tabelas.

178 Delphi 7 Internet e Banco de Dados Atributos

Nome id class xml:lang title align columns

Descritivo dos Atributos

Tipo String String String String String Number

Obrigatrio No No No No No Sim

Padro

Atributo id class title align columns

Exemplo simples:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Define o ttulo da tabela Alinhamento dos elementos da tabela Nmero de colunas

<table align=right columns =2>

<td> A tag <td> utilizada para delimitar uma celula. <tr> A tag <tr> utilizada para iniciar uma linha na tabela. Exemplos de tabelas:

<table align=center columns=3> <tr> <td>marca</td> <td>ano</td> <td>modelo</td> </tr> <tr> <td>fiat</td> <td>2002</td> <td>palio elx</td> </tr> <tr> <td>mercedes</td> <td>2001</td> <td>E500</td> </tr>

Aplicaes para Celulares 179

<tr> <td>honda</td> <td>1999</td> <td>civic</td> </tr> <tr> <td>GM</td> <td>1998</td> <td>blazer</td> </tr> </table>
Resultado do exemplo marca fiat mercedes honda gm <template> A tag <template> define caractersticas comuns a todos os cards do dispositivo, disparando alguns eventos. Atributos ano 2002 2001 1999 1998 modelo palio elx e500 civic blazer

Nome id class onenterforward onenterbackward ontime

Descritivo dos Atributos

Tipo String String href href href

Obrigatrio No No No No No

Padro

Atributo id class onenterforward onenterbackward ontimer

Exemplo:

Descrio Identificao do elemento (nome nico) Classe a que o elemento pertence Define a URL a ser disparada, caso o usurio acesse um carto atravs da tag <do> Define a URL a ser disparada, caso o usurio acesse um carto atravs da tag <prev> Define a URL a ser disparada, caso o tempo definido na tag <timer> expire

<template onenterforward=/home.wml onenterbackward=/delphi.wml

180 Delphi 7 Internet e Banco de Dados

ontimer=/login.wml> </template>
<timer> A tag <timer> utilizada para disparar um evento ou chamada a partir de um determinado tempo, especificado na propriedade value (100 = 1 segundo). Atributos

Nome id class value

Exemplo:

Tipo String String Number

Obrigatrio No No Sim

Padro

<card name=card1 ontimer=#card2> <timer value=100/> <p>Esta mensagem ser destruda em 10 segundos</p> </card> <card name=card2> <p>Mensagem Destruda</p> </card>

Acentos em WML
Nome &nbsp; &iexcl; &cent; &pound; &curren; &yen; &brvbar; &sect; &uml; &copy; &not; &reg; &deg; &plusmn; &acute; &frac14; &frac12; &frac34; &iquest; &Agrave; &Aacute; &Acirc; Cdigo &#160; &#161; &#162; &#163; &#164; &#165; &#166; &#167; &#168; &#169; &#172; &#174; &#176; &#177; &#180; &#188; &#189; &#190; &#191; &#192; &#193; &#194; Resultado espao

Aplicaes para Celulares 181

&Atilde; &Auml; &Aring; &AElig; &Ccedil; &Egrave; &Eacute; &Ecirc; &Euml; &Igrave; &Iacute; &Icirc; &Iuml; &Ntilde; &Ograve; &Oacute; &Ocirc; &Otilde; &Ouml; &times; &Oslash; &Ugrave; &Uacute; &Ucirc; &Uuml; &Yacute; &thorn; &szlig; &agrave; &aacute; &acirc; &atilde; &auml; &aring; &aelig; &ccedil; &egrave; &eacute; &ecirc; &euml; &igrave; &iacute; &icirc; &iuml; &ntilde; &ograve;

&#195; &#196; &#197; &#198; &#199; &#200; &#201; &#202; &#203; &#204; &#205; &#206; &#207; &#209; &#210; &#211; &#212; &#213; &#214; &#215; &#216; &#217; &#218; &#219; &#220; &#221; &#222; &#223; &#224; &#225; &#226; &#227; &#228; &#229; &#230; &#231; &#232; &#233; &#234; &#235; &#236; &#237; &#238; &#239; &#241; &#242;

182 Delphi 7 Internet e Banco de Dados

&oacute; &ocirc; &otilde; &ouml; &divide; &oslash; &ugrave; &uacute; &ucirc; &uuml; &yacute; &thorn; &yuml;

&#243; &#244; &#245; &#246; &#247; &#248; &#249; &#250; &#251; &#252; &#253; &#254; &#255;

Desenvolvendo Aplicaes WAP x Delphi

Agora vamos colocar a mo na massa e desenvolver alguns exemplos de aplicaes WAP, com o nosso amigo Delphi.

Primeiro Exemplo (o famoso Hello...)

Sei que isso pode parecer bobagem, mas o nosso companheiro Hello World ajuda muito. No Delphi iremos criar uma aplicao servidora no padro CGI. A partir do Delphi, selecione as opes File/New/Other... e em seguida a opo Web Server Application, como ilustra a figura 10.3.

Figura 10.3 Opo Web Server Application Na janela seguinte selecione a opo CGI Stand-Alone executable (figura 10.4).

Aplicaes para Celulares 183

Figura 10.4 Seleo do tipo da aplicao Em seguida teremos o nosso WebModule (figura 10.5),

Figura 10.5 WebModule Bem, seguindo o nosso primeiro projeto, atravs do duplo-clique no WebModule, acesse o editor de ActionItems (figura 10.6).

Figura 10.6 editor ActionItems Clique no primeiro boto do editor para inserir uma nova Action (figura 10.7).

184 Delphi 7 Internet e Banco de Dados

Figura 10.7 ActionItem Em seguida altere as seguintes propriedades.

OBJETO TWebActionItem Objeto padrao Propriedade Default Name PathInfo Valor True padrao /padrao

Esta ser nossa Action padro, ou seja, caso o usurio no digite nada, alm do nome da nossa aplicao, esta Action ser executada. Embora a propriedade PathInfo possua o mesmo valor da propriedade Name, ela que executa a Action, ou seja, no browser o que vale o valor da PathInfo. No evento OnAction coloque o seguinte cdigo: 001 002 003 004 Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>Ola Mundo!</p></card></wml>';

No se assustem com as denominaes do cabealho <DOCTYPE wml...., isso um padro, e o restante iremos conhecendo aos poucos. Vamos analisar o cdigo: Na linha 001, estou dizendo ao servidor, atravs do mtodo Response.ContentType, que o tipo de informao no padro WAP. Response.ContentType:='text/vnd.wap.wml'; Em, seguida, nas linhas 002,003 e 004, estou empacotando a resposta (Response.Content) e enviando ao servidor, que por sua vez, envia ao celular. Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>Ola Mundo!</p></card></wml>'; Grave a unit do nosso projeto como un_ola.pas e o projeto como ola.dpr. Habitualmente testamos nossas aplicaes servidoras num browser, como o Internet Explorer, mas neste caso iremos test-la no nosso simulador Deck-It. Lembram dele?

Aplicaes para Celulares 185 No Deck-It digite o que segue na barra de endereos: http://localhost/cgi-bin/ola.exe A figura 10.8 ilustra o resultado da nossa aplicao:

Figura 10.8 Resultado da aplicao S para ter uma idia, voc poderia simular em seu prprio celular WAP este exemplo. Mas Facunte, como eu faria isso? Conecte seu computador Internet, anote o nmero do IP fornecido no momento da conexo, exemplo: 200.198.12.1, e digite no seu celular (o modo de entrada para comunicao WAP varia de celular para celular, consulte o manual de instrues), o endereo: http://200.198.12.1/cgi-bin/ola.exe Repare que o nmero, na realidade o seu endereo de IP atual (exemplo). Continuando com a nossa aplicao, vamos criar mais uma Action com as seguintes propriedades:

OBJETO TWebActionItem Objeto Theclub Propriedade Default Name PathInfo Valor False theclub /theclub

No evento OnAction coloque o seguinte cdigo: 001 002 003 004 Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>Sejam bem-vindos ao The Club</p></card></wml>';

186 Delphi 7 Internet e Banco de Dados

O cdigo exatamente igual ao anterior, em que apenas substituimos a mensagem. Vamos testar o cdigo? No Deck-It digite o que segue na barra de endereos: http://localhost/ola.exe/theclub Repare que estamos colocando o pathinfo theclub. A figura 10.9 ilustra o resultado da nossa segunda Action.

Figura 10.9 Segunda Action interessante, no acham? E a, amigos, esto preparados para brincar com banco de dados e WAP?

Listagem 10.1
unit un_ola; interface uses SysUtils, Classes, HTTPApp; type TWebModule1 = class(TWebModule) procedure WebModule1padraoAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); procedure WebModule1theclubAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); private { Private declarations } public { Public declarations } end; var WebModule1: TWebModule1; implementation

Aplicaes para Celulares 187 {$R *.DFM} procedure TWebModule1.WebModule1padraoAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); begin Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>Ola Mundo !</p></card></wml>'; end; procedure TWebModule1.WebModule1theclubAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); begin Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>Sejam bem-vindos ao THE CLUB</p></card></wml>'; end; end.

Segundo Exemplo (Banco de Dados)

A aplicao que iremos desenvolver, consiste em apresentar uma lista de e-mails que est armazenada em nosso banco de dados. Atravs das opes File/New..., selecione o item Web Server Application (figura 10.10) e clique em OK.

Figura 10.10 Item Web Server Application

188 Delphi 7 Internet e Banco de Dados Em seguida, selecione o tipo de aplicao CGI, e marque a opo Cross Platform (figura 10.11). Perceba que com isso poderemos executar a mesma aplicao num servidor Linux, sendo que o cdigo dever ser recompilado em Kylix.

Figura 10.11 Escolha do tipo da aplicao servidora Agora, neste ponto, precisamos estabelecer a conexo com o nosso banco de dados. Insira um objeto do tipo TSQLConnection, e atravs do duplo-clique, j na tela de configurao, crie uma nova conexo do tipo Interbase, alterando as propriedades que seguem. A figura 10.12 ilustra o dilogo de propriedades do componente TSQLConnection.

PROPRIEDADE

VALOR

CommitRetain Database Password UserName Name

False localhost:c:\cursoweb\clientes.gdb a famosa masterkey o famoso SYSDBA ConexaoBD

Altere tambm a propriedade LoginPrompt para false. Nunca esquea de fazer esta alterao, pois numa aplicao servidora, no existe a possibilidade do usurio interagir no login do banco de dados.

Aplicaes para Celulares 189

Figura 10.12 Configurao da Conexo Agora vamos inserir o objeto para manipular nossa tabela de clientes. Insira um objeto do tipo TSQLDataSet, e altere as seguintes propriedades:

PROPRIEDADE

VALOR

SQLConnection CommandText Active

ConexaoBD select * from TBCLIENTE True

Oba, j estamos chegando l. Agora vamos inserir um objeto do tipo TdataSetTableProducer. No confundam com TdataSetPageProducer. Altere o nome do componente para producerCliente, e a propriedade DataSet para SQLCliente. Atravs de um duplo-clique teremos a seguinte tela (assistente de configurao figura 10.13).

Figura 10.13 Assistente de Configurao

190 Delphi 7 Internet e Banco de Dados Caso no esteja vendo uma tela parecida (perceba que os dados j esto inseridos no banco e que voc dever inserir seus prprios registros), verifique se est tudo certo com a sua conexo. Deixe somente o campo e-mail, pois iremos listar apenas esta informao em nosso celular. Para realizar a tarefa, selecione os outros campos e aperte a tecla delete. Veja o resultado desta operao, na figura 10.14.

Figura 10.14 Neste ponto, iremos criar nossa Action para apresentar a informao no celular. Crie uma Action com o nome dados, atravs do duplo-clique no WebModule. Veja a figura 10.15.

Figura 10.15 Action dados No evento OnClick da Action dados, insira o cdigo que segue. // Abre o SQLCliente SQLCliente.Open; // Define o tipo do contedo Response.ContentType:='text/vnd.wap.wml'; // Monta a cabealho padro

Aplicaes para Celulares 191

Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>'; // Insere o conteudo da nossa Tabela producer_Cliente na resposta e finaliza Response.Content:=Response.Content+producerCliente.Content+ '</p></card></wml>'; // Fecha o SQLCliente SQLCLiente.Close;

Com base no exemplo anterior, fica bastante simples entender este cdigo. Primeiro, estamos abrindo o nosso DataSet (SQLCliente). SQLCliente.Open; Em seguida estamos atribuindo resposta, o tipo de empacotamento WML. Response.ContentType:='text/vnd.wap.wml'; Na prxima instruo, estamos fazendo as definies iniciais, como cabealho <?xml...>, card <card>, e incio de um pargrafo <P>. Isso imprescindvel. Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>'; Agora vem a parte interessante. Estamos adicionando ao pacote de resposta (Response.Content), a informao obtida atravs do componente producer_Cliente, e finalizando o pargrafo<P>, o Card</card> e o documento WML </wml>. Response.Content:=Response.Content+producerCliente.Content+ '</p></card></wml>'; Amigos, agora s compilar e testar no Deck-It. http://localhost/cgi-bin/wap_bd.exe/dados Vejam o resultado (figura 10.16).

192 Delphi 7 Internet e Banco de Dados

Figura 10.16 Resultado da aplicao.

Listagem 10.2
unit un_wap_bd; interface uses SysUtils, Classes, HTTPApp, DBXpress, FMTBcd, DB, SqlExpr, DBWeb; type TWebModule1 = class(TWebModule) ConexaoBD: TSQLConnection; SQLCliente: TSQLDataSet; producer_Cliente: TDataSetTableProducer; procedure WebModule1WebActionItem1Action(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); private { Private declarations } public { Public declarations } end; var WebModule1: TWebModule1; implementation {$R *.xfm} procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); begin // Abre o SQLCliente SQLCliente.Open; // Define o tipo do contedo Response.ContentType:='text/vnd.wap.wml'; // Monta a cabealho padro

Aplicaes para Celulares 193

Response.Content:='<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">'+ '<wml><card id="cartaum"><p>'; // Insere o conteudo da nossa Tabela producer_Cliente na resposta e finaliza Response.Content:=Response.Content+producer_Cliente.Content+ '</p></card></wml>'; // Fecha o SQLCliente SQLCLiente.Close; end; end.

Terceiro Exemplo (Incluso)

Agora vamos desenvolver algo mais interativo, onde o usurio do celular poder se cadastrar em nosso banco de dados. Atravs das opes File/New..., selecione o item Web Server Application (figura 10.10) e clique em OK.

Figura 10.17 Item Web Server Application Em seguida, selecione o tipo de aplicao CGI, e marque a opo Cross Platform (figura 10.18).

194 Delphi 7 Internet e Banco de Dados

Figura 10.18 Escolha do tipo da aplicao servidora Agora, neste ponto, precisamos estabelecer a conexo com o nosso banco de dados. Insira um objeto do tipo TSQLConnection, e atravs do duplo-clique, j na tela de configurao, aponte para a nossa conexo Clientes, criada anteriormente. Vamos relembrar os atributos da conexo.

PROPRIEDADE

VALOR

CommitRetain Database Password UserName Name

False localhost:c:\cursoweb\clientes.gdb a famosa masterkey o famoso SYSDBA ConexaoBD

Altere tambm a propriedade LoginPrompt para false. Nunca esquea de fazer esta alterao, pois numa aplicao servidora, no existe a possibilidade do usurio interagir no login do banco de dados.

Aplicaes para Celulares 195

Figura 10.18 Configurao da Conexo Agora vamos inserir o objeto para manipular nossa tabela de clientes. Insira um objeto do tipo TSQLDataSet, e altere as seguintes propriedades:

PROPRIEDADE

VALOR

SQLConnection CommandText

ConexaoBD INSERT INTO TBCLIENTE (COD_CLIENTE, RAZAO_SOCIAL, EMAIL) VALUES (0,:pRAZAO,:pEMAIL)

Repare que estamos colocando dois parmetros, (pRAZAO e pEMAIL), que devero ser configurados atravs da propriedade PARAMS (figura 10.20).

Figura 10.20 Params

196 Delphi 7 Internet e Banco de Dados Atravs do duplo-clique na propriedade Params, acessamos o editor de parmetros (figura 10.21). Configure os dois parmetros para o tipo ftString, atravs da propriedade DataType.

Figura 10.21 Configurao dos Parmetros Ok amigos, agora vamos continuar nossa aplicao inserindo um componente do tipo TPageProducer e alterar as seguintes propriedades:

PROPRIEDADE

VALOR

Name HTMLDoc

ppInclusao (Veja a listagem de cdigo que segue)

Insira este cdigo na propriedade HTMLDoc do objeto ppInclusao. <wml> <card id="inclusao"> <p align="center"> Inclusao Clientes <br/> <br/> </p> <p> Razao Social: <input type="text" name="razao"/> <br/> eMail : <input type="text" name="email"/> <do type="accept" label="CONFIRMA"> <go href="confirma" method="post"> <postfield name="razao" value="$razao"/> <postfield name="email" value="$email"/> </go> </do> </p> </card> </wml> Agora vamos criar uma varivel em nosso WebModule para facilitar nas respostas ao cliente, em nosso caso, o celular. Antes da seo implementation, crie a nossa varivel cabealho, como segue: var WebModule1: TWebModule1; cabecalho:string = '<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM"

Aplicaes para Celulares 197 "http://www.wapforum.org/DTD/wml_1.1.xml">'; implementation Neste ponto, iremos criar nossas Actions (figura10.22).

Figura 10.22 Actions Teremos uma Action para apresentar a tela de incluso, e outra para confirmar. Primeiro vamos criar a Action inclusao.(sem acento mesmo). No evento OnAction, insira o cdigo que segue: Response.ContentType:='text/vnd.wap.wml'; Response.Content:=cabecalho+ppInclusao.Content; Neste cdigo, estamos informando o tipo de pacote e utilizando nossa varivel auxiliar cabealho para compor a nossa resposta, alm, claro, do contedo do Producer ppInclusao. Bem simples, no? Em seguida, precisamos criar a nossa Action confirma. No evento OnAction, insira o cdigo que segue: try SQLInsere.ParamByName('pRazao').Value:=Request.ContentFields.Values['razao']; SQLInsere.ParamByName('pemail').Value:=Request.ContentFields.Values['email']; SQLInsere.ExecSQL(); Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<wml><card id="ok"><p>Registro Incluido</p></card></wml>'; except Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<wml><card id="ok"><p>Erro na Incluso</p></card></wml>'; end; Neste cdigo estamos atribuindo aos parmetros de nossa Query SQLInsere, o contedo informado pelo usurio, e transmitido atravs do mtodo POST. O cdigo est protegido atravs dos comandos try/except e, em caso de sucesso, apresentamos ao usurio a mensagem Registro Includo. Caso contrrio, apresentamos a mensagem Erro na Incluso. As figuras 10.23, 10.24, 10.25 e 10.26 ilustram nossa aplicao em ao. Para chamar a aplicao, utilize: http://localhost/cgi-bin/wap_inc.exe/dados

198 Delphi 7 Internet e Banco de Dados

Figura 10.23 Digitando Razo Social

Figura 10.24 Digitando e-mail

Figura 10.25 Confirmando dados

Aplicaes para Celulares 199

Figura 10.26 Registro includo com sucesso Amigos, com um pouquinho de esforo, d para criar uma aplicao bem completa para celulares. Digo esforo pois existem vrios limites nos aparelhos, como tamanho de tela, capacidade de dados, entre outras coisas, que nos fazem voltar ao tempo da magia e dedicao, onde fazamos malabarismos com o Clipper, o C e o Turbo Pascal para oferecer telas agradveis aos nossos usurios. Encerramos por aqui este tpico, e espero que tenham gostado.

Listagem 10.3 WAP_Inclusao

unit un_wap_inclusao; interface uses SysUtils, Classes, HTTPApp, DBXpress, FMTBcd, HTTPProd, DB, SqlExpr; type TWebModule1 = class(TWebModule) ConexaoBD: TSQLConnection; SQLInsere: TSQLDataSet; ppInclusao: TPageProducer; procedure WebModule1inclusaoAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); procedure WebModule1confirmaAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); private { Private declarations } public { Public declarations } end; var WebModule1: TWebModule1; cabecalho:string = '<?xml version="1.0"?>'+ '<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">';

200 Delphi 7 Internet e Banco de Dados implementation {$R *.xfm} procedure TWebModule1.WebModule1inclusaoAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); begin Response.ContentType:='text/vnd.wap.wml'; Response.Content:=cabecalho+ppInclusao.Content; end; procedure TWebModule1.WebModule1confirmaAction(Sender: TObject; Request: TWebRequest; Response: TWebResponse; var Handled: Boolean); begin try SQLInsere.ParamByName('pRazao').Value:=Request.ContentFields.Values['razao']; SQLInsere.ParamByName('pemail').Value:=Request.ContentFields.Values['email']; SQLInsere.ExecSQL(); Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<wml><card id="ok"><p>Registro Incluido</p></card></wml>'; except Response.ContentType:='text/vnd.wap.wml'; Response.Content:='<wml><card id="ok"><p>Erro na Incluso</p></card></wml>'; end;

end; end.

Aplicaes para Celulares 201

Anotaes de Dvidas

?
Preciso Revisar

Anotaes Gerais