HELYOWAP Tutorial WML

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

Objetivo: Exibir uma seqüência de telas contendo previsões de temperatura para HOJE (terça-feira, por exemplo), QUARTA e QUINTA. Cada tela conduz à próxima. O programa que exibe as telas é o phone3.wml, constituído de um deck contendo três cards, um para cada tela.

A partir de cada tela pode-se desviar para a tela que contém a data do próximo eclipse lunar. Esta é exibida pelo programa phone4.wml e permite o retorno à primeira tela ("HOJE").
As telas são as seguintes:

Inicialmente, vamos exibir os dois programas que produzem as telas solicitadas. Em seguida, vamos dividir os programa phone3.wml em três partes, testá-las de modo independente e comentá-las.
Um bom exercício preliminar é estudar e tentar entender estas listagens antes de ler os comentários.

<?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="phone4.wml"/>
 </do>
 </template>
<card id="hoje">
 <do type="accept" label="Quarta">
 <go href="#quarta"/>
 </do>
 
 ** helyoMOBILE ** 
 
 
 HOJE 
 Max: 40 
 Min: 37
 
 </card >
 <card id="quarta">
 <do type="accept" label="Quinta">
 <go href="#quinta"/>
 </do>
 
 ** 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 phone3.wml.
Neste processo, o "Bloco de Notas" , automaticamente, mudou a extensão para phone3.wml.txt!!! . Utilizando o Windows Explorer (recomendado nestes casos) o arquivo foi renomeado para phone3.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/phone3.wml . As telas poderão ter uma aparência diferente, dependo das características técnicas do simulador ou celular utilizado.

<?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="Hoje">
 <go href="phone3.wml"/>
 </do>
 
 ** helyoMOBILE ** 
 <img alt="[lua]" localsrc="moon2" src=""/> 
 
 
 Proximo eclipse lunar:
 15/mai/2001
 
</card>
</wml>

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

Vamos exibir o trecho de programa que produz a primeira tela (faremos o mesmo com as demais telas).

Nota: Foi acrescentada a tag </wml>, para "fechar" a listagem e permitir o teste.

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

Comentários:

Observe as tags <template> </template> : elas não pertencem à nenhum card; isto significa que o seu conteúdo é "geral" e que seu efeito se produz na âmbito do deck e não somente dentro de um card, ou seja, seu efeito é válido para todos os três cards do programa (este que está sendo mostrado e os próximos). O seu conteúdo atribui um label à tecla "OPTIONS" (à direita, em oposição à tecla "ACCEPT") que produzirá um desvio para o outro DECK associado à este (programa phone4.wml).
Compare esta programação da tecla "OPTIONS" , que faz um desvio para outro deck, com a da tecla "ACCEPT" do programa anterior (phone3.wml), que desviava para um card.
Veremos mais adiante que a especificação "geral" proporcionada por <template> pode ser redefinida dentro de qualquer card sempre que necessário.
Assim, template é um molde ou modelo comum à vários cards.

Antes de prosseguirmos, vejamos alguns termos encontrados na literatura técnica sobre as tags:
<card> - a palavra card está entre os sinais de "menor" e "maior" ("angle brackets");
<card> - esta é a tag inicial ("start tag") do elemento card;
</card> - esta é a tag final ("end tag") do elemento card;
 - esta é uma tag de um elemento isolado ou vazio ("empty");
<card> Primeiro texto</card> - "Primeiro texto" é o conteúdo ("content") do elemento card;
<card id="um" title="Primeiro"> - "id" e "title" são atributos ("attributes") do elemento card.

Vamos observar o "interior" ou conteúdo ("content") do <card id="hoje"> : os comandos associados "do" e "go" atribuem o label "Quarta" à tecla "ACCEPT" que produzirá um desvio para o <card id="quarta">. Note-se também que o texto da tela está contido em dois parágrafos diferentes. E que usamos as tags   para "negritar" (bold) a primeira linha da tela.
Esta tags pertencem ao conjunto de tags destinadas à formatação dos textos a serem exibidos nas telas dos simuladores e celulares. Eis o conjunto completo:

 - exibir com ênfase;
 - exibir com forte ênfase;
 - exibir em formato itálico;
 - exibir em negrito;
 - exibir o texto sublinhado ("underlined");
<big></big> - exibir com tipos grandes;
 - exibir com tipos pequenos;

Os simuladores e celulares apresentam respostas diferentes à estas tags. Recomenda-se, de um modo geral, utilizar  e  e não usar e (não encontrei justificativa técnica para esta recomendação).
Numa aplicação real é preciso verificar como os celulares do mercado respondem à estas tags.
Comece testando em seus simuladores:
Exercício:
Copie/cole o programa acima no seu processador textos.
Acrescente mais um parágrafo e copie/cole o trecho abaixo (colocando-o entre tags e ):

Texto nao formatado.
 Texto com enfase 
Com forte enfase 
Formato italico 
Texto em negrito 
Texto sublinhado 
<big>Tipos grandes</big> 
Tipos pequenos

