WML São as siglas de Wireless Markup Language e é a linguagem utilizada para criar páginas para qualquer elemento que utilize a tecnologia WAP, como alguns telefones celulares.

WAP são as siglas de Wireless Application Protocol.

Este tutorial de wml consta de umas lições que ajudam passo a passo a construir uma simples e completa página para telefones e outros dispositivos wap ademais de uma segunda parte na qual se encontram os tags mais habituais na linguagem WAP.

Para compreender esta linguagem devemos estar bastante familiarizado com o html, já que o wml é muito similar.

PRIMEIROS PASSOS

As páginas wml swml são editadas com um editor normal de texto (tipo notepad de Windows). O mesmo que utilizávamos para os html servirá. Quando terminamos a página grava-se com a extensão .wml (ex.: arquivo.wml).

Para publicá-la em Internet, praticamente qualquer servidor de espaço servirá. Somente temos que configurá-la no servidor (ou pedir ao administrador do sistema que o faça) os MIME types:

Porém se usamos apenas os .wml e .wbmp somente teremos que configurar o servidor para os mesmos.

E se queremos que o index.wml seja o index preestabelecido (para ter acesso direto a: http://www.wmlclub.com/wap/ e não ter que escrever:

http://www.wmlclub.com/wap/index.wml) teremos que configurar o index.wml como página preestabelecida (cada servidor se configura de uma forma distinta).

O primeiro que devemos incluir é o seguinte encabeçado, que define a versão da linguagem WML a ser utilizada:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">

A página encontra-se dentro do tag que indica que é wml: <wml> y </wml>

As páginas wml chamam-se "baralhos" e constam de uma ou mais "cartas".

Aqui temos um "baralho" de uma só "carta" ou o que é o mesmo, uma página wml simples:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="cartaum">
<p>Minha primeira página wml</p>
</card>
</wml>

E aqui um baralho de duas cartas:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="cartaum"> <br><p>Minha primeira página wml
<br/>
Esta é a carta um</p>
</card>
<card id="cartadois" title="Wapclub: Carta dois">
<p>Esta é a carta dois</p>
</card>
</wml>

A carta dois agora tem um título. O título aparecerá na linha de título do dispositivo wap.

Ao carregar a página vê-se sempre a primeira carta. Para ir da primeira carta à segunda, temos que pôr um link ou um botão:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="cartaum"> <br><p>Minha primeira página wml
<br/>
Esta á a carta um.
<br/>
<a href="#cartadois">Link à cartadois</a></p>
</card>
<card id="cartadois"> <br><p>Esta é a carta dois
<br/>
<a href="#cartaum">Link à cartaum</a></p>
</card>
</wml>

O salto de linha em wml è <br/> e não<br>, como no html.

Se o que queremos é fazer um link a uma página externa, devemos colocar o url completo:

<ahref="http://www.wapclub.com/">Ir a wapclub</a>

Igual que em html, os comentários escrevem-se assim:

<!-- Isto é um comentário -->

Notas importantes

1) TODOS os textos deverão ir incluídos dentro do tag "p", assim:
<card id="um">
<p> Texto da carta um
<br/>
Mais texto
<br/>
</p>
</card>

2) Deve-se evitar o uso do tag "b" uma vez que pode dar erros em alguns dispositivos que não o admitem. Para usar um tamanho de letra maior recomendamos utilizar <strong> </strong> porém sempre com muita moderação.

3) Em alguns dispositivos o tag deve ser colocado diante de cada linha, nunca ao final ou no meio, sendo portanto melhor fazer sempre assim, para evitar problemas.

4) Recomendo o uso do atributo "title" sempre, porém devemos considerar que se colocamos mais letras das que um dispositivo pode suportar não sabemos como ficará ao final, pode desde "romper" a linha até se sobrepor ao texto que colocamos em cada "carta".

OS TAGS DE TEXTO

Os tags de texto são iguais aos do html:

<b> Negrita </b>
<i> Cursiva </i>
<em> Ênfase </em>
<strong> Com muita ênfase </strong>
<u> Sublinhado </u>
<big> Letra grande </big>
<small> Letra pequena </small>

