HELYOWAP Tutorial WML (04)

helyoWAP
TUTORIAL WML (04) Programas comentados: phone5.wml - phone6.wml

Autor: Helio Fonseca Rosa

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

Programa phone5.wml

Objetivo: Modificar os programas phone3.wml e phone4.wml para que as diversas telas ( que eram acessadas de modo seqüencial) possam ser exibidas diretamente a partir de um menu como da primeira figura abaixo .
O nome do programa será phone5.wml. Conterá um deck com quatro cards (correspondentes às telas com a lista de links e as já conhecidas "HOJE", "QUARTA" e "QUINTA").

As telas abaixo dão uma idéia da operação. A primeira é exibida na abertura do programa e a seta indica a primeira opção, por "defaut" (definida pelo próprio simulador); a segunda tela já apresenta uma nova seleção ("QUINTA"). As demais telas são obtidas ao se pressionar a "softkey" de label "Link1", "Link2" e "Link3" da tela inicial. É possível retornar à tela inicial a partir destas telas pressionado-se a "softkey" de label "Lista".
O programa que exibe a tela do eclipse receberá o nome de phone6.wml e terá mais uma figura da lua. E também permite o retorno direto à primeira tela do phone5.wml.

----->

[Telas exemplificando o funcionamento do phone5.wml]

[Tela referente ao programa phone6.wml]

Inicialmente, vamos exibir os dois programas que produzem as telas solicitadas. Em seguida, vamos testar separadamente o trecho referente à primeira tela.
Um bom exercício preliminar é estudar e tentar entender estas listagens antes de ler os comentários.

phone5.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>
 <template>
 <do type="options" label="Lua">
 <go href="phone6.wml"/>
 </do>
 <do type="accept" label="Lista">
 <go href="#primeiro"/>
 </do>
 </template>
 <card id="primeiro">
 
 **helyoMobile** 
 Lista de links: 
 <anchor title="Link1"> <go href="#hoje"/>HOJE</anchor> 
 <anchor title="Link2"><go href="#quarta"/>QUARTA</anchor> 
 <anchor title="Link3"><go href="#quinta"/>QUINTA</anchor> 
 
 </card>
 <card id="hoje">
 
 ** helyoMOBILE ** 
 
 
 HOJE 
 Max: 40 
 Min: 37
 
 </card >
 <card id="quarta">
 
 ** helyoMOBILE ** 
 
 
 QUARTA 
 Max: 41 
 Min: 38
 
 </card>
 <card id="quinta">
 
 ** helyoMOBILE ** 
 
 
 QUINTA 
 Max: 29 
 Min: 28
 
</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 phone5.wml.
Neste processo, o "Bloco de Notas" , automaticamente, mudou a extensão para phone5.wml.txt!!! . Utilizando o Windows Explorer (recomendado nestes casos) o arquivo foi renomeado para phone5.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/phone5.wml . As telas poderão ter uma aparência diferente, dependo das características técnicas do simulador ou celular utilizado.

phone6.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>
 <do type="accept" label="Lista">
 <go href="phone5.wml"/>
 </do>
 
 ** helyoMOBILE ** 
 <img alt="[lua1]" localsrc="moon2" src=""/>
 <img alt="[lua2]" localsrc="moon1" src=""/> 
 
 
 Proximo eclipse lunar:
 15/mai/2001
 
</card>
</wml>

Do mesmo modo, 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 phone6.wml.
Neste processo, o "Bloco de Notas" , automaticamente, mudou a extensão para phone6.wml.txt!!! . Utilizando o Windows Explorer (recomendado nestes casos) o arquivo foi renomeado para phone6.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/phone5.wml . As telas poderão ter uma aparência diferente, dependo das características técnicas do simulador ou celular utilizado

Vejamos o trecho de programa que produz a primeira tela (como anteriormente, foi acrescentada a tag </wml> para que possa ser testado individualmente):

phone5a.wml

