WAP-ra fel II.

A korábbi cikkemben megkezdtem a WAP bemutatását, egy-két használható szerkesztőfelületet és a megtekintéshez szükséges eszközök bemutatásával, no meg az alapokat ismertettem. Az ott megígértek szerint folytatása következik. Íme:

Hivatkozások

A WAP nyelv a HTML nyelv leegyszerűsített változata és megtalálható benne az a lehetőség, hogy más oldalakra hivatkozzunk. A WML-ben ugyanúgy néz ki egy hivatkozás mint a HTML nyelvben. A szöveget ami „aktiválja” a hivatkozást, az a tagba zárjuk és a URL címet pedig a href értékben adjuk meg. Ismét egy példa:

1. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card title="Oldal hivatkozassal">

    <p>Ha unatkozni fogsz, latogass el egy 

      <a href="http://wap.cybersex.nl">erotikus

      oldalra</a> kozvetlenul a telefonod kijelzojen.</p>

  </card>

</wml>

1. kép:  Az aktuális hivatkozás ki van emelve

 

Több „kártya” egy oldalon

Az oldalak többsége több „kártyát” tartalmaz. Az előnye a gyorsaságában rejlik - amikor a felhasználó válogat a kártyák között, akkor a telefon nem vesz fel kapcsolatot a szerverrel, mert már előzőleg a memóriájában eltárolta az adott oldalt minden „kártyájával” együtt.

Amikor a telefon az oldalt lehúzta, mindig sorrendben jelennek meg a kártyák (például nem a 2. számú kártya lesz a nyitólap). Ha azt szeretnénk, hogy a felhasználó eljusson valamelyik másik „kártyára”, muszáj kézzel kiviteleznünk a hivatkozást (a sorrendet beállítani). A WAP-böngésző tudniillik egyszerre csak egy „kártyát” tud megjeleníteni.

Ha a kártyák között szeretnénk hivatkozást létrehozni, muszáj lesz a kártyákat egyértelműen megjelölnünk. Az oldal neve tulajdonképpen az id értéke. Hivatkozást a kártyára úgy készítünk, ha ezt használjuk: #kártya_neve - amit megadunk id-nek azt írjuk a kártya_neve helyére. Ez első hallásra így nem biztos, hogy egyértelmű, a valóságban azért egyszerűbb. Ezért itt egy újabb példa:


2. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card title="Elso kartya" id="elso">

    <p>Sziasztok!<br/>

      A legerdekesebb informaciok a<a

      href="#masodik">masodik kartyan vannak</a>.</p>

  </card>

  <card title="Masodik kartya" id="masodik">

    <p>Na ez nem volt teljesen igaz. Lehetseges, hogy jobban orulnetek ha visszaugornatok

      <a href="#elso">az elso kartyara</a>.</p>

  </card>

</wml>

2. kép: Hivatkozás két kártya között

A kártyák közötti navigáció

A hagyományos hivatkozásoktól eltérően (amelyek a szöveg egy részében van elhelyezve), léteznek másféle navigációs elemek is, amelyeket sokkal kényelmesebb használni a hagyományos társaikhoz képest.

Minden kártyánál a do objektum segítségével definiálhatunk olyan akciókat, amelyeket könnyen előhívhatunk valamilyen billentyűvel, vagy a menüből választjuk ki az adott akciót a telefonon - a konkrét elérhetősége függ az adott böngészőtől.

A <do> tagnak két attribútuma van: a type és a label. Az első közülük az, amelyikkel definiálunk, a másodikat pedig talán már ki is találhattátok - ez egy címke. Ha beszúrjuk az accept értéket, gondoljuk, hogy a felhasználó valamit elfogad - például: kiválasztás a menüből, ugrás másik kártyára, stb. Használhatjuk még a prev értéket is, amely arra szolgál, hogy visszalépjünk az előző oldalra. A telefonok többségén erre a visszalépésre van egy speciális gomb és ez az akciót (visszalépést) automatikusan feltérképezi.

A do tartalma azt mutatja be, hogy mi történik akkor, ha a felhasználó kiválasztja az adott opciót. Legtöbbször a go objektumot használjuk, amely megengedi az ugrást bármilyen másik oldalra vagy kártyára a megadott URL címmel a href attribútumban. A képeken láthatjuk, hogy hogyan fest ugyanaz az oldal két különböző böngészőben:

A go helyére lehet beszúrni az üres prev objektumot, amely arra szolgál, hogy visszaugorjunk. Tehát úgy működik mint a Vissza gomb a böngészőkben.

4. kép: Némely telefonon menüből választhatjuk ki, hogy hova szeretnénk ugorni-

3. kép: - és némelyikben csak egyet kell kattintanunk

Itt egy kis példa a bemutatásához:

3. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card title="Első kártya" id="elso">

    <do type="accept" label="Következő kártya">

      <go href="#masodik"/>

    </do>

    <p>Helló<br/>

      A legérdekesebb információk a második oldalon találhatok.</p>

  </card>

  <card title="Második kártya" id="masodik">

    <do type="prev" label="Vissza">

      <prev/>

    </do>

    <p>Hát ez nem teljesen igaz. Inkább ugorj vissza.</p>

  </card>