Salve o arquivo com extensão .wml (por exemplo, exercicio3.wml) com opção "somente texto" e veja o resultado no simulador.
Procure deixar na tela do micro, em planos diferentes, o processador de textos e o simulador.
Maximize também a janela "Phone Information" e veja como fica fácil testar e fazer correções em seus programas.

Votando aos comentários sobre o programa.
Atenção para a diferença de sintaxe dos desvios :
- desviar para outro deck ---> <go href="phone4.wml"/>
- desviar para outro card ---> <go href="#quarta"/>
Neste caso, não existe a tag de fechamento </go>; foi substituida pela barra "/" no final do comando.

Vamos estudar o segundo trecho do programa. Abaixo, à esquerda, está a tela desejada, proporcionada pelo programa phone3.wml completo. E à direita, está a tela produzida pelo trecho escolhido. A diferença é o label "Lua" (rodapé da tela, rótulo da "softkey" OPTIONS).

Vejamos o código que a produziu (estamos acrescentando as três linha iniciais e as tags <wml> </wml> para testar este trecho separadamente) .

<?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="quarta">
<do type="accept" label="Quinta">
 <go href="#quinta"/>
</do>

 ** helyoMOBILE ** 


 QUARTA 
 Max: 41 
 Min: 38

</card>
</wml>

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

Comentários:
Dentro deste card programamos de novo a tecla "ACCEPT" atribuindo-lhe o label "Quinta" para desviar para o
<card id="quinta">.
Notar que o label "Lua" não consta desta tela. Como você se lembra, a tecla "OPTIONS" foi programada dentro do "template" . E a intrução <template> não constou deste trecho de programa. Uma pequena complicação para estimular o entendimento desta instrução.

Vamos estudar o terceiro trecho do programa. Abaixo, à esquerda, está a tela desejada, proporcionada pelo programa phone3.wml completo. E à direita, está a tela produzida pelo trecho escolhido. A diferença, novamente, é o label "Lua".

Vejamos o código que a produziu (estamos acrescentando as três linha iniciais e as tags <wml> </wml> para testar este trecho separadamente) .

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

 ** helyoMOBILE ** 


 QUINTA 
 Max: 29 
 Min: 28

</card>
</wml>

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

Comentários:
Neste card não há programação de teclas. Por "default" ( ou omissão ou ausência de programação) a tecla "ACCEPT" recebe o label "Back", acrescentado automaticamente pelo simulador; esta tecla permite o retorno ao card anterior; este procedimento não foi previsto no "Objetivo" mas vamos deixar como está, por enquanto. A tecla "BACK" do teclado do simulador (ao lado da tecla "CLR") permite o retorno aos cards anteriores (veremos isto mais adiante).

O programa phone3.wml possui um deck com três cards. Não há um limite definido para a quantidade de cards dentro de um deck.
Mas no atual estágio das memórias dos celulares o tamanho ideal e seguro de um deck está por volta de 1300 bytes. Mais tarde voltaremos a este assunto.

No "Objetivo" vimos que para complementar o programa anterior, desejamos obter uma tela sobre o eclipse lunar com uma pequena figura representando a lua; a tecla "ACCEPT" deverá exibir o label "Hoje".

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

Este programa é um deck de um card. Há uma programação da tecla "ACCEPT" que recebe o label "Hoje" e executa o desvio para o programa anterior, phone3.wml (que ao ser aberto exibe o primeiro card do phone3.wml (<card id="hoje">).

O comando que inclui a figura é: <img alt="[lua]" localsrc="moon2" src=""/>.
Atenção: esta sintaxe é válida apenas para o OWG1 Simulator. O resultado em outro simulador é imprevisível. O autor não conferiu se esta sintaxe é valida para celulares reais com software da Phone.com.

O atributo "alt" é obrigatório e contém a palavra ou mensagem que será mostrada se o simulador ou celular não puder exibir a figura; "src" deve conter o endereço da figura e não será considerado se a figura for um ícone válido contido na memória da simulador ou celular com software da Openwave.
Na documentação do SDK da Openwave ("WML Language Reference") encontramos na descrição do atributo "img" a relação destes ícones, mostrada parcialmente abaixo (deve-se usar o nome e não o número do ícone):

Lembrando: Estas figuras são exibidas apenas com software da Openwave.
As figuras no formato WBMP ("Wireless Bitmap") padronizadas pelo WAP serão estudadas na seção Coloque uma figura WBMP na sua mini-page .
Exercício:
Copie/cole o programa acima no seu processador textos.
Retire o comando de impressão da imagem. Coloque em seu lugar um título centralizado, de sua preferência.
Se você já domina a utilização de imagem no formato WBMP, faça a inclusão de uma para teste.
Salve o arquivo com extensão .wml (por exemplo, exercicio4.wml) com opção "somente texto" e veja o resultado no simulador.
Procure deixar na tela do micro, em planos diferentes, o processador de textos e o simulador.
Maximize também a janela "Phone Information" e veja como fica fácil testar e fazer correções em seus programas.

helyoWAP
TUTORIAL WML (03) Programas comentados: phone3.wml - phone4.wml

helyoWAP