Para teste, o autor gravou este programa em seu micro como phone5a.wml. Fica a sugestão.
Este programa também está disponível na WEB em http://sites.uol.com.br/helyomobile/wml/phone5a.wml.

Comentários:
No programa phone3.wml vimos um exemplo do elemento "template" usado para programar a tecla "OPTIONS". Agora estamos programando as duas teclas, "ACCEPT" e "OPTIONS" , programação esta válida para todos os cards; vamos novamente chamar a atenção para os códigos de desvio: a tecla "ACCEPT" produz um desvio para um card e a tecla "OPTIONS" produz um desvio para um deck.
O label da tecla "ACCEPT" será "Lista" e o da tecla "OPTIONS" será "Lua".

Importante: já havíamos alertado que esta programação "geral" propiciada pelo elemento "template" pode ser alterada (ou ou redefinida ou sobrepujada) dentro de qualquer card ; é o que acontece com o <card id="primeiro"> : o comando "anchor" redefine automaticamente o label e o destino do salto produzido pela tecla "ACCEPT>. Para os demais cards, as duas "softkeys" obedescem à programação imposta pelo "template".

O elemento "anchor" então faz o seguinte: transforma uma palavra ou frase num hiperlink para possibilitar um desvio quando a tecla "ACCEPT" é acionada e atribuindo um label à mesma.
Quando observamos detidamente um hiperlink podemos identificar duas partes : o inicio (ou cabeça ("head") ou ponto de partida) do desvio e o destino ou cauda ("tail").
Neste caso, os pontos de partida são as palavras HOJE, QUARTA e QUINTA; e os destinos são especificados pelos atributos "id" dos diversos cards.
Um link ancorado ("anchored link") tem sempre uma tarefa ("task") associado a ele. Estas tarefas associadas podem ser executadas pelos elementos <go>, <prev> e <refresh> .

Eis a estrutura do primeiro "anchor" :
<anchor title="Link1">
<go href="#hoje"/>HOJE
</anchor>.

Os colchetes [ ] que aparecem na tela envolvendo a palavra HOJE são colocados automaticamente pelo programa.
( Confira em outros simuladores e celulars WAP as diferentes maneiras de exibição dos links ancorados.)

A ação é a seguinte: posicionada a seta ou cursor na palavra HOJE e pressionada a tecla correspondente ao label Link1, haverá um desvio para a tela correspondente ao card identificado por "#hoje".

Resumindo:
Ponto de partida: indicado pela palavra HOJE;
Ponto de destino: indicado por" #hoje", referente ao <card id="hoje">;
Label da softkey "ACCEPT" : palavra "Link1"

O elemento "anchor" tem uma forma abreviada que é o elemento <a></a> .
A sintaxe seria <a href="#hoje" title="link1">HOJE</a>.
Diz-se neste caso que uma tarefa é realizada por um "go" implícito.

Vejamos como ficaria a listagem utilizando o "go implícito" para produzir a mesma tela inicial:

phone5b.wml

Para teste, o autor gravou este programa em seu micro como phone5b.wml. Fica a sugestão.
Este programa também está disponível na WEB em http://sites.uol.com.br/helyomobile/wml/phone5b.wml.

Programa phone6.wml

Objetivo: Adaptar o programa phone4.wml para se ajustar ao programa phone5.wml, ou seja, reprogramar a tecla "ACCEPT" com o novo label "Lista" e desvio para Phone5.wml.
Eis a tela desejada:

phone6.wml (código):

Para teste, o autor gravou este programa em seu micro como phone6.wml. Fica a sugestão.
Este programa também está disponível na WEB em http://sites.uol.com.br/helyomobile/wml/phone6.wml.

Comentário:
Foi acrescentada mais uma figura de lua na tela, retirada da lista de ícones da documentação da Phone.com.
Como exercício, novamente retire as figuras da listagem acima e veja o resultado num simulador.

WirelessBRASIL Portal helyoWAP Anterior Próxima