helyoWAP

Autor: Helio Fonseca Rosa

Esta página contém muitas figuras. Aguarde a carga se a conexão estiver lenta.

Phone15.wml
Objetivo: Adaptar o programa phone14.wml  para permitir ao usuário efetuar alguma correção nos dados digitados. Eis as telas pretendidas, na ordem em que aparecem por acionamento sucessivo da tecla "ACCEPT":

phone15.wml (código):

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="wellco">
<do type="accept" label="Conferir"> 
<go href="#confere"/> 
</do> 
<p align="center">
*** helyoWAP ***<br/>
WELCOME<br/>
Digite seu nome
<input name="nome_usuario"/><br/>
*** helyoWAP ***<br/>
WELCOME<br/>
Digite sua senha numerica
<input name="senha" format="4N"/> 
</p> 
</card> 

<card id="confere">
<do type="accept" label="Confirma"> 
<go href="#menu"/> 
</do>
<do type="options" label="Corrige">
<go href="#wellco"/>
</do>
<p align="center"> 
*** helyoWAP ***<br/><br/>
Voce digitou:<br/>
Nome :
$(nome_usuario)<br/>
Senha :
$(senha)<br/>
Confirma ou Corrige ?
</p> 
</card>
 
<card id="menu">
<p align="center">
*** helyoWAP ***<br/>
Link1<br/>
Link2<br/>
Link3<br/>
(links nao ativados neste exemplo)
</p>
</card>
</wml>

Para conferência, o autor copiou/colou a listagem acima no "Bloco de Notas" do Windows, o que cancela qualquer tipo de formatação anterior. Em seguida, alinhou todas as linhas à esquerda (o processo de copiar/colar pode trazer algum código espúrio, não visível).   Após, gravou o programa como  phone15.wml. 
Neste processo, o "Bloco de Notas" , automaticamente, mudou a extensão para phone15.wml.txt!!! . Utilizando o Windows Explorer (recomendado nestes casos) o arquivo foi renomeado para phone15.wml. Em seguida foi testado com êxito no OWG1 Simulator.
O leitor pode utilizar um simulador ou um celular WAP para acessar este programa no seguinte endereço da WEB:
http://sites.uol.com.br/helyomobile/wml/phone15.wml . As telas poderão ter uma aparência diferente, dependo das características técnicas do simulador ou celular utilizado.

Comentários:
Apesar do grande número de telas mostradas, o programa contém apenas um deck e três cards ("wellco", "confere" e "menu")
De um modo geral,  cada card  dá origem a uma tela.
Neste programa, a partir do  <card id="wellco">, devido a uma particularidade do elemento "input", são exibidas duas telas, uma para a entrada do nome e outra para entrada da senha (ao encontrar o elemento input, o programa interrompe sua execução para entrada do dado; após, abre outra tela para entrada do próximo dado).
A linha de código <input name="senha" format="4N"/> apresenta um novo atributo para formatação do dado entrado ("format").
Voltaremos ao assunto, mas intuitivamente podemos identificar que 4N significa que o usuário deve digitar uma senha com 4 dígitos numéricos. A tentativa de entrar mais dígitos é bloqueada. No simulador, o último dígito permitido aparece ressaltado (veja a terceira figura deste programa, acima).
Lembrando mais uma vez: no caso, o elemento "input" possibilita a criação e inicialização de duas variáveis no modo implícito: "nome_usuário" e "senha". O conteúdo das mesmas muda durante o processo de correção mas como tudo se passa  no mesmo deck, as variáveis permanecem disponíveis aos diversos cards.

Observação: 
Este é um programa didático. Não houve preocupação em otimizar a lógica com a programação completa da tecla "Back" ou do label "Back", que aparece automaticamente em alguns simuladores ou celulares reais. O uso desta opção neste exemplo é imprevisível.
No entanto, é possível ocultar o label "Back" colocado automaticamente em alguns casos.
O "elemento de tarefa" (task) <noop>, além de instruir o dispositivo a não realizar nenhuma ação, oculta o label da tecla escolhida.
Por exemplo, se inserirmos a linha <do type="accept"><noop/></do> no interior do card "menu" do programa phone15.wml, o label "Back" ficará oculto e a tecla "Accept" desativada.

<card id="menu">
<p align="center">
<do type="accept"><noop/></do>
*** helyoWAP ***<br/>
Link1<br/>
Link2<br/>
Link3<br/>
(links nao ativados neste exemplo)
</p>
</card>

O teste desta alteração fica como exercício para o leitor. Eis a tela a ser obtida: