De grafische kwaliteit van de beelschermen van mobiele apparaten zijn niet echt flitsend te noemen. WML is dan ook vrij bescheiden met de grafische mogelijkheden die zijn geimplementeerd. Toch valt er met een beetje creativiteit wel wat van te maken.

Tekst opmaak
De volgende tags zijn beschikbaar voor de opmaak van tekst

Om het effect te testen kun je het volgende deck gebruiken:

<?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" title="lettertypes"> 
<p> 

<em>nadruk</em><br/> 
<strong>extra nadruk</strong><br/> 
<i>cursief</i><br/> 
<b>vet</b><br/> 
<u>onderstreept</u><br/> 
<big>groot lettertype</big><br/> 
<small>klein lettertype</small><br/> 
</p> 
</card> 

</wml> 

Het resultaat ziet er zo uit

Het advies is om zoveel mogelijk gebruik te maken van de <strong> en <em> tags.

Enter
De tag <br/> is al vaker gebruikt in deze en de voorgaande tutorials. De <br/> tag zorgt ervoor dat een zin op een nieuwe regel begint. Denk aan het verschil met HTML, bij wml moet de <br/> tag ook weer beeindigd worden vandaar het eindteken (/).

Paragraaf
De tag <p> is ook al vaker gebruikt. Er zijn een aantal attributen bij de p tag die het mogelijk maken om invloed uit te oefenen op de presentatie van teksblokken: Met de attributen align='left, right, center' kun je aangeven of de tekst respectievelijk links rechts of in het midden uitgelijnd moet worden. Naast de align attribuut is er ook de mode='wrap,nowrap' attribuut. Standaard wordt een zin "gewrapt" dat wil zeggen de zin wordt afgebroken bij het einde van het scherm en op de volgende regel verder gaat. Door de waarde nowrap te gebruiken forceer je het toestel waar de tekst op wordt weergegeven de zin bijeen te houden. Dit betekend dat het apparaat eventueel horizontaal moet kunnen scrollen of een groot beeldscherm moet hebben. Geen aanrader op dit moment

Tabellen
Een makkelijke manier om informatie overzichtelijk te presenteren is het plaatsen van de info in tabellen. Ook in WML kun je gebruik maken van tabellen.  De volgende fictieve beurs informatie willen we op het scherm krijgen

Fonds A 71,3 Euro gestegen

Fonds B 12,3 Euro gedaald

Fonds C 33.7 Euro gedaald

Omdat de ruimte beperkt is zijn voor de woorden gedaald en gestegen een pijltje gemaakt (up.wbmp, down.wbmp)

De tabeltag in WML is gelijk aan die van HTML dwz <table>. Om de tabel te definieren maken we gebruik van een drietal attributen van het table tag

• title: de titel van de tabel (kun je weglaten)
• align: de uitlijning van de tekst in de tabel (l,r,c)
• columns, het aantal kolommen in de tabel

De rijen in de tabel maak je door steeds een nieuwe <tr> tag toe te voegen tussen de table tags. Tenslotte definieer je de verschillende cellen in een rij met de <td> tag

Het geraamte voor onze tabel (vier rijen, drie kolommen) gaat er dus als volgt uitzien

<table title='koersen' align='r' columns='3'>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>

Nu gaan we de informatie toevoegen, de code van het deck ziet er als volgt uit:

<?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" title="koersen"> 
<p> 
<table title='koersen' align='r' columns='3'>
<tr>
<td><em>fonds</em></td><td><em>Eur.</em></td><td><em>koers</em></td>
</tr>
<tr>
<td>A</td><td>71,3</td><td><img src='up.wbmp' alt='up'/></td>
</tr>
<tr>
<td>B</td><td>12,3</td><td><img src='down.wbmp' alt='down'/></td>
</tr>
<tr>
<td>C</td><td>33,7</td><td><img src='down.wbmp' alt='down'/></td>
</tr>
</table>
</p> 
</card> 

</wml>

Op de mobiel krijgen we nu de volgende informatie

Tot zover  tekstopmaak en tabellen. In de volgende tutorial wordt user input.behandeld

Deze tutorial is gemaakt door CéPé Infosolutions, vragen en commentaar zijn welkom: info@cepe.nl