helyoWAP

Autor: Helio Fonseca Rosa

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

Programa phone1.wml

Objetivo : Gerar a tela abaixo, variante do famoso "Hello World !" (Olá, Mundo !),  programa tradicional dos tutoriais de ensino de linguagens de programação.

phone1.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>
     <p>
        WML - Meu primeiro programa
    </p>
   </card>
</wml>

A listagem acima foi copiada/colada/gravada e testada com êxito no OWG1 (sigla de OpenWave Generic1) Simulator. Conforme indicado no campo de endereço do simulador, a listagem foi gravada no micro do autor no drive "c", pasta "wml", com o nome de "phone1.wml".

O arquivo contendo a listagem também está hospedado em http://helyr.sites.uol.com.br/phone1.wml  e a mini-página correspondente poderá ser visualizada por um simulador ou celular WAP. 
O formato da tela exibida por outro simulador ou por um celular dependerá das características técnicas dos mesmos.

Comentários 
As três primeiras linhas são obrigatórias em todos os programas WML e são conhecidas como "preâmbulo".
[ A linguagem WML é considerada um aplicativo da linguagem XML. A principal característica da linguagem XML é que o programador cria facilmente suas próprias tags que são definidas em um documento chamado DTD (Document Definition Type). 
O "criador" da  WML  definiu as tags desta linguagem num DTD que pode ser visto em http://www.wapforum.org/DTD/wml_1.1.xml,  endereço este que consta do "preâmbulo" obrigatório.  Mas não se preocupe com isto agora. ]

"Copie" o "preâmbulo" em algum arquivo e "cole" em seus programas sempre que precisar, para evitar erros de digitação.

Tudo que está entre a tags <wml> e </wml> é o conteúdo de um deck. Tudo que está entre as tags  <card> e </card>  (delimitadores de cards) é o conteúdo de um card. Todo e qualquer texto dentro de um card deve estar entre um ou mais <p> e </p> (delimitadores de parágrafos). 
Neste exemplo o card possui apenas um parágrafo de texto. Então este programa contém um parágrafo de texto dentro de um único card que está dentro de um deck.
Quando uma página escrita em WML (ou seja, um deck) é acessada por um celular, todos os cards constantes do deck são descarregados de uma só vez para a memória do telefone, sendo que é exibido (de um modo geral) o primeiro card.

A palavra "Back" no canto inferior é o label (rótulo) da tecla chamada  "ACCEPT" que está logo abaixo.
Neste caso, o rótulo foi colocado pelo próprio simulador. Mas este rótulo é programável assim como a ação executada pela  tecla "ACCEPT" . A sua vizinha do lado direito é a tecla "OPTIONS". Estas teclas são conhecidas como "softkeys" ou "selections keys" e nada mais são que  mecanismos programáveis de interface com o usuário.
De um modo geral, a tecla "ACCEPT" é programada para proporcionar a entrada em algum menu ou executar comandos. E a tecla "OPTIONS" para finalizar  ações, cancelar ou redefinir comandos  ou navegar "para traz" no registro histórico.

Importante: como regra geral e segura, deve-se utilizar no máximo cinco letras nos rótulos ou labels.
Muitos celulares truncam os labels acima destre limite.
(Em nossos exemplos, didáticos, eventualmente excederemos este limite)

Alguns celulares trocam as posições ( e nomes) destas teclas. Outros não permitem a implementação do mecanismo de software ("prev")  para a tecla  "OPTIONS" pois possuem  uma tecla "BACK" que realiza a  função de retorno para o registro anterior do histórico.

Exercício: 
Copie/cole o programa acima no seu editor de texto. 
Acrescente um ou mais parágrafos. 
Salve o arquivo com extensão .wml (por exemplo, exercicio1.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.

Programa phone2.wml  

Objetivo: Gerar as duas telas abaixo. Exibida a primeira tela, pressionar a  tecla "ACCEPT", cujo label é a palavra "dois" e mudar para a segunda tela.

 phone2.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="um">
         <do type="accept" label="dois">
            <go href="#dois"/>
        </do>
       <p align="center">
            **** helyoMOBILE ****<br/><br/>
           WIRELESS WEB <br/>
           Como funciona<br/>
           Como fazer<br/>
           ** (card 1) **
      </p>
   </card>
   <card id="dois">
     <p>
       **** helyoMOBILE ****<br/>
      Este deck, constituido de dois cards, foi escrito em
     WML - Wireless Markup Language.<br/>
     ****** (card 2) ******
    </p>
 </card>
</wml>

A listagem acima foi copiada/colada/gravada e testada com êxito no OWG1 Simulator. Está hospedada em http://sites.uol.com.br/helyomobile/wml/phone2.wml. O formato da tela exibida por outro simulador ou por um celular WAP dependerá das características técnicas dos mesmos.

Comentários:
Este programa contém apenas um deck e dois cards. Sempre que usamos mais de um card é uma boa prática identificá-los através do "id" que é também utilizado como âncora ou sinalizador para desvios. Assim,  temos o primeiro card identificado como <card id="um"> e o segundo identificado como <card id="dois">. O desvio para o card "dois" será efetuado pelo comando <go href="#dois"/>.
Repare neste trecho de código:
         <do type="accept" label="dois">
            <go href="#dois"/>
         </do>
Você pode ler este código assim: "faça ("do") a tecla "ACCEPT" receber o label (rótulo) "dois" e, quando acionada, desviar  ou  ir ("go") para o card "dois".
O texto  exibido na tela está centralizado; isto é proporcionado pela tag <p align="center"> (mais precisamente, elemento <p>, atributo align). Para alinhar à direita ou esquerda deve-se usar <p align="right"> ou <p align="left">.
Note que a quebra de linha "br barra" ou <br/>, é "diferente/parecida" com a HTML,  fonte de muitos erros para os principiantes.
No segundo card não utilizamos a "centralização" nem a quebra de linha, para mostrar  que isto  foi  feito automaticamente pelo simulador, que respeita os espaços em branco, ou seja, não quebra uma palavra "no meio".

O retorno ao primeiro card não está programado no código; pode ser obtido pela tecla "back" do simulador. O retorno programável é feito com o elemento <prev>, que será estudado mais adiante.

As telas dos simuladores e celulares reais possuem tamanhos diferentes. É evidente que uma aplicação para ser vista com segurança por TODOS os celulares deve ser planejada para o menor deles. 
Não há um tamanho ideal para um card. Se o conteúdo do mesmo for maior que o espaço disponível na tela, o usuário terá que efetuar um rolamento da mesma.
Num projeto mais cuidadoso pode-se distribuir  o texto a ser exibido por diversos cards,  de tal modo que cada trecho  seja exibido integralmente e a mudança de tela não seja por rolamento e sim por desvio, o que poderá eventualmente ser mais confortável para o usuário. O desvio para cards dentro de um mesmo deck é instantâneo pois estes cards estão armazenados na memória do celular.
O elemento <card> possui um atributo "title" que cada simulador ou celular poderá exibir (ou não exibir) de modo diferente .
Eis um exemplo de sua sintaxe < card id="tres" title="Terceiro">.

Exercício: 
Copie/cole o programa acima no seu editor de texto.
Acrescente mais um card ao programa .
Além da identificação, coloque um título em cada card. 
Coloque vários parágrafos e teste os alinhamentos à esquerda e à direita. 
No terceiro card, coloque um desvio para o primeiro card. 
Salve o arquivo com extensão .wml (por exemplo, exercicio2.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.