HELYOWAP Tutorial WML (07)

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

Introdução
Este tutorial apresentará, mais adiante, um modelo de guia de cinema utilizando o conceito de páginas dinâmicas programadas em ambiente ASP; as chamadas páginas dinâmicas são escritas nesta mesma linguagem WML mas montadas no servidor no momento da consulta, com informações colhidas em bancos de dados.
O projeto teve início aqui, com a produção de telas estáticas, em que todos os dados constam do próprio programa WML, como veremos a seguir.

Programa phone9.wml

Objetivo: Criar um protótipo de Guia de Filmes e Cinemas.Uma página inicial direciona o usuário para duas páginas secundárias, uma com a lista de filmes e outra com a relação dos cinemas.
Cada nome de filme e de cinema é um hyperlink para outras páginas contendo mais detalhes.

Com objetivo puramente didático, e como recordação dos assuntos vistos até este ponto, vamos utilizar métodos diferentes de desvios nas três páginas citadas acima.

[Página inicial (programa phone9.wml): desvios efetuados com o elemento <a>]

[Página secundária 1 (programa phone10.wml): desvios efetuados com o elemento "anchor"]

[Página secundária 2 (programa phone11.wml): desvios efetuados com o elemento "select"]

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


*** helyoWAP *** 
*** GUIA CINE *** 

<a href="phone10.wml" title="Filmes">FILMES</a> 
<a href="phone11.wml" title="Cinemas">CINEMAS</a> 


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

Comentários:
As telas acima são geradas por um conjunto de três programas ou DECKs (respectivamente, phone9.wml, phone10.wml e phone11.wml).

Eis a estrutura do comando <a> </a> no programa Phone9.wml:

<a href="phone10.wml" title="Filmes">FILMES</a> onde:

Filmes é o label da tecla "Accept";
FILMES é a palavra "ativa" ou "hyperlink" e aparece na tela entre parênteses;
"phone10.wml" é o endereço (nome do programa ) que produz a tela desejada.
Deste modo, não foi necessário programar a tecla "ACCEPT" com a dupla "do" e "go".

<?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="options" label="Guia">
<go href="phone9.wml"/>
</do>

*** helyoWAP *** 
*****FILMES****



<anchor title="Filme1"><go href="#filme1"/>1. X-Men</anchor> 
<anchor title="Filme2"><go href="#filme2"/>2. Feitico do coracao</anchor> 
<anchor title="Filme3"><go href="#filme3"/>3. 60 segundos</anchor> 


</card>

<card id="filme1">
 <do type="accept" label="Guia">
 <go href="phone9.wml"/>
 </do>
 
 ** helyoWAP ** 
 
 X-Men 
 Hugh Jachman 
 Cinemark 3 
 15h 18h30
 
 </card>

<card id="filme2">
 <do type="accept" label="Guia">
 <go href="phone9.wml"/>
 </do>
 
 ** helyoWAP ** 
 
 Feitico do Coracao 
 David Duchovny 
 Cinemark 1 
 22h30
 
 </card>

<card id="filme3">
 <do type="accept" label="Guia">
 <go href="phone9.wml"/>
 </do>
 
 ** helyoWAP ** 
 
 60 Segundos 
 Nicolas Cage 
 Cinemark 2 
 20h 22h
 
 </card>
</wml>

Comentários:
Do mesmo modo, este programa, gerador da segunda tela mostrada acima, não apresenta nenhuma novidade; Atenção para a programação das duas softkeys (teclas "ACCEPT" e "OPTIONS"):
1. o label da tecla "ACCEPT" é fornecido pelo atributo "title", dentro do elemento "anchor".
2. o label da tecla "OPTIONS" é fornecido pela dupla "do" e "go".

Ao ser feita a escolha, o elemento "anchor" proporciona o desvio para o card correspondente que contém os dados referentes ao filme.
Como o exemplo apresenta 3 filmes, são necessários 3 cards.
Lembrando: há maneiras mais eficiente de construir este guia, mas estamos apresentando este exemplo didático para dar mais opções de estudo e recordação ao leitor.
Eis a tela correspondente ao filme "60 Segundos":

<?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="Filme?">
<go href="#exibir_cinema"/>
</do>



** helyoWAP ** 
*** Cinemas ***


<select name="cine">
 <option value=" Cinemark 1 Feitico do coracao 15h 18h">Cinemark 1</option>
 <option value="Cinemark 2 60 Segundos 20h 22h">Cinemark 2</option>
 <option value="Cinemark 3 X-Men 15h 18h 21h">Cinemark 3</option>
 </select>

</card>

<card id="exibir_cinema">
 <do type="accept" label="Guia">
 <go href="phone9.wml"/>
 </do>
 
 ** helyoWAP ** 
 
 <big>Cinema/Filme</big> 
 $(cine)
 
 </card>
</wml>

Comentários:
Recordando o "funcionamento" do elemento "select":
Ao fazer uma opção, o conteúdo do "value" correspondente é armazenado na variável indicada pelo atributo "name".
Por exemplo, se for escolhida a segunda opção, a variável "cine" receberá o conteúdo:
"Cinemark 2 60 Segundos 20h 22h"
(Esta formatação contendo espaços é didática, para permitir a centralização do conteúdo na tela do simulador)
O segundo card exibirá então o conteúdo da variável "cine" indicado pela linha de código $(cine).
Eis a tela exibida neste caso:

Resumo dos "desvios":

Os desvios ou "saltos" por meio de hyperlinks podem ser proporcionados por trechos de programas como os abaixo:
1. Usando o elemento <a>:
<a href="phone10.wml" title="Filmes">FILMES</a> 
<a href="phone11.wml" title="Cinemas">CINEMAS</a>

Neste caso, "title=" contém o label da tecla "ACCEPT".

2. Usando o elemento <anchor>
 
 <anchor title="Filme1"><go href="#filme1"/>1. X-Men</anchor> 
 <anchor title="Filme2"><go href="#filme2"/>2. Feitico do coracao</anchor> 
 <anchor title="Filme3"><go href="#filme3"/>3. 60 segundos</anchor>

Neste caso, "title=" contém o label da tecla "ACCEPT".

3. Usando o elemento "select":
 
 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>

helyoWAP
TUTORIAL WML (07) Programas comentados: phone9.wml - phone10.wml - phone11.wml