Soluţii - PC Magazine Romania, Iunie 2002
WML: limbajul pentru echipamente mobile
Iulian Radu
În acest articol vom face o scurtă prezentare a WML (Wireless Markup Language),
folosind ca bază specificaţiile Wireless Application Protocol Wireless Markup
Language versiunea 1.1. WML este un limbaj markup bazat pe XML (Extensible Markup
Language) şi a fost dezvoltat pentru furnizarea de conţinut şi interfaţă echipamentelor
cu bandă îngustă de transfer, cum ar fi telefoanele mobile şi pager-ele. A fost
proiectat ca să lucreze cu echipamente mobile mici care au patru caracteristici:
ecrane de afişare mici cu rezoluţie scăzută;
dispun de puţine facilităţi sau sunt proiectate pentru un anumit scop;
resursele de calcul sunt reduse la un procesor slab, memorie puţină şi limitări
ale puterii consumate;
reţeaua dispune de bandă îngustă şi întârzieri mari.
Caracteristicile WML pot fi grupate în patru categorii:
oferă suport pentru text şi imagine dispunând de o mulţime de comenzi de prelucrare
şi amplasare;
cărţile WML sunt grupate în pachete. Un pachet WML este echivalentul unei
pagini HTML, în sensul că este identificat de un URL (Uniform Resource Locators)
şi reprezintă unitatea de transfer a conţinutului;
WML oferă suport pentru administrarea navigării între cărţi şi pachete şi
conţine comenzi pentru gestionarea evenimentelor. Acestea pot fi folosite pentru
navigare sau rularea de scripturi;
pentru toate pachetele WML se pot trimite parametri. Se pot folosi variabile
în loc de şiruri, acestea fiind înlocuite cu valoarea lor în momentul execuţiei.
Tipurile MIME (Multipurpose Internet Mail Extensions) asociate pachetelor WML
sunt:
text/vnd.wap.wml (în format text)
application/vnd.wap.wmlc (în format de token-uri).
Exemplu
Pentru exemplificare definim un pachet (deck) ce conţine cinci cărţi (cards)
WML. Echipamentele mobile dispun de un buton care are semnificaţia de acceptare
a comenzilor (ACCEPT) şi altul care are semnificaţia de înapoi (BACK). Unui
astfel de buton i se pot ataşa mai multe acţiuni, caz în care, dacă este apăsat,
se prezintă o listă cu denumirea acţiunilor asociate lui, din care se poate
alege acţiunea dorită. De asemenea, dispozitivele mobile dispun de o stivă în
care se memorează URL-urile vizitate. Aceasta este folosită pentru navigarea
înapoi când se foloseşte butonul BACK.
Documentele în format WML, fiind bazate pe XML, trebuie să fie bine formatate,
ca de altfel orice document XML. A fi bine formatat înseamnă că fiecare tag
deschis trebuie să fie şi închis (<tag ...> ... </tag>), iar în
cazul în care nu conţine elemente copii este scris în forma autoînchis (<tag
.../>), iar valoarea unui atribut trebuie să fie conţinută între ghilimele.
Atenţie, contează dacă se folosesc litere mari sau mici.
Vom analiza în continuare, programul din casetă. (vezi pagina 52).
Liniile 1 şi 2 arată că este vorba despre un document în format WML. Deoarece
WML se bazează pe formatul XML, pe prima linie se observă tag-ul <?xml ...?>.
În linia 3 avem un comentariu (tagurile "<!-" şi ">>"). Începem definirea
pachetului WML în linia 4 şi îl închidem în linia 94. La linia 5 începem definirea
unui model de card. Conţinutul acestuia este folosit ca punct de plecare în
definirea tuturor viitoarelor carduri. În cadrul unui astfel de tip de card
se pot utiliza ca elemente direct subordonate tag-ului "<template>" doar
tag-urile "<do type="..." ...>" şi "<onevent type="...">". El specifică
faptul că atunci când se va apăsa butonul BACK vom fi trimişi în mod automat
la pagina vizitată precedent (tag-ul "<prev/>") şi afişarea pe ecran a
textului "Inapoi" (atributul "label") în locul rezervat pentru acest buton.
La linia 10 începem definirea primului card care va fi afişat pe ecranul echipamentului
mobil. Îi atribuim numele "card1" şi anunţăm prin atribuirea valorii "true"
atributului "newcontext" că dorim să ştergem orice informaţie legată de istoria
navigărilor şi să aducem echipamentul la o stare definită în mod implicit. Asociem
butonului ACCEPT eticheta "Urmatorul" şi indicăm că trebuie afişat cardul denumit
"card2" în cazul în care se apasă acest buton. Semnul diez aflat în faţa numelui
cardului indică faptul că avem de a face cu un fragment de ancoră, adică un
card aflat în deck-ul curent. În liniile 14..16 anulăm acţiunea atribuită implicit
butonului BACK folosind tag-ul "<noop/>". Astfel, pentru acest card nu
avem asociată nici o acţiune a butonului BACK. Liniile 17..19 d efinesc un paragraf
ce conţine un text ce are scris cuvântul "Urmatorul" mai gros. În cadrul unui
tag "<card>" se pot folosi mai multe tag-uri "<p>" ca elemente subordonate
direct lui. Pe lângă tag-ul "<em>" mai dispunem şi de următoarele taguri
pentru prelucrarea textului: "<strong>", "<b>", "<i>", "<u>",
"<big>" şi "<small>". În linia 21 apare atributul "onenterforward"
care indică faptul că dacă în acest card se ajunge în urma unei acţiuni a tag-ului
"<go href="..." ...>" sau a unei acţiuni similare, să se apeleze cardul
denumit "card3" în loc să se afişeze conţinutul lui. În linia 23, $(animal)
va fi substituit la afişare cu valoarea variabilei denumită "animal". În linia
26 apare atributul "onenterbackward" care arată că dacă în acest card se ajunge
în urma unei acţiuni a tag-ului "<prev/>" sau a unei acţiuni similare,
să se apeleze cardul denumit "card2" în loc să se afişeze conţinutul lui. Trebuie
remarcat că dacă din cardul denumit "card4" ne întoarcem folosind butonul BACK
în cardul "card3", acesta automat va solicita apelarea cardului "card2". Dar
apelarea lui "card2" din "card3" prin intermediul lui "onenterbackword" este
o acţiune echivalentă cu apelarea prin intermediul unui tag "<go ...>",
astfel încât "card2" va apela la rândul său "card3". Deşi la prima vedere pare
că întoarcerea în "card3" din "card4" ne va afişa conţinutul cardului denumit
"card2", vom constata că ne este afişat totuşi conţinutul lui "card3". În linia
31 anunţăm că vom defini un grup de câmpuri reunite sub numele de "Animale".
În linia 33 definim o variabilă denumită "animal" şi o variabilă denumită "index"
cu valoarea "2". În variabila "index" se va memora în mod automat indexul opţiunii
alese (prima valoarea are indexul 1). În cazul nostru avem în mod implicit selectat
animalul "Caine". Pentru această variabilă ne vor fi afişate două variante:
"de casă" şi "animal", prima cu subvariantele: "Pisica", "Caine" şi "Hamster",
iar a doua cu subvariantele: "Lup" şi "Urs". Când este ales unul dintre aceste
animale, se apelează în mod automat cardul "card4" căruia i se transmit şi variabile
"animal" cu una din valorile "cat", "dog", "rat", "wolf" sau "bear", precum
şi variabila "index" cu indexul valorii selectate. Cardul "card4" are asociat
butonului ACCEPT funcţia de reafişare a conţinutului (tag-ul "<refresh/>")
pentru eticheta "Accept" şi apelarea cardului "card5" împreună cu variabilele
"site", "passwd" şi "animal" pentru eticheta "Apel". Pentru a ataşa variabile
unui URL trebuie să se folosească tag-ul "<postfield nume="..." value="...">".
În linia 58 definim un paragraf în care textul este aliniat pe mijlocul paginii
(atributul "align" cu valorea "center"; se mai pot folosi valorile "left" şi
"right"), iar cuvintele de pe o linie nu sunt trunchiate, ci afişate pe rândul
următor (atributul "mode" cu valoarea "wrap"; se poate folosi şi valoarea opusă
"nowrap"). La linia 59 definim un tabel a cărui coloane, în număr de două, au
conţinutul alineat în stânga. Este obligatorie definirea atributului "columns"
când se declară tabele. Cu ajutorul tag-urilor "<tr>" se definesc rândurile,
iar cu ajutorul tag-urilor "<td>" se definesc celulele care aparţin unui
rând. În linia 62 definim o imagine care afişează imaginea corespunzătoare animalului
(atributul "src" cu valoarea "$(animal).wbmp") şi care are ca text alternativ
denumirea în engleză a animalului (atributul "alt" cu valoarea variabilei "animal").
În linia 66 se va face automat înlocuirea lui $(site) cu valoarea variabilei
"site". În liniile 69 şi 71 definim două casete de introducere de text (tag-ul
"<input name="..." ...>"). Prima afişează exact ce caractere introducem
noi, în timp ce a doua afişează pentru fiecare caracter introdus o steluţă.
Atributul "name" face ca unei variabile cu acel nume să i se atribuie şirul
introdus. În atributul "value" putem specifica valoarea implicită pe care dorim
să o aibă această variabilă şi care va fi afişată şi în cutia de editare. Atributul
"emptyok" specifică dacă trebuie acceptată o valoare vidă pentru această variabilă.
Atributul "size" indică dimensiunea de afişare a cutiei de editare, iar "maxlength"
dimensiunea maximă a şirului. Se poate specifica pentru fiecare câmp de editare
ce formă trebuie să aibă şirul introdus. În linia 70 apare tag-ul "<br/>"
care arată că se doreşte trecerea la rândul următor. În linia 74 avem definit
un card care, după trecerea unei anumite perioade de timp, specificată prin
intermediul tagului "<timer value="..." ...>" în linia 75, apelează automat
cardul "card4". Dacă ar fi existat o variabilă denumită "t" atunci s-ar fi folosit
valoarea ei în locul valorii "50" pentru iniţializarea timer-ului. În liniile
85..87 se dă varianta lungă a tagului "<a href="..." ...>". De remarcat
că tag-ul "<a>" nu permite apelarea unui URL împreună cu un set de variabile,
ci doar tag-ul "<anchor>". Se observă apariţia în liniile 82..92 a d ouă
tag-uri "<p>" ca elemente ce depind direct de tag-ul "<card>".
Concluzii
După cum se poate observa, structura unui pachet WML este foarte simplă. Important
de remarcat este faptul că în cazul unui pachet real, trebuie avută multă grijă
la dimensiunea pachetului trimis echipamentului mobil. Dacă buffer-ul acestuia
este prea mic pentru a memora pachetul WML, se va semnala eroare, deşi pachetul
este scris corect. Deoarece fiecare echipament mobil are propriile lui caracteristici,
se recomandă verificarea paginilor WML pe care le creaţi pe o gamă cât mai mare
de echipamente, iar în cazul în care nu este posibil acest lucru, să se verifice
pentru echipamentele cărora le sunt destinate. Nu vă bazaţi prea mult pe faptul
că un pachet WML care funcţionează bine pe simulatorul unui echipament mobil
se va comporta identic şi pe echipamentul real.
Mai multe informaţii pot fi găsite pe siturile: www.apforum.org/,
www.w3.org/TR/REC-xml/
SURSA
1. <?xml version="1.0"?>
2. <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
3. <! Acesta este un comentariu >->
4. <wml>
5. <template>
6. <do type="prev" label="Inapoi">
7. <prev/>
8. </do>
9. </template>
10. <card id="card1" newcontext="true">
11. <do type="accept" label="Urmatorul">
12. <go href="#card2"/>
13. </do>
14. <do type="prev">
15. <noop/>
16. </do>
17. <p>
18. Apasati <em>Urmatorul</em> pentru a afisa urmatorul card WML
!
19. </p>
20. </card>
21. <card id="card2" title="Cardul al doilea" onenterforward="#card3">
22. <p>
23. Deja ati ales $(animal).
24. </p>
25. </card>
26. <card id="card3" title="Cardul al treilea" onenterbackward="#card2">
27. <do type="accept" label="wap.org">
28. <go href="http:// www.wap.org/ index.wml"/>
29. </do>
30. <p>
31. <fieldset title="Animale">
32. Alegeti un animal:
33. <select name="animal" iname="index" ivalue="2">
34. <optgroup title="de casa">
35. <option value="cat" onpick="#card4">Pisica</option>
36. <option value="dog" onpick="#card4">Caine</option>
37. <option value="rat" onpick="#card4">Hamster</option>
38. </optgroup>
39. <optgroup title="salbatic">
40. <option value="wolf" onpick="#card4">Lup</option>
41. <option value="bear" onpick="#card4">Urs</option>
42. </optgroup>
43. </select>
44. </fieldset>
45. </p>
46. </card>
47. <card id="card4" title="Cardul al patrulea">
48. <do type="accept" label="Accept">
49. <refresh/>
50. </do>
51. <do type="accept" label="Apel">
52. <go href="#card5">
53. <postfield name="site" value="$(site)"/>
54. <postfield name="passwd" value="$(passwd)"/>
55. <postfield name="animal" value="$(animal)"/>
56. </go>
57. </do>
58. <p mode="wrap" align="center">
59. <table columns="2" align="left">
60. <tr>
61. <td>Imagine animal</td>
62. <td><img alt="$(animal)" src="$(animal).wbmp"/></td>
63. </tr>
64. <tr>
65. <td>Apelez</td>
66. <td>$(site)</td>
67. </tr>
68. </table>
69. Sit: <input title="Sit" name="site" type="text" value="" emptyok="false"
size="12" maxlength="128"/>
70. <br/>
71. Parola: <input title="Parola" name="passwd" type="password" value=""
emptyok="true" format="*M"/>
72. </p>
73. </card>
74. <card id="card5" title="Cardul al cincilea" ontimer="#card4">
75. <timer name="t" value="50"/>
76. <do type="accept" label="Apel">
77. <go href="http://$(site)/ index.wml" sendreferer="true">
78. <postfield name="animal" value="$(animal)"/>
79. <postfield name="from" value="Romania"/>
80. </go>
81. </do>
82. <p>
83. Aveti 5 secunde la dispozitie sa apasati butonul ACCEPT pentru a accesa
sit-ul <a href="http://$(site)/index.wml">$(site)</a>
84. <!-
85. <anchor title="Sit">$(site)
86. <go href="http://$(site)/ index.wml"/>
87. </anchor>
88. >>
89. </p>
90. <p>
91. Daca nu, va intoarceti inapoi la 'Cardul al patrulea'.
92. </p>
93. </card>
94. </wml>
|
