In dit deel van de tutorial gaan we links maken tussen de cards. Basis vormt het eerste deck dat gemaakt is tijdens de vorige tutorial. De code hiervan was

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

<wml> 
<template>
</template>

<card id="Welkom" title="Welkom"> 
<p align='center'> 
<img src='cepe.wbmp' alt='CePe logo'/>
</p> 
</card> 

<card id="routes" title="Routes"> 
<p> 
Routes naar de vestigingen
</p> 
</card> 

<card id="help" title="help"> 
<p> 
help
</p> 
</card> 
</wml> 

Voor de routepagina kun je de volgende code copieren

<?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="apeldoorn" title="ede-apeldoorn"> 
<p align='left'> 
<b>locatie</b> weg,km<br/>
<b>Ede</b><br/>
N304,26.4<br/>
Laan van Spi,2.9<br/>
Ln. van de m,0.3<br/>
<b>Apeldoorn</b> 
</p> 
</card> 

<card id="steenwijk" title="zwolle-steenwijk"> 
<p align='left'> 
<b>locatie</b> weg,km<br/>
<b>Zwolle</b><br/> 
Burg. van Ro,0.3<br/>
Harm Smeenge,0.3<br/>
Katerdijk,0.4<br/>
<b>Zwolle 19</b><br/>
A28,23.6<br/>
<b>Meppel (Lankhorst)</b><br/>
A32,16.9<br/>
Vendelweg,0.5<br/>
<b>Steenwijk</b> 
</p> 
</card> 

<card id="ede" title="arnhem-ede"> 
<p align='left'> 
<b>locatie</b> weg,km<br/>
<b>Arnhem</b><br/>
<b>Arnhem Noord 26</b><br/>
A12,0.3<br/>
<b>Arnhem (Waterberg)</b><br/>
A12,8.3<br/>
N224,9.3<br/>
<b>Ede (Gld)</b> 
</p> 
</card> 
</wml> 

De cards voor de welkom en route decks zijn klaar maar er is nog geen manier om tussen de cards te navigeren. Je ziet dus nog steeds alleen de eerste pagina van de decks als de wml files opent:

Een link maken
Het maken van een link gebeurd met de <a> tag, net als in HTML. Aan het <a> tag wordt een attribuut (href) toegevoegd om aan te wijzen wat de bestemming van de link wordt. 

<a href='routes.wml'>

Deze code maakt een link naar het routes deck. De  links kuun je net als in HTML relatief en absoluut aanmaken. De bovengenoemde link verwijst altijd naar de bovenste card van een deck. Als je naar een specifieke Card wil gaan maak dan gebruik van de # (bookmark) in het URL:

<a href='routes.wml#steenwijk'>

Deze link brengt je bij de details van de routebeschrijving naar Steenwijk. De # kan ook gebruikt worden in hetzelfde deck om naar een andere Card te verwijzen.

<a href='l#steenwijk'>

We gaan eerst een link maken om van de welkom card (logo) naar de eerste pagina te komen die doorverwijst naar de telefoonnummers en routes.

De code van de eerste card komt er als volgt uit te zien:

<card id="Welkom" title="Welkom"> 
<p align='center'> 
<img src='cepe.wbmp' alt='CePe logo'/><br/>
<a href='#routes'>ga verder...</a>
</p> 
</card>

Het resultaat is de volgende link:

Door op de link te klikken kom (options, select link) kom je bij de volgende card terecht. Vanuit deze card willen we naar het deck met de routebeschrijvingen linken. We maken nu een link naar een ander deck de code van deze card gaat er zo uitzien:

<card id="routes" title="Routes"> 
<p> 
<a href='route.wml'>Routes naar de vestigingen</a>
</p> 
</card> 

Als je de link volgt kom je bij de eerste route terecht. Dat is niet echt fraai dus maken we er een extra card bij met een overzicht van de routes. De complete code van de route.wml pagina is nu:

<?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="start" title="kies locatie"> 
<p align='left'> 
<a href='#apeldoorn'>Apeldoorn</a><br/>
<a href='#steenwijk'>Steenwijk</a><br/>
<a href='#ede'>Ede</a><br/>
</p>
</card> 
<card id="apeldoorn" title="ede-apeldoorn"> 
<p align='left'> 
<b>locatie</b> weg,km<br/>
<b>Ede</b><br/>
N304,26.4<br/>
Laan van Spi,2.9<br/>
Ln. van de m,0.3<br/>
<b>Apeldoorn</b> 
</p> 
</card> 

<card id="steenwijk" title="zwolle-steenwijk"> 
<p align='left'> 
<b>locatie</b> weg,km<br/>
<b>Zwolle</b><br/> 
Burg. van Ro,0.3<br/>
Harm Smeenge,0.3<br/>
Katerdijk,0.4<br/>
<b>Zwolle 19</b><br/>
A28,23.6<br/>
<b>Meppel (Lankhorst)</b><br/>
A32,16.9<br/>
Vendelweg,0.5<br/>
<b>Steenwijk</b> 
</p> 
</card> 

<card id="ede" title="arnhem-ede"> 
<p align='left'> 
<b>locatie</b> weg,km<br/>
<b>Arnhem</b><br/>
<b>Arnhem Noord 26</b><br/>
A12,0.3<br/>
<b>Arnhem (Waterberg)</b><br/>
A12,8.3<br/>
N224,9.3<br/>
<b>Ede (Gld)</b> 
</p> 
</card> 
</wml> 

De GSM heeft naast de linkerknop ook nog een rechternavigatieknop. Deze knop is erg handig bij de navigatie door de pagina's maar tot nu toe hebben we niet gezien dat er een functie aan werd toegekend. Om acties aan een specifieke knop toe te wijzen gebruik je de <do> tag. Deze tag zorgt ervoor dat er een actie wordt verbonden aan de knop van de telefoon. De actie zit in de <do> tag gesloten, de <go> tag geeft de link aan.

<do type='prev' label='Route'>
<go href='route.wml'>
</do>

Op de NOKIA is de rechterknop de previous(prev) button. Je kent dus aan deze knop de link naar de routes toe. De nokia implementeerd deze opdracht nog niet goed zodat hij bij het lijstje van de te volgen links kom te staan.

Templates
Tot nu toe hebben we nog niets met de template tag gedaan dat gaan we veranderen. Met de template tag kun je instellingen definieren die voor alle card op een deck geldig zijn. 

Het zou bijvoorbeeld handig kunnen zijn om vanuit een specifieke route weer terug te kunnen gaan naar de algemene routepagina of van daaruit naar het Welkom deck. De code om dit mogelijk te maken ziet er als volgt uit.

<template>
<do type='prev' label='back'>
<prev/>
</do>
</template>

In de volgende tutorial tekst opmaak en tabellen:

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