HELYOWAP Tutorial WML (06)

helyoWAP
TUTORIAL WML (06) Programas comentados: phone_dica1.wml - phone_dica2.wml - phone8c.wml

Autor: Helio Fonseca Rosa

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

DICA_1 !!!!
O programa que permite a navegação de um celular na WEB é chamado de micro-browser ou mobile-browser.
O micro-browser da Openwave numera somente 9 linhas referentes ao elemento "select".
Assim, se a lista contiver mais de 9 itens é preciso fazer um pequeno esforço de programação para facilitar a operação por parte do usuário.
É necessário dividir a lista de opções em dois ou mais cards.

O décimo item da lista deverá propiciar o salto para o próximo card.

No entanto, o ideal é que o usuário nem precise fazer o rolamento da tela.
O elemento "select" permite que o usuário pressione o número correspondente do teclado para fazer a opção.
O décimo item da lista poderá ser um salto para o próximo card que poderá ser obtido pressionando-se a tecla "0" (zero) do simulador ou celular..

Vamos aproveitar a estrutura do programa phone8.wml para fazer um exemplo didático dos casos acima citados.
Vamos imaginar uma mensagem para cada mês do ano.

Eis a listagem correspondente:

phone_dica1.wml

Dica-2 !!!!
Na seqüência, vamos então tentar facilitar ainda mais a operação, evitando que o usuário faça o rolamento da tela, navegando somente por meio das teclas.
Esperamos que o leitor esteja atento e que as telas e a listagem dispensem maiores explicações.

Lembrando: em cada uma das telas acima o usuário pode fazer suas opções sem rolar a tela, apenas pressionando as teclas correspondentes no teclado do simulador ou celular.
Eis a listagem correspondente:

phone_dica2.wml

<?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="card1">

<do type="accept" label="Mensagem">
<go href="#exibir_mensagem"/>
</do>
** helyoMOBILE **

Mensagens [1 a 3]:
<select name="msg" ivalue="1">
<option value="Mensagem1">Janeiro</option>
<option value="Mensagem2">Fevereiro</option>
<option value="Mensagem3">Marco</option>
<option onpick="#card2">Mais...</option>
</select>

</card>

<card id="card2">

<do type="accept" label="Mensagem">
<go href="#exibir_mensagem"/>
</do>
** helyoMOBILE **

Mensagens [4 a 6]:
<select name="msg" ivalue="1">
<option value="Mensagem4">Abril</option>
<option value="Mensagem5">Maio</option>
<option value="Mensagem6">Junho</option>
<option onpick="#card3">Mais...</option>
</select>

</card>

<card id="card3">

<do type="accept" label="Mensagem">
<go href="#exibir_mensagem"/>
</do>
** helyoMOBILE **

Mensagens [7 a 9]:
<select name="msg" ivalue="1">
<option value="Mensagem7">Julho</option>
<option value="Mensagem8">Agosto</option>
<option value="Mensagem9">Setembro</option>
<option onpick="#card4">Mais...</option>
</select>

</card>

<card id="card4">

<do type="accept" label="Mensagem">
<go href="#exibir_mensagem"/>
</do>
** helyoMOBILE **

Mensagens [10 a 12]:
<select name="msg" ivalue="1">
<option value="mesg10">Outubro</option>
<option value="mesg11">Novembro</option>
<option value="mesg12">Dezembro</option>
<option onpick="#card14">Inicio</option>
</select>

</card>
<card id="exibir_mensagem">
<do type="accept" label="Inicio">
<go href="#card1"/>
</do>

** helyoMOBILE ** 

<big>Mensagem:</big> 
$(msg)

</card>
</wml>

Phone8c.wml
Objetivo: Modificar o programa phone8.wml acrescentando uma tela temporizada .

O <card id="construcao"> do programa phone8.wml deve ser modificado para ser EXIBIDO APENAS POR ALGUNS SEGUNDOS e retornar à tela inicial. Neste caso, podemos suprimir a programação da tecla "ACCEPT" e o label da mesma.

Trecho do programa que gerou a tela acima :

<card id="construcao" ontimer="#card1">
<timer value="30"/>


** helyoMOBILE **

<big>horoscopo:</big>

(Em construcao !)
Retorno automatico para tela anterior. Aguarde

</card>

Comentários:
Em azul, vemos os comandos responsáveis pela temporização : "ontimer" é um atributo do elemento card e indica o endereço de desvio; O elemento "timer" contém o número de segundos de exposição, do seguinte modo : 10 para 1 segundo, 20 para 2 segundos, 30 para 3 segundos, etc.
Então o trecho de código mostrado pode ser entendido assim: quando ocorrer o desvio para esta tela, ela deve ser exibida por 3 segundos; após, deve ser exibida a tela correspondente ao card1.

O label "Back" foi gerado automaticamente pelo simulador. Veja exercício sugerido (*).

Phone8c.wml (código):

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

(*) Exercício sugerido:
Programe a "softkey" ACCEPT" para exibir a palavra "Signos" em substituição ao label "Bakc) gerado automaticamente pelo simulador, adequando-o à ação de retorno a ser executada após os 3 segundos.
Eis a tela sugerida:

O autor fez este teste e o programa pode ser acessado na WEB em http://sites.uol.com.br/helyomobile/wml/phone8c.wml .

WirelessBRASIL Portal helyoWAP Anterior Próxima