</wml>

Vissza gombnak minden kártyán kellene lennie. A felhasználókkal gyakran(!) megtörténik, hogy rossz helyre ugornak, és oda jutnak ahová egyáltalán nem akartak. A vissza gombbal könnyen visszaugorhat, és a helyes címre ugorhat. Minden kártyához hozzáadni a do objektumot a beállításokkal elég fáradságos munka. A WML nekünk ebben is segít: megengedi, hogy az oldal elejére a template objektumba beletegyük a beállításokat, amelyek elérhetőek lesznek az összes kártyán. Ennek eredményeképpen kisebbek lesznek az oldalaink. A template objektumot akkor használjuk, ha oldalunkon több kártya van. Egy kis példa:


4. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <template>

    <do type="prev" label="Vissza">

      <prev/>

    </do>

  </template>

  <card title="Első kartya" id="elso">

    <do type="accept" label="Következő">

      <go href="#masodik"/>

    </do>

    <p>Szia!<br/>

      A legjobb szöveget a második kártyán találod.</p>

  </card>

  <card title="Masodik kartya" id="masodik">

    <p>Itt nincs semmilyen jó szöveg, ugorj vissza az első oldalra!</p>

  </card>

</wml>

Ezeknek megjelenítési képe ugyanaz mint a 4. vagy a 3. kép.

 

WML élesben

A WML nyelv alapjaival az előzőekben már megismerkedtünk (kösz ha eddig elolvastad) . Most már rátérhetünk az egyéb dolgokra is - képek behelyezése és táblák készítése. Ezekkel a tulajdonságokkal már nekiláthatunk egy teljes WAP oldal elkészítésének. A későbbiekben bemutatom, hogy hogyan lehet - hová? mit? - elhelyezni, hogy a többi WAP felhasználó is láthassa.

Táblák

A telefonok képernyője eléggé kicsi, ezért az információkat jól kell elhelyeznünk. Pont erre jók a táblák.

A tábla a table tagba kerül. Itt még be kell állítanunk a columns értéket, hogy a táblának mennyi oszlopa legyen. A táblában - mint a HTML esetében is - az egyes oszlopelemek egy sorba kerülnek. Minden sor a tr tagba és minden elem a td tagba van zárva.

A táblák használatával valóban egyszerű például egy árfolyamos WAP-oldalt készíteni. Jöjjön rá egy kis példa:

5. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <card title="Árfolyamok">

    <p>

      <table columns="2">

        <tr>

          <td>Pénznem</td>

          <td>Árfolyam</td>

        </tr>

        <tr>

          <td>DEM</td>

          <td>99.46</td>

        </tr>

        <tr>

          <td>ATS</td>

          <td>1.70</td>

        </tr>

        <tr>

          <td>USD</td>

          <td>10.46</td>

        </tr>

      </table>

    </p>

  </card>

</wml>

4. kép: Egyszerű tábla a böngészőben

A táblák formázása a WML-ben nagyon korlátozott. Az egyetlen dolog, amit beállíthatunk, az a táblák szövegének elrendezése. Minden oszlopnál beállíthatjuk, hogy a kockában a szöveg merre legyen elrendezve: balra, jobbra, vagy középre. Az elrendezést az align értékkel állítjuk be. Minden oszlop tartalmaz egy betűt, ez állítja be, hogy merre álljon a kocka. Az `L' a balra igazításért, a `R' jobbra és a középre igazításért pedig a `C' betű felel. A kijavított árfolyam oldalunk jobban fog kinézni, mert egymás alatt lesznek a számok, betűk. Egy újabb példa következik:

6. példa:

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

              "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card title="Árfolyamok">

    <p>

      <table align="CR" columns="2">

        <tr>

          <td>Pénznem</td>

          <td>Árfolyam</td>

        </tr>

        <tr>

          <td>DEM</td>

          <td>19.46</td>

        </tr>

        <tr>

          <td>ATS</td>

          <td>2.70</td>

        </tr>

        <tr>

          <td>USD</td>

          <td>40.46</td>

        </tr>

      </table>

    </p>

  </card>

</wml>


5. kép: Egyszerű tábla szövegigazítással. Azért így már egy kicsit csinosabb, nem?

Itt még szót kell ejtenem, hogy a nagyon régi telefonok (pl. Nokia 7110) nem kezelik a táblákat. Ilyeneknél minden kocka új sorban jelenik meg:

6. kép:  A nagyon régi telefonok így jelenítik meg a táblázatokat:

Ennyi elég lesz mára. A következő fejezetre tartogatok nektek egy igazán érdekes dolgot:

A képek használatát. 

Az időzítőt

A következő órán nekikezdünk a WmlScriptnek is.

Ha ezeken túljutottunk nekikezdünk a WAP PHP-nek, stb.-.

A forráskódokat is elérheted a CD-n.

Mihálko Adrián - adriankoooo@orangemail.sk