Lesson 9: Further navigational commands in WML
The go element
The 'go' element is used to tell the browser to navigate to a particular location. Go elements can be placed inside either 'anchor' elements, or the 'do' elements covered in the previous lesson.
The 'anchor' element specifies a hypertext anchor. It has a single, optional, attribute 'title'. At the simplest level, the the anchor and go elements can be used to emulate the <a></a> tags introduced in lesson 6, by making use of the 'href' attribute of the go element. For example, the following sets of code are functionally equivalent:
<a href="#card2">
card2
</a>
and
<anchor title="the_same">
card2
<go href="#card2"/>
</anchor>
The additional benefit of the go element, however, is that it can be used like an HTML form, to pass data from one card to another, or back to the server (see lesson 11 for more details).
prev
The <prev/> tag is used to force backwards navigation. As one navigates through WAP cards, the browser keeps a list of those visited, and the prev command makes the browser go back to the card just visited. The prev command must be enclosed by an 'anchor' element or a 'do' element. The following example associates the prev command with an anchor on the words 'go back':
<anchor>
go back
<prev/>
</anchor>
It is very important when writing WML to remember to allow backwards navigation from all of your cards (with a few exceptions described below). Many microbrowsers do not support a 'back' function unless explicitly specified in the WML code. This means that people can get 'stuck' in a site - an annoying experience which may keep them away in future.
|
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.
|
<wml>
|
|
4.
|
<template>
|
|
5.
|
<do name="goback" type="prev">
|
|
6.
|
<prev/>
|
|
7.
|
</do>
|
|
8.
|
</template>
|
|
9.
|
<card id="card1" title="Welcome">
|
|
10.
|
<onevent type="onenterforward">
|
|
11.
|
<refresh>
|
|
12.
|
<setvar name="details" value="you entered forwards"/>
|
|
13.
|
</refresh>
|
|
14.
|
</onevent>
|
|
15.
|
<onevent type="onenterbackward">
|
|
16.
|
<refresh>
|
|
17.
|
<setvar name="details" value="you entered backwards"/>
|
|
18.
|
</refresh>
|
|
19.
|
</onevent>
|
|
20.
|
<p align="center">
|
|
21.
|
$(details:n).
|
|
22.
|
</p>
|
|
23.
|
<p>
|
|
24.
|
goto <a href="#card2"> card 2 </a>
|
|
25.
|
</p>
|
|
26.
|
</card>
|
|
27.
|
<card id="card2" title="return">
|
|
28.
|
<p>
|
|
29.
|
return to the previous <a href="#card1"> card </a> to reset the variable
|
|
30.
|
</p>
|
|
31.
|
</card>
|
|
32.
|
</wml>
|
|
|
When entered normally
| 
When entered using the back link
|
|