Não é nada recomendável utilizar os tags "b", "i" e "u" mais que o imprescindível.

Ademais muitos dispositivos móveis não distinguem bem entre "strong" "b" ou "big".
Tendo em consideração que habitualmente as telas são pequenas, seria melhor não utilizar a ênfase.

CARACTERES ESPECIAIS

Existem certos caracteres que não podem ser escritos tal qual porque o WML reserva-os para seu próprio código.

Aqui encontramos uma lista desses caracteres:

Deve-se utilizar &amp; em vez de & na linha de argumentos dos programas perl.
Por exemplo: programa.pl?nome=$(var1)&amp;senha=$(var2)

Outros caracteres:

Numeros:

Simbolos:

Outros:

ACENTOS E CEDILHA

Em wml temos que substituir os acentos agudo, grave, circunflexo, til e cedilha por estes caracteres:

VARIÁVEIS

Uma das grandes diferenças entre o wml e o html é que com o wml pode-se definir variáveis nas cartas, designar-lhes valores e apresentá-los na tela, inclusive utilizar as variáveis em expressões (programa.pl?f=$(mivar), etc.)
A maior vantagem de tudo isso é que pode-se conservar a informação ao passar de uma carta a outra e assim poder dividir o conteúdo em vários passos (que em telas tão pequenas, dá uma idéia de mais espaço).

As variáveis são cadeias de texto (case sensitive-que distingue maiúsculas e minúsculas, como sempre no wml) à quais se lhe designa um valor (sequência de caracteres) ou nenhum valor.
O nome da variável pode começar pelo traço baixo ou undercore: "_" ou uma letra US-ASCII, seguida de uma ou mais letras US-ASCII, números ou o traço baixo.
Exemplos de nomes de variáveis válidas: NOME_Usuario _mivar1 X700II

CRIAR VARIÁVEIS E DESIGNAR VALORES

Há Várias formas possíveis:

Com setvar
<setvar name="mivar1" value="Joao"/>
João é o valor da variável mivar1. Com setvar criamos a variável e ao mesmo tempo também lhe designamos um valor.

Com input
Com input pode-se criar (declarar) a variável, designá-la um valor e também devolvê-la o valor original.
Input utiliza-se para a entrada de dados e esses dados (valores) serão designados a uma variável.

Com select
Com select pode-se criar (declarar) a variável, designá-la um valor e também devolvê-la o valor original.
Select permite selecionar ao usuário um ou mais valores entre uma lista de opções que serão designados a uma variável.

Com postfield
Com postfield pode-se criar (declarar) a variável, designá-la um valor e também devolvê-la o valor original.

REFERENCIAR VARIÁVEIS

Podemos incluir o valor de uma variável dentro de um documento wml, tanto para que apareça na tela como para que se envie a um programa.

Há três formas de referenciar a variável:

$nomevariável
utiliza-se quando não há ambigüidade com o nome da variável dentro do contexto.
$(nomevariável)

Quando pode existir ambigüidade com o nome da variável dentro do contexto.
$(nomevariável:conversão) Explica-se mais abaixo.

Como o wml se reserva o uso do símbolo de dólar, para que queiramos que apareça na tela este símbolo, deve-se escrever duas vezes ($$). Por exemplo temos esta variável: $moeda e queremos apresentar seu valor na tela, assim: $15, escreveremos:
Saldo atual: $$$moeda

CONVERSÃO AO FORMATO ESCAPE $(nomevariável:conversão)

