Tvoríme WAP/WML stránky – II. časť

Diakritika

Diakritické znaky ako ich poznáme v HTML dokumentoch sa žiaľ na WML stránkach nedajú použiť. Väčšina mobilných telefónov by ich jednoducho nezobrazila. Napríklad ľšč by zobrazilo ako otázniky. Preto je nutné do WML kódu namiesto diakritických znakov vkladať XML entity, ktoré nahrádzajú pôvodné znaky. Slovné spojenie najsladšia čučoriedka by sme teda zadali ako najsladšia čučoriedka.

Tabuľka XML entít:

á	á	Á	Á
č	č	Č	Č
ď	ď	Ď	Ď
é	é	É	É
í	í	Í	Í
ľ	ľ	Ľ	Ľ
ň	ň	Ň	Ň
ó	ó	Ó	Ó
ô	ô	Ô	Ô
š	š	Š	Š
ť	ť	Ť	Ť
ú	ú	Ú	Ú
ý	ý	Ý	Ý
ž	ž	Ž	Ž

Následne je ešte vhodné do XML deklarácie doplniť atribút encoding:
<?xml version="1.0" encoding="ISO-8859-2"?>

Ukážka použitia:
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="uvod" title="Inet.sk">
 <p>
  <small>Najlep&#x0161;&#xED; slovensk&#xFD; internetov&#xFD; denn&#xED;k</small>
 </p>
</card>
</wml>
Nahrádzanie diakritických znakov XML entitami vo väčších textoch by bolo dosť prácne, pripravil som vám teda pre uľahčenie práce aplikáciu XML Converter, kde jednoducho vložíte text, stačíte tlačítko Konvertovať a všetky diakritické znamienka vám nahradí XML entitami.


Formuláre

Používanie formulárov vo WML je podobné ako v HTML, ale samozrejme nemôžme zabudnúť že sa pohybujeme v prostredí XML, musíme teda element input ukončiť lomítkom: <input.... />.

Pre element input môžeme použiť nasledujúce atribúty:

type – typ vstupu, môže byť text alebo password
name – názov vstupu, určuje názov premennej
title - názov vstupu, ktorý sa zobrazí užívateľovi
value – počiatočná hodnota inputu, t.j. text ktorý sa zobrazí v políčku
format – formát textového poľa, môže byť nasledujúci:
a - len malé písmena
A - len veľké písmena
N- číslice
emptyok – hodnota môže byť true alebo false. Ak je zadaná hodnota true, musí užívateľ dané formulárové pole vyplniť.
size - veľkosť vstupného pola podobne ako v HTML
maxlenght - maximálna dĺžka textu vo vstupnom poli


Ukážka použitia elementu input:
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="input" title="Formular">
 <p>
  <input type="text" name="meno" title="Meno" maxlength="50"/>
  <br/>
  <input type="password" name="heslo" title="Heslo"/>
 </p>
</card>
</wml>
Vo WML sa žiaľ atribút type nedá nastaviť na Submit a taktiež tam neexistuje element <form>. Údaje zo všetkých vstupných polí sa totižto uchovávajú v premenných. Hodnotu textového pola môžeme vložiť kdekoľvek do dokumentu pomocou syntaxi $(meno_premennej).

Ako to presne funguje si ukážeme na nasledujúcom príklade. Vytvoríme si jednoduchý formulár na vytáčanie telefónneho čísla priamo z WAPovej stránky (na niektorých typoch mobilných telefónov nefunguje).

Zdrojový kód:
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="call" title="Telefonovanie">
 <p align="center">Zadaj telef&#xF3;nne &#x010D;&#xED;slo:
  <br/>
  <input name="cislo" format="*N"/>
  <br/><br/>
  <a href="wtai://wp/mc;$(cislo)">Volaj</a>
 </p>
</card>
</wml>
Zdrojový kód si následne uložíme ako telefonuj.wml. Hodnotu vstupného pola, môžeme samozrejme prenášať aj na druhú kartu:


Ukážka:
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Formular" id="uvod">
 <p>Zadajte Va&#x0161;e meno:<br/>
  <input type="text" name="meno" title="Meno" /><br/>
  <a href="#dvojka">Pokra&#x010D;ujte...</a>
 </p>
</card>

<card title="Vysledok" id="dvojka">
 <p>Va&#x0161;e meno je: <br/>
  <b>$(meno)</b>
 </p>
</card>
</wml>
Samozrejme hodnoty môžeme prenášať aj na druhú stránku. V tomto príklade si ukážeme ako si urobiť jednoduchú stránku, na ktorú sa ľudia dostanú až po zadaní hesla. Prvú stránku si pomenujeme napríklad ako prva.wml, názov druhej stránky si dáme podľa toho aké chceme mať heslo. V našom prípade je heslo inet, číže stránku pomenujeme ako inet.wml.


Ukážka (prva.wml):
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Formular" id="uvod">
 <p>Zadajte heslo: <br/>
  <input type="password" name="heslo" title="Heslo" /><br/>
  <a href="$(heslo).wml">Pokra&#x010D;ujte...</a>
 </p>
</card>
</wml>
Ukážka (inet.wml):
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Vysledok" id="druha">
 <p>Vitajte v na&#x0161;ej TOP Secret z&#xF3;ne.</p>
</card>
</wml>
Použitie tejto techniky pri väčších formulároch by bolo dosť neprehľadné, preto je lepšie použiť element <go>, ktorý slúži podobne ako v HTML element <form>.


Ukážka (jednotka.wml):
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Formular" id="uvod">
 <p>Zadajte Va&#x0161;e meno:<br/>
  <input type="text" name="meno" title="Meno" />
  <br/>Zadajte Va&#x0161;e priezvisko:<br/>
  <input type="text" name="priezvisko" title="Priezvisko" /><br/>
  <anchor>Pokra&#x010D;ujte
   <go href="dvojka.wml" method="get">
    <postfield name="meno" value="$(meno)"/>
    <postfield name="priezvisko" value="$(priezvisko)"/>
   </go>
  </anchor>
 </p>
</card>
</wml>
Ukážka (dvojka.wml):
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Formular" id="uvod">
 <p>Va&#x0161;e meno je: <br/>
  <b>$(meno)</b><br/>
  <br/>Va&#x0161;e priezvisko je:<br/>
  <b>$(priezvisko)</b>
 </p>
</card>
</wml>
Na koniec si ukážeme použitie elementu select (takzvané roletkové menu). V tomto prípade ho použijeme na vytvorenie jednoduchého navigačného menu na našej WML stránke. Všimnite si, že prvý element option som nechal bez atribútu onpick, čiže pri jeho zvolení sa nič nevykoná. Je to z toho dôvodu, že pri niektorých typoch mobilných telefónov je prvá položka z roletkového menu vždy predvolená a na akýkoľvek pokus o jej zvolenie nereagujú.


Ukážka (menu.wml):
<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card title="Zoznam stranok" id="zoznam">
 <p>
  <select name="zoznam" title="Zoznam">
   <option>Zoznam str&#xE1;nok</option>
   <option onpick="http://wap.fun-online.sk">FUN-Online.sk</option>
   <option onpick="http://wap.profesia.sk">Profesia.sk</option>
   <option onpick="http://wap.kayle.sk">Kayle</option>
   <option onpick="predchadzajuca.wml"> N&#xE1;vrat</option>
  </select>
 </p>
</card>
</wml>

Nabudúce

V ďalšej časti seriálu sa pozrieme na generovanie WML stránok pomocou skriptovacieho jazyka PHP.

Jaroslav Pitoňák