|
|
Lesson 14: A worked example of image changing, illustrating the atypical behaviour of WML variables
The following example code demonstrates some of the ways in which you can get tasks and variables working together. The browser starts off by showing a picture of the Softsteel logo. Then, when the user successively performs an 'accept' action (see Lesson 8), the picture rotates through showing this and two other pictures.
|
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.
|
<card id="card1" title="Welcome">
|
|
5.
|
<onevent type="onenterforward">
|
|
6.
|
<refresh>
|
|
7.
|
<setvar name="img1" value="logo.wbmp"/>
|
|
8.
|
<setvar name="img2" value="ghost.wbmp"/>
|
|
9.
|
<setvar name="img3" value="cube.wbmp"/>
|
|
10.
|
<setvar name="alt1" value="Globe"/>
|
|
11.
|
<setvar name="alt2" value="Ghost"/>
|
|
12.
|
<setvar name="alt3" value="Cube"/>
|
|
13.
|
</refresh>
|
|
14.
|
</onevent>
|
|
15.
|
<p align="center">
|
|
16.
|
<img src="$(img1:e)" alt="$(alt1:n)"/>
|
|
17.
|
</p>
|
|
18.
|
<do name="accpt" type="accept" label="$(alt2:n)">
|
|
19.
|
<refresh>
|
|
20.
|
<setvar name="img1" value="$(img2:n)"/>
|
|
21.
|
<setvar name="img2" value="$(img3:n)"/>
|
|
22.
|
<setvar name="img3" value="$(img1:n)"/>
|
|
23.
|
<setvar name="alt1" value="$(alt2:n)"/>
|
|
24.
|
<setvar name="alt2" value="$(alt3:n)"/>
|
|
25.
|
<setvar name="alt3" value="$(alt1:n)"/>
|
|
26.
|
</refresh>
|
|
27.
|
</do>
|
|
28.
|
</card>
|
|
29.
|
</wml>
|
|
|
When the user first enters the card, six variables - img1, img2, img3, alt1, atl2, alt3 - are given initial values (lines 5 - 14). The browser then shows the image at the URI held by img1, with the alternative text held by alt1 (lines 15 - 17).
Lines 18-27 specify a task to occur when the user performs an 'accept' action - on our emulator, this consists in pressing the left softkey. The task rotates the values of variables, so that img1 takes the value of img2, img2 the value of img3, and img3 the value of img1 (and equivalently for the alt variables).
Note that in normal, sequential programming the code in lines 20 - 25 would be buggy. By the time img3 is told to take the value of img1, img1 will already have been changed to have the value of img2. But in WML new variable values do not take effect until the end of the task, so the code works as it should.
In some browsers one can use an ontimer event to switch between images in a card, allowing rudimentary animations. Unfortunately, some browsers will not reinitialise a timer following a refresh task. On these browsers, therefore, the animation would stall at the second picture.
|
|
|
|