No seu momento se estabeleceu uma substituição de alguns caracteres próprios dos URLs para que o servidor não os confundira (regras do formato escape (RFC2396).
Estas regras facilitam-nos um mecanismo para poder incluir numa linha URL, esses caracteres. Ainda que estas regras foram criadas para referenciar URLs, podem-se aplicar as mesmas regras para referenciar variáveis.

Exemplo (este exemplo, que converte o texto em formato escape é muito útil, podemos descarregá-lo desde demos).
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="carta1" title="WMLCLUB">
<p>Bem-vindo
<br/>
Tecleie um texto com caracteres especiais:
<br/></p>
<p><input type="text" name="texto"/></p>
<do type="accept">
<go href="#carta2"/>
</do>
</card>
<card id="carta2" title="WMLCLUB">
<p>
Este é o texto introduzido, em formato escape:
<br/>
$(texto:e)
<br/>
Este é o texto introduzido, normal:
<br/>
$(texto)
</p>
</card>
</wml>

Quando se introduz o valor de uma variável dentro de um baralho, pode-se definir o formato (escape, unescape ou no escape) assim:

$(var:e) $(var:E) $(var:escape) (qualquer um dos três traduz ao formato escape)
$(var:u) $(var:U) $(var:unesc) (qualquer um dos três traduz do formato escape a texto US-ASCII)
$(var:n) $(var:N) $(var:noesc) (qualquer um dos três faz com que o valor da variável não se traduza ao formato escape)

O WML sempre aplica o formato escape quando se trata de atributos que trabalham com URLs. Por isso muitas vezes pode-se assumir que o WML converterá ao formato escape quando o tenha que fazer. De qualquer maneira, convém incluí-lo se temos a menor dúvida sobre o que ocorrerá.

Aqui encontramos uma lista dos caracteres de escape (todos começam por %)

; %3b
/ %2f
? %3f
: %3a
@ %40
& %26
= %3d
+ %2b
$ %24
, %2c
espaço %20
{ %7b
} %7d
| %7c
\ %55c
^ %5e
[ %5b
] %5d
` %27
< %3c
> %3e
# %23

AS VARIÁVEIS E AS TAREFAS <NOOP>, <PREV>, <REFRESH> e <GO>

noop/>
Não faz nada. Utiliza-se para desativar eventos no nível do baralho.

prev/>
Prev volta ao anterior URL.
Se dentro de prev há um elemento setvar, como no exemplo, será processado antes de que se execute o prev.
<prev>
<setvar name="mivar" value="conteudo"/>
</prev>

refresh/>
Refresh refresca os conteúdos visíveis do navegador.

Se refresh contém um setvar, como no exemplo, processa-se o setvar e depois se procede ao refresh.

<refresh>
<setvar name="mivar" value="conteudo"/>
</refresh>

<go>
Go leva a outra URL ou outra carta. Se dentro de go há um elemento setvar, se processa primeiro este e depois se executa a tarefa "go".

<go href="http://www.wmlclub.com/cgi-bin/programa.pl?x=$(mivar1)&y=$(mivar2)" method="post">
<setvar name="mivar1" value="50"/>
<setvar name="mivar2" value="80"/>
</go>

IMAGENS EM MOVIMENTO

Para criar imagens em movimento utilizamos o contador de tempo "timer".
O formato das imagens wml é wbmp.
Veja na seção Programas um conversor de bmp a wbmp.

Exemplo de código para imagens em movimento:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM\" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="img1" ontimer="#img2">
<timer value="10"/>
<p>
<img src="movel1.wbmp" alt="Movel1"/>
</p>
</card>
<card id="img2" ontimer="#img3">
<timer value="10"/>
<p>
<img src="movel2.wbmp" alt="Movel2"/>
</p>
</card>
<card id="img3" ontimer="#img4">
<timer value="10"/>
<p>
<img src="movel3.wbmp" alt="Movel3"/>
</p>
</card>
<card id="img4" ontimer="#end">
<timer value="10"/>
<p>
<img src="movel4.wbmp" alt="Movel4"/>
</p>
</card>
<card id="fim" title="FIM">
<p> Fim
<br/>
<anchor>Outra vez!
<go href="#img1">
</go>
</anchor>
</p>
</card>
</wml>

CRIAÇÃO DE TABELAS

Ainda que o tag de <table> esteja guardado nas especificações do WML 1.1, existem alguns móveis que não o implementam, como é o caso do Nokia 7110, no lugar os dados são mostrados numa tabela de uma coluna.

Exemplo de código para criação de tabelas:< /p>

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EM"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="Tabela" title="Tabela 1">
<p><table columns="3">
<tr><td><p>Elemento 1</p></td>
<td><p>Elemento 2</p></td>
<td><p>Elemento 3</p></td></tr>
</table></p>
</card>
</wml>

Fonte:http://br.wmlclub.com

Voltar