HELYOWAP Tutorial WML pág. 05

helyoWAP
TUTORIAL WML (05) Programas comentados: phone7.wml - phone8.wml - phone8a.wml - phone8b.wml

Autor: Helio Fonseca Rosa

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

Programa phone7.wml
Objetivo: gerar uma tela que contém uma lista de opções de signos (de horóscopo); ao ser escolhida uma opção e ser pressionada a tecla "ACCEPT" cujo label é "Mensagem", o programa é desviado para outra tela que exibe a mensagem correspondente ao signo. Nesta nova tela, ao ser pressionada a tecla "ACCEPT" cujo label é "Signos", é exibida novamente a tela com as opções iniciais.
Importante: poderemos gerar este programa utilizando a mesma estrutura do programa anterior (phone5.wml) que utilizou um deck com quatro cards. Mas vamos optar por uma técnica que permite a utilização de apenas dois cards num mesmo deck.

[Telas exemplificando o funcionamento do programa phone7.wml]

phone7.wml (código):

<card id="exibir_mensagem">
 <do type="accept" label="Signos">
 <go href="#card1"/>
 </do>
 
 ** helyoMOBILE ** 
 
 <big>Mensagem:</big> 
 $(horoscopo)
 
 </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 phone7.wml.
Neste processo, o "Bloco de Notas" , automaticamente, mudou a extensão para phone7.wml.txt!!! . Utilizando o Windows Explorer (recomendado nestes casos) o arquivo foi renomeado para phone7.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/phone7.wml . As telas poderão ter uma aparência diferente, dependo das características técnicas do simulador ou celular utilizado.

Comentários :
O programa é constituído de um deck com dois cards. O primeiro card gera a tela de opções de signos. Esta tela contém as diversas mensagens correspondentes aos signos.O segundo card tem uma estrutura básica, fixa, e recebe as mensagens da tela inicial que são "transportadas" dentro de uma "variável"..
"Variável", como o próprio termo já vai indicando, é uma palavra (ou "posição de memória") cujo conteúdo pode ser modificado.
Na realidade, como o deck é descarregado de uma só vez para a memória do celular, o conteúdo da variável permanece no mesmo local, sendo utilizado sempre que algum card desse deck tiver necessidade.
Este processo de "seleção de uma opção" é possível pela utilização de dois elementos da linguagem WML chamados "select" e "option".
O elemento <select> permite a escolha de um item numa lista de opções (ou mais de um item - a ser estudado mais tarde). O elemento <select> trabalha associado ao elemento <option> (não confundir com a tecla "OPTIONS").

Por exemplo, suponhamos que foi escolhida a opção "Peixes".
Entrará em ação o código :
<option value="Aguarde grandes acontecimentos.">Peixes</option>.
A frase "Aguarde grandes acontecimentos" será armazenada na variável de nome "horoscopo" especificada em :
<select name="horoscopo" ivalue="2"> .
"ivalue" é um atributo do elemento "select".
O valor "2" de "ivalue", no caso, indica que decidimos que na abertura desta tela a seta estará indicando a segunda opção.
Em resumo o "funcionamento" do card1 é: ao ser escolhido um signo, a mensagem correspondente é armazenada na variável "horoscopo" e a tecla "ACCEPTt" com o label "Mensagem" desvia para o
<card id="exibir_mensagem"> .
Neste card ocorre a reprogramação da tecla "ACCEPT" para receber o label "Signos" e efetuar o desvio para o card inicial <card id="card1"> .Ainda neste card observe o seguinte: o nome da variável que contém a mensagem é horoscopo mas o seu conteúdo é referenciado como $(horoscopo).
Ou seja, na tela não é impresso o termo "$horoscopo" mas o conteúdo da variável, que no caso é: Aguarde grandes acontecimentos.
Esta representação é preferível à $horoscopo, que também funciona, mas nem sempre.
No card 1 utilizamos o elemento  e no card 2 o elemento <big> que, no caso do UP Simulator, tiveram o mesmo efeito do elemento  , que é "negritar"

Observação: a numeração dos itens não foi programada; foi colocada automaticamente pelo simulador.

Programa phone8.wml
Objetivo : Acrescentar mais uma opção à lista inicial do programa anterior, mas para desviar para uma tela diferente daquela de formato padrão.
Utilizar o atributo "onpick" que possibilita o desvio para um endereço especificado dentro do elemento <option>.
Por exemplo, foi adicionada uma quarta opção, para ser usada durante a fase de construção do programa. Se o usuário tentar acessar outro signo, será exibida uma tela informando que o programa ainda está em construção.

phone8.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="card1">

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

 Escolha um signo:
 <select name="texto_msg" ivalue="3">
 <option value="Evite fazer promessas.">Capricornio</option>
 <option value="Aguarde grandes acontecimentos.">Peixes</option>
 <option value="Um novo amor espera por voce.">Aries</option>
 <option onpick="#construcao">Outros signos</option>
 </select>

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

 ** helyoMOBILE ** 

 <big>horoscopo:</big>

 $texto_msg

</card>
<card id="construcao">
<do type="accept" label="Signos">
 <go href="#card1"/>
</do>

 ** helyoMOBILE **

 <big>horoscopo:</big>

 (Por favor, aguarde. Estamos em construcao)

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

Comentários
"onpick" é um atributo do elemento "option".
O atributo "onpick" produz um mecanismo diferente de desvio. O endereço de desvio consta do próprio elemento <option> e não mais do conjunto "do" e "go". As modificações em relação ao programa anterior estão em vermelho.
Vejamos se está bem entendido : os três primeiros <option> atribuem à variável "horoscopo" um conteúdo/mensagem que será exibido pelo <card id="exibir_mensagem"> . Este mecanismo permite a exibição apenas da tela padrão produzida por este card. Para exibir uma tela diferente é necessário outro método : o que usa o "onpick", que redefine o endereço de desvio quando é acionada a tecla "ACCEPT".

O atributo "onpick" é uma abreviação do elemento <onevent> cuja sintaxe completa pode ser vista no código abaixo (em vermelho) que é uma reprodução do <card id="card1">:

<card id="card1">
 
 <do type="accept" label="Mensagem">
 <go href="#exibir_mensagem"/>
 </do>
 ** helyoMOBILE **
 
 
 Escolha um signo:
 <select name="horoscopo" ivalue="2">
 <option value="Evite fazer promessas.">Capricornio</option>
 <option value="Aguarde grandes acontecimentos.">Peixes</option>
 <option value="Um novo amor espera por voce.">Aries</option>
 <option>
 <onevent type="onpick">
 <go href="#construcao"/>
 </onevent>Outros signos
 </option>
 </select>

</card>

Exercício sugerido: substitua o trecho da listagem do programa phone8.wml referente ao card1 por esta nova listagem e teste com o nome de phone8a.wml.
O autor fez este teste e o programa pode ser acessado em http://sites.uol.com.br/helyomobile/wml/phone8a.wml .

Já podemos ganhar um pouco de flexibilidade na programação.
Vamos retornar ao programa phone8.wml.
Outro modo de obter o mesmo resultado sem usar o atributo "onpick" ou o elemento "onevent" seria programar o desvio para a tela "em construção" utilizando a "softkey" "OPTIONS", que está desocupada. A seta inicial deve estar apontada para o item 3 da lista.
A tela desejada é mostrada abaixo:

Eis o código correspondente:

phone8b.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>
<do type="options" label="Outros">
<go href="#construcao"/>
</do>
** helyoMOBILE **

Escolha um signo:
<select name="texto_msg" ivalue="3">
<option value="Evite fazer promessas.">Capricornio</option>
<option value="Aguarde grandes acontecimentos.">Peixes</option>
<option value="Um novo amor espera por voce.">Aries</option>

</select>

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

** helyoMOBILE ** 

<big>horoscopo:</big>

$texto_msg

</card>
<card id="construcao">
<do type="accept" label="Signos">
<go href="#card1"/>
</do>

** helyoMOBILE **

<big>horoscopo:</big>

(Por favor, aguarde. Estamos em construcao)

</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 phone8b.wml.
Neste processo, o "Bloco de Notas" , automaticamente, mudou a extensão para phone8b.wml.txt!!! . Utilizando o Windows Explorer (recomendado nestes casos) o arquivo foi renomeado para phone8b.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/phone8b.wml . As telas poderão ter uma aparência diferente, dependo das características técnicas do simulador ou celular utilizado.
Na seqüência, vamos apresentar dois procedimentos práticos com relação ao elemento "select", que chamaremos de Dica_1 e Dica_2.

WirelessBRASIL Portal helyoWAP Anterior Próxima