Inleiding WAP tutorial
inleiding software tags een eerste begin links tekst opmaak en tabellen user input
             
In dit voorbeeld gaan we een online website verkooppunt opzezetten. Gebruikers kunnen een simpele, een geavanceerde en een professionele website bestellen... Voordat we de klant iets laten bestellen zal hij eerst moeten laten weten hoe hij heet 

Om input te kunnen vragen is het nodig om een "input element" te definieren waarin iemand informatie kan ingeven.  In het input element mogen maximaal 32 karakters worden ingevoerd en de ingevoerde gegevens worden verbonden aan de variabele naam.

<input name="naam" type="text" maxlength="32"/>

De onderstaande code geeft de volledige deck weer waarmee we de naam van de bezoeker kunnen vragen.

<?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="geef uw naam">
<p>
<input name="naam" type="text" maxlength="32"/>
</p>
</card>


</wml>

Het resultaat is niet echt spectaculair: je kunt een naam invullen, that's it. We moeten dus nog wat doen met deze informatie. De naam die is ingetoest kunnen we gebruiken om de gebruiker met zijn naam aan te spreken en welkom te heten op de bestelsectie. De waarde van de variabele naam kan weergegeven worden mbv van het volgende commando: $(naam). Het deck ziet er nu 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 title="geef uw naam">
<p>
<input name="naam" type="text" maxlength="32"/>
<a href='#okee'>ok</a>
</p>
</card>

<card id="okee" title="ok">
<p>
Hallo, $(naam) welkom op de bestelpagina!
</p>
</card>

</wml>

Ik type als naam in PIETER als daarom gevraagd wordt en klik vervolgen op ok :

Nu komen we toe aan het bestelwerk. Zoals in het begin van deze pagina gezegd is moet de gebruiker een keuze kunnen maken uit drie soorten sites. Het maken van een keuze kan met behulp van een option list gebeuren. De gebruiker kan dan het type site dat hij wil hebben aanklikken.

In hetzelfde DECK passen we de CARD "okee" aan:


<card id="okee" title="keuze">
<p>
Hallo $(naam) kies een site die je wilt bestellen
<select name="site" iname="I" ivalue="0" multiple="false">
<option value="eenvoudige">Eenvoudig</option>
<option value="geavanceerde">Geavanceerd</option>
<option value="professionele">Professioneel</option>
</select>
</p>
</card>

De waarde voor naam (in dit geval PIETER) was al gegeven en gebruiken we nu opnieuw. Onder de aanhef is een optionlist gemaakt. De option list begint met de "select" tag

<select name="site" iname="I" ivalue="0" multiple="false">

De keuzelijst krijgt als variabelenaam site. Later kunnen we de waarde van deze variabele weer opvragen. Door iname="I" op te nemen in de select tag geef je aan dat de waarde van de keuze in de optionlist wordt toegkend aan de variabele I. Dit betekend dat als Eenvoudig wordt gekozen dan wordt de waarde van I=1. Als Geavanceerd wordt gekozen dan wordt de waarde van I=2, en voor Professioneel wordt I=3. De waarde wordt dus bepaald door de volgorde van de optionlist. Als we een Eenvoudig standaard geselecteerd willen hebben in de optionlist dan had in de SELECT tag ivalue=1 moeten staan. In dit geval willen we dat het keuzevak leeg is dus is de ivalue=0. Door te zeggen multiple="false" geven we aan dat de gebruiker maar een soort website mag kiezen. Alle keuzes hebben een value. Deze value kan later weer opgeroepen worden. De value wordt toegekend aan de variabele SITE, dit is de naam van de optionlist (gedefinieerd in de SELECT tag). Het resultaat ziet er als volgt uit:

We maken het DECK af met een bedankpagina: de volledige code 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 title="geef uw naam">
<p>
<input name="naam" type="text" maxlength="32"/>
<a href='#okee'>ok</a>
</p>
</card>


<card id="okee" title="keuze">
<p>
Hallo $(naam) kies een site die je wilt bestellen:
<select name="site" iname="I" ivalue="0" multiple="false">
<option value="eenvoudige">Eenvoudig</option>
<option value="geavanceerde">Geavanceerd</option>
<option value="professionele">Professioneel</option>
</select>
<a href='#waardes'>ok</a>
</p>
</card>


<card id="waardes" title="bedankt">
<p>
$(naam), u heeft een $(site) site besteld.<br/>
</p>
</card>

</wml>

De bedankpagina komt er als volgt uit te zien:

Natuurlijk gebeurd er niets met deze info. In de wml-script tutorial gaan we kijken of daar wat aan te doen is.


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