WML

WML (Wireless Markup Language) 1.x is the markup language defined in the WAP 1.x specification.
WAP is the standard created by the WAP Forum (now the Open Mobile Alliance [OMA]) that brings
the World Wide Web to wireless devices. It specifies the protocol stack and application environment
of mobile Internet browsing applications.

The role of WML in mobile Internet applications is the same as that of HTML in web applications.
WAP sites are written in WML, while web sites are written in HTML.

WML 1.x is very similar to HTML. Both of them use tags and are written in plain text format. Some
tags in WML 1.x are directly borrowed from HTML.

Some features of WML 1.x are specific to wireless devices. For example, WML 1.x provides a way
for developers to program the softkeys of mobile phones. This feature is not supported in HTML since
computers do not have any softkeys.

The most up-to-date version of the WAP 1.x specification is WAP 1.2.1, which defines WML 1.3.

WML files have the extension ".wml". The MIME type of WML is "text/vnd.wap.wml".

WML supports client-side scripting. The scripting language supported is called WMLScript. Its
syntax is based on JavaScript.

A major difference between HTML and WML is that the basic unit of navigation in HTML is a page,
while that in WML is a card. A WML file can contain multiple cards and they form a deck. When a
user goes to a WAP site, the mobile browser loads a WML file that contains a deck of cards from the
server. Only one card will be shown on the screen of the wireless device each time. If the user goes to
another card of the same deck, the mobile browser does not have to send any requests to the server
since the file that contains the deck is already stored in the wireless device.

WML is designed in this way because wireless devices have a high latency for connecting to the
server. Downloading a deck of cards at a time can lower the number of round trips to the server.

You can put links, text, images, input fields, option boxes and many other elements in a card.

WML Program Structure:

Following is the basic structure of a WML program:

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

<wml>
<card id="one" title="First Card">
<p>
This is the first card in the deck
</p>
</card>
</wml>

Prolog refers to the first two lines of our WML example:

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

Every WML document starts with the prolog. The first line is the XML declaration and the second
line is the DOCTYPE declaration.

The prolog components are not WML elements and they should not be closed, i.e. you should not give
them an end tag or finish them with />.

XML Declaration and Character Encoding

All WML documents are XML documents. So, there is an XML declaration at the start. The XML
declaration specifies the XML version of the document. The character encoding of the document can
also be specified here, like this:

<?xml version="1.0" encoding="UTF-8"?>

The above line states that the XML version of the WML document is 1.0 and the character encoding
is UTF-8.

All WML documents must have the DOCTYPE declaration. It should be placed between the XML
declaration and the <wml> element. Below is the DOCTYPE declaration for WML 1.3. You can
simply copy and paste it into your WML files.

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN"

"http://www.wapforum.org/DTD/wml13.dtd">

The DOCTYPE declaration specifies the name of the DTD (Document Type Definition) and the URL
to the DTD. The DTD contains information about the syntax of the markup language. It defines what
elements and attributes can be used in the markup and the rules that they should be used. For example,
the DTD of WML specifies that the <card> element should be enclosed in the

<wml></wml> tag pair.

<wml>

is the root element of WML. All other elements should be enclosed within the wml></wml> tags.

<card> Element
The <card> element specifies the content of a card. In our WML example, two attributes, id and title,
have been specified to the <card> tag. We use the id attribute to define a unique ID for a card. Card
IDs are needed for navigation between cards.

The title attribute is used to set the title of a card. Typically, a title is displayed at the top of a wireless
device's screen.

Unlike HTML 4.01 Transitional, text cannot be enclosed directly in the <card></card> tag pair.

The <p> element defines a paragraph of text. Besides text, things such as anchor links and images can
be included in the <p> element. WAP browsers always render a paragraph on a new line.

The <p> element supports two attributes: align and mode. The align attribute is used to change the
horizontal alignment of a paragraph. The values left, center and right are supported. The following
WML example illustrates how to align a paragraph centrally using the align attribute:

<wml>
<card id="card1" title="WML Tutorial">
<p align="center">Hello world. Welcome to our WML tutorial.</p>
</card>
</wml>

WML is defined by a set of elements that specify all markup and structural information for a WML
deck. Elements are identified by tags, which are each enclosed in a pair of angle brackets.

Unlike HTML, WML strictly adheres to the XML hierarchical structure, and thus, elements must
contain a start tag; any content such as text and/or other elements; and an end tag. Elements have one
of the following two structures:

• <tag> content </tag> : This form is identical to HTML.

• <tag />: This is used when an element cannot contain visible content or is empty, such as a
line break

Deck & Card Elements

WML Elements Purpose

<!--> Defines a WML comment

<wml> Defines a WML deck (WML root)

<head> Defines head information

<meta> Defines meta information

<card> Defines a card in a deck

<access> Defines information about the access control of a deck

<template> Defines a code template for all the cards in a deck

The <head> element in WML is similar to the <head> element in HTML.It marks a place for meta-
information about the document to be stored.

<meta>: You can specify some generic metadata in your WML file using the <meta/> tag. Metadata
is placed at the document head. The <head> and </head> tags mark the start and end of the document
head respectively.

Attributes:
The <meta> element supports the following attributes:

Attribute Value Description

name string Gives the name of this property. Meta-information with this
attribute is intended for server-side applications, so it may be
removed before it gets to the browser. Could be "keywords",
"author", etc.

content string Should specify a description of the name attribute

<wml>
<head>
<meta name="author" content="Andrew"/>
</head>

• <access> : element provides a simple form of access control for a deck. This allows a deck to
specify that only certain other decks may link to it (these decks are known as referring
URLs).

Attributes:
The <access> element supports the following attributes:

Attribute Value Description

Domain cdata Specifies the domain (effectively, the range of servers) from which the
referring deck must come.

Example:

Access is limited to other decks in www.tutorialspoint.com

<head>

<access domain="www.tutorialspoint.com"/>

</head>

There may be no more than one <access> element in a deck, and it must be the first thing inside the
<head> element.

• Comments are placed inside <!-- --> in WML. This is the same as HTML. For example, the
following lines are comments. WAP browsers ignore all comments.

<!-- This is a comment in WML -->

<!-- This is a multi-line
comment -->

• Line Breaking in WML

<br/> is the line breaking tag in WML, which is the same as that in HTML.

<wml>

<card title="Line Break Example">

<p align="center">
This is a <br /> paragraph with a line break.
</p>
</card>

</wml>
 • WML Tables

To create tables and place some data in them, you need the <table>, <tr> and <td> WML tags. A table
(<table>) has a number of rows (<tr>) and each row has a number of cells (<td>). Data is placed in
table cells. The table must be placed inside <p> tag. The markup structure should be like this:

<table>
<tr>
<td>Data is placed here</td>
</tr>
</table>

The columns attribute of the <table> tag specifies the number of columns of a table. It is a mandatory
attribute. The columns attribute value must match the number of <td></td> tag pairs in a row. For
example, if the columns attribute value is 3, then each <tr></tr> must contain three <td></td> tag
pairs.

The following WML example demonstrates how to create tables and place data in table cells:

<wml>
<card id="page1" title="Table in WML">
<p>
<table columns="3">
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>Cell C</td>
</tr>

<tr>
<td>Cell D</td>
<td>Cell E</td>
<td>Cell F</td>
</tr>
</table>
</p>
</card>
</wml>

The result of the above WML example in some mobile phone emulators is shown below:
 Sony Ericsson T610

• WML Links

Anchor links enable the navigation between different WML cards. If you select an anchor link, you
will be brought to another WML card in the current deck or in another deck.

There are two WML elements, <anchor> and <a>, which can be used to create WML links.

The <anchor></anchor> tag pair is used to create an anchor link. It is used together with tags such as
<go/> and <prev/>, which tell WAP browsers what to do when a user selects the anchor link. <go/>
and <prev/> should be enclosed within the <anchor></anchor> tags, like this:

<anchor>
<go href="..." ... />
</anchor>

<anchor>
<prev/>
</anchor>

Like HTML, WML uses a URL (Uniform Resource Locator) to refer to the location of a WML file or
a card in a deck. The href attribute of the <go/> tag is used to specify the URL.

• WML <a> Element:

The <a>...</a> tag pair can also be used to create an anchor link and always a preferred way of
creating links.

You can enclose Text or image inside <a>...</a> tags.

Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="A Element">
<p> Link to Next Page:
<a href="nextpage.wml">Next Page</a>
</p>
</card>
</wml>

This will produce the following result:

Text Elements
WML Elements Purpose

<br> Defines a line break

<p> Defines a paragraph

<table> Defines a table

<td> Defines a table cell (table data)

<tr> Defines a table row

<pre> Defines preformatted text

Text Formatting Tags

WML Elements Purpose

<b> Defines bold text

<big> Defines big text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines small text

<strong> Defines strong text

<u> Defines underlined text

Example:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>
<card title="Text Formatting">
<p>
<b>bold text</b><br/>
<big>big text</big><br/>
<em>emphasized text</em><br/>
<i>italic text</i><br/>
<small>small text</small><br/>
<strong>strong text</strong><br/>
<u>underlined text</u>
</p>
</card>

</wml>

This will produce the following result:

Preformatted Text:
The <pre> element is used to specify preformatted text in WML. Preformatted text is text of which
the format follows the way it is typed in the WML document.

This tag preserves all the white spaces enclosed inside this tag. Make sure you are not putting this tag
inside <p>...</p>

<wml>
<card title="Preformatted Text">
<pre>
This is preformatted
text and will appear
as it it.
</pre>
</card>
</wml>

This will produce the following result:

WML <select> Tag

The <select>...</select> WML elements are used to define a selection list and the
<option>...</option> tags are used to define an item in a selection list. Items are presented as radio
buttons in some WAP browsers. The <option>...</option> tag pair should be enclosed within the
<select>...</select> tags.

Attributes:
This element supports the following attributes:

Attribute Value Description

Multiple • true Sets whether multiple items can be selected. Default is

"false"
• false

Name Text Names the variable that is set with the result of the
selection

Title Text Sets a title for the list

Value Text Sets the default value of the variable in the "name"
attribute

Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="Selectable List">
<p> Select a Tutorial :
<select>
<option value="htm">HTML Tutorial</option>
<option value="xml">XML Tutorial</option>
<option value="wap">WAP Tutorial</option>
</select>
</p>
</card>
</wml>
You want to provide option to select multiple options, then set multiple attribute to true as follows:

<select multiple="true">
<option value="htm">HTML Tutorial</option>
<option value="xml">XML Tutorial</option>
<option value="wap">WAP Tutorial</option>
</select>
</p>

This will give you a screen to select multiple options as follows:

The value attribute of the <select> tag can be used to set the default option that will be selected
initially. The <option> tag that has the same value attribute value as that of the <select> tag will be
the default option. Here is an example that shows how to specify the second option "WML Tutorial
B" as the default option:

<select name="selection_list" value="tutorial_B">

<option value="tutorial_A">WML Tutorial A</option>

<option value="tutorial_B">WML Tutorial B</option>

<option value="tutorial_C">WML Tutorial C</option>

</select>

• WML <optgroup> Tag

The <optgroup/> element is used to group various options together inside a selectable list. If a
selection list contains too many options, it may look disorganized. One possible solution to this
problem is to organize the options into various groups. An option group is defined using the
<optgroup></optgroup> tag pair. Its title attribute specifies the title of an option group
Attributes:
This element supports the following attributes:

Attribute Value Description

Title Text Sets a title for the list

Example:
Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="Selectable List">
<p>
<select>
<optgroup title="India">
<option value="delhi">Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="hyderabad">Hyderabad</option>
</optgroup>

<optgroup title="USA">

<option value="ohio">Ohio</option>
<option value="maryland">Maryland</option>
<option value="washington">Washington</option>
</optgroup>
</select>
</p>
</card>

</wml>

When a user loads above code, then it will give two options to be selected:
When a user select any of the options, then only it will give final options to be selected. So if user
selects India, then it will show you the following options to be selected:

WML <input> Element:

The <input/> element is used to create input fields and input fields are used to obtain alphanumeric
data from users.

This element support the following attributes:

Attribute Value Description

Name Text The name of the variable that is set with the result of the
user's input

maxlength Number Sets the maximum number of characters the user can enter in
the field

Emptyok • True Sets whether the user can leave the input field blank or not.
Default is "false"
• False

Format A
a
N
X
x
M
m
 *f
nf

Size Number Sets the width of the input field

tabindex Number Sets the tabbing position for the select element

Title Text Sets a title for the list

Type • Text Indicates the type of the input field. The default value is
"text". Password field is used to take password for
• Password authentication purpose.

Value Text Sets the default value of the variable in the "name" attribute

Following is the example showing usage of this element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="Input Fields">
<p> Enter Following Information:<br/>
Name: <input name="name" size="12"/>
Age : <input name="age" size="12" >
Sex : <input name="sex" size="12"/>
</p>
</card>

</wml>

This will provide you the following screen to enter required information:

Variables

WML supports variables that can hold transitional data between cards,provide custom output tailored
to individual users, and more.
Variables are special holding places for values. They can hold numeric or alpha values and their
values can be changed by code at the programmer's whim.

Variables in WML consist of words, enclosed in parentheses, prefixed

with a dollar sign ($). For example:
$(name)
$(address)
$(link)
$(target_url)
$(_method)
Note: Because the dollar sign ($) is used to signify a variable, it is a
reserved character in WML. Variable names must start with a letter or underscore. Subsequent
characters can be alpha, numeric, or underscores. Variables are case sensitve; "phone_number" is
different from "Phone_Number."

Wherever a variable is referenced, WML will substitute the value of the variable where the variable
name appears. For example, the following code:

<p>
Hello $(name)!
</p>

would produce the following result, if "David" was stored in the

variable $(name):
Hello David!

Setting Variables
Variables can be set by the following elements:
1. <input>
2. <select>/<option>
3. <setvar>

The <input> Element

The <input> element is straightforward; it accepts user input and
stores it in the variable specified. For example, the following code
would accept input for a phone number and store it in the variable
$(phone_number). The number is then displayed on the second card.

<wml>
<card id="card1" title="Enter Number">
<p>

What is your phone number?

<input name="phone_number"/>
<anchor>
<go href="#card2" />Next</anchor>
</p>
</card>

<card id="card2" title="Display Number">

<p>
Your number is:<br/>
$(phone_number)
</p>
</card>
</wml>

2. The <select> and <option> Elements

Each <option> element within a <select> can also set variables. When the user selects an option, that
option's "value" parameter is stored in the variable specified by the select's name parameter.

The following example would store the selected color's hex value in the variable "color":

<select name="color">
<option value="#FF0000">Red</option>
<option value="#00FF00">Green</option>
<option value="#0000FF">Blue</option>
</select>

For example, if the user selected "Green," the variable "color" would
be set to "#00FF00".
Note: The <select> element accepts a "value" attribute that can set a default value for the input.
However, if the variable specified has
already been assigned a value, the "value" attribute is ignored.

3. The <setvar> Element

The <setvar> serves the sole purpose of simply setting a
variable. In the following example, the variable "color" is set to
"Green":

<setvar name="color" value="Green" />

The use of <setvar> is complicated by the fact that it can only be executed upon a <go>, <prev>, or
<refresh> action. As such, you cannot simply embed a <setvar> anywhere you need to set a variable.

For example, the following code will set the appropriate variables when the user enters this card from
a forward
direction:
<card id="card1">
<onevent type="onenterforward">
<refresh>
<setvar . . . />
<setvar . . . />
</refresh>
</onevent>
Note: Unlike the other elements above, the <setvar> element sets the
value of the specified variable whether or not it has previously been
assigned a value.

WML tasks.

A WML task is an element that specifies an action to be performed by the browser, rather than
something to be displayed. For example, the action of changing to a new card is represented by a
<go> task element, and the action of returning to the previous card visited is represented by a <prev>
task element. Task elements encapsulate all the information required to perform the action.
WML provides following four elements to handle four WML tasks called go task, prev task, refresh
task and noop taks.

The <go> Task:

As the name suggests, the <go> task represents the action of going to a new card.

The <go> element supports the following attributes:

Attribute Value Description

Href URL Gives the URL of the new card. Relative URLs are resolved relative to
the current card

method • get Specifies the method that should be used to send data to the server.
When using method="get", the data is sent as an request with ? data
• post
appended to the url. The method has a disadvantage, that it can be used
only for a limited amount of data, and if you send sensitive information
it will be displayed on the screen and saved in the web server's logs. So
do not use this method if you are sending password etc.

With method="post", the data is sent as an request with the data sent in
the body of the request. This method has no limit, and sensitive
information is not visible in the URL

sendreferer • true If set to true, the browser sends the URL of the current deck along with
the request. This URL is sent as a relative URL if possible. The purpose
• false of this is to allow servers to perform simple access control on decks,
based on which decks are linking to them. For example, using HTTP,
this attribute is sent in the HTTP Referer header.

accept- charset_list Specifies a comma- or space-separated list of character sets that can
charset encode data sent to the server in a POST request. The default value is
"unknown".

Class class data Sets a class name for the element.

Id element ID A unique ID for the element.

Following is the example showing usage of <go> element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="GO Element">
<p>
<anchor>
Chapter 2 : <go href="chapter2.wml"/>
</anchor>
</p>
</card>
</wml>

Another example showing how to upload data using Get Method

<wml>
<card title="GO Element">
<p>
<anchor>
Using Get Method
<go href="chapter2.wml?x=17&y=42" method="get"/>
</anchor>
</p>
</card>
</wml>

The <prev> Task:

The <prev> task represents the action of returning to the previously visited card on the history stack.
When this action is performed, the top entry is removed from the history stack, and that card is
displayed again, after any <setvar> variable assignments in the <prev> task have taken effect.

If no previous URL exists, specifying <prev> has no effect.

The <prev> element supports the following attributes:

Attribute Value Description

class class data Sets a class name for the element.

id element ID A unique ID for the element.

Following is the example showing usage of <prev> element.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="Prev Element">
<p>
<anchor>
Previous Page :<prev/>
</anchor>
</p>
</card>
</wml>

One situation where it can be useful to include variables in a <prev> task is a login page, which
prompts for a username and password. In some situations, you may want to clear out the password
field when returning to the login card, forcing the user to reenter it. This can be done with a construct
such as:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card title="Prev Element">
<p>
<anchor>
<prev>
<setvar name="password" value=""/>
</prev>
</anchor>
</p>
</card>
</wml>

The <refresh> Task:

The <refresh> task is the simplest task that actually does something. Its effect is simply to perform
the variable assignments specified by its <setvar> elements, then redisplay the current card with the
new values. The <go> and <prev> tasks perform the same action just before displaying the new card.

The <refresh> task is most often used to perform some sort of "reset" action on the card.
The <refresh> element supports the following attributes:

Attribute Value Description

Class class data Sets a class name for the element.

Id element ID A unique ID for the element.

Following is the example showing usage of <refresh> element.

<wml>

<card title="Referesh Element">

<p>
<anchor>
Refresh this page:
<go href="test.wml"/>
<refresh>
<setvar name="x" value="100"/>
</refresh>
</anchor>
</p>
</card>
</wml>

The <noop> Task: The purpose of the <noop> task is to do nothing (no operation).The only real use for
this task is in connection with templates
The <noop> element supports the following attributes:

Attribute Value Description

class class data Sets a class name for the element.

id element ID A unique ID for the element.

Following is the example showing usage of <noop> element.

<wml>
<card title="Noop Element">
<p>
<do type="prev" label="Back">
<noop/>
</do>
</p>
</card>
</wml>

WML - Images
The <img> element is used to include an image in a WAP card. WAP-enabled wireless devices only
supported the Wireless Bitmap (WBMP) image format.

WBMP images can only contain two colors: black and white. The file extension of WBMP is
".wbmp" The <img> element supports the following attributes:

Attribute Value Description

Align • top Alignment of the image

• middle
• bottom

Alt alternative text Sets an alternate text to be displayed if the image is not
displayed.

Height • px Height of the image in pixels or percentage. If you

specify the value in pixels, the syntax is "140", instead of
• %
"140px".

Hspace • px Sets white space to the left and right of the image. If you
specify the value in pixels, the syntax is "140", instead of
• %
"140px".

Src image url A path to wbmp image.

Vspace • px Sets white space above and below the image. If you
specify the value in pixels, the syntax is "140", instead of
• %
"140px".
Width • px Sets the width of the image.If you specify the value in
pixels, the syntax is "140", instead of "140px".
• %

xml:lang language_code Sets the language used in the element

class class data Sets a class name for the element.

id element ID A unique ID for the element.

How to Make ".wbmp" Images

There are free tools available on the Internet to make ".wbmp" images.

The Nokia Mobile Internet Toolkit (NMIT) comes with a WBMP image editor that you can use. You
can convert existing GIF or JPG image files into WBMP file using NMIT.

Another free tool is ImageMagick, which can help you to create WBMP images.

Following is the example showing usage of <img> element.

<?xml version="1.0"?>
<wml>

<card title="WML Images">

<p>
This is Thumb image
<img src="/images/thumb.wbmp" alt="Thumb Image"/>
</p>

<p>
This is Heart image
<img src="/images/heart.wbmp" alt="Heart Image"/>
</p>

</card>

</wml>

This will produce the following result:

WML Events and the <onevent> Tag (imp)

WML supports events and it provides a tag pair, <onevent></onevent>, for handling events. You can
specify an action to be taken whenever an event occurs. Four events are supported in WML.

1. ontimer -- This event occurs when a timer expires.

2. onenterbackward -- This event occurs when a user goes back to a card through the WAP
browser's URL history.

3. onenterforward -- This event occurs when a user goes to a card in the forward direction. For
example, if a user goes to a card by entering its URL directly in the WAP browser,
the onenterforward event will be triggered.

4. onpick -- This event occurs when an item of a selection list is selected or deselected.

The <onevent></onevent> tags are used to create event handlers. Its usage takes the following form:

<onevent type="event_type">
A single task to be done whenever the event occurs
</onevent>

Tasks that are allowed to be placed between the <onevent> and </onevent> tags include <go>, <prev>
and <refresh>.

1. Timer and the ontimer Event

The ontimer event is used together with timers. To add a timer in WML, you need the <timer/> tag.
Its value attribute specifies the period of time after which the timer will expire. The time unit is 1/10
second. For example, the following WML markup:

<timer value="10"/>

defines a timer that will expire after 1 second.

The ontimer event occurs when a timer expires and the WML code associated with the event will be
executed.

Timers will be particularly useful to you if you want to develop a mobile Internet application that
provides real-time information to users. You can add a timer to refresh the content of a card regularly
so that the information on the card can be kept updated without involving any user actions. The
following WML example demonstrates how to instruct the WAP browser to refresh a card
automatically every 5 seconds:

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

<wml>
<card id="card1" title="Timer in WML">
<onevent type="ontimer">
<go href="ontimerEg1.wml"/>
</onevent>
<timer value="50"/>

<p>
WML Timer Test
</p>
</card>
</wml>

2. Onenterbackward event

This event occurs when the user hits a card by normal backward navigational
means. That is, user presses the Back key on a later card and arrives back at
this card in the history stack.

Here is the syntax to define an event handler for onenterbackward event:

<onevent type="onenterbackward">
A task to be performed.
</onevent>

Example:
Following is the example showing how onenterbackward event occurs whenever
you try to go back from second card to first card and defined event handler
takes you to card number three instead of card number 1. Copy and paste this
program and try to play with it to understand onenterbackwardevent type.

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card id="card1" title="Card 1">
<onevent type="onenterbackward">
 <go href="#card3"/>
</onevent>
<p>
<anchor>
<go href="#card2"/> Go to card 2
</anchor>
</p>
</card>
<card id="card2" title="Card 2">
<p> <anchor>
<prev/> Going backwards </anchor>
</p>
</card>
<card id="card3" title="Card 3">
<p>
Hello World!
</p>
</card>
</wml>

When you load this program you will get the following screen:

Now, press option Go to card 2 to go to the second card this will take you to the
following screen:
Now, you are on second page. Now, when you try to go back on card number
onenterbackward event is executed and it takes you on card number 3 instead
of card number 2 and you see following screen.

3. WML <onenterforward> Tag

The onenterforward event is triggered when a user goes to a card in the forward direction. For
example, if you go to a card by entering the URL directly or by following an anchor link of which
the action is <go>, the onenterforward event will be triggered and the WML code associated with the
event will be executed.

The onenterforward event will be useful to you if you want to do something before a card is
displayed. For example, you need the onenterforward event if you want to assign a value to a
variable before a card is displayed.

Here is the syntax to define an event handler for onenterforward event:

<onevent type="onenterforward">
A task to be performed.
</onevent>

Example:
Following is the example showing how onenterbackward event occurs whenever you try to go on
second card from the first card and defined event handler takes you to card number three instead of
card number 2. Copy and paste this program and try to play with it to
understand onenterforward event type.

<wml>
<card id="card1" title="Card 1">
<p>
<anchor>
<go href="#card2"/> Go to card 2 </anchor>
</p>
</card>
<card id="card2" title="Card 2">
<onevent type="onenterforward">
<go href="#card3"/>
</onevent>
<p> This is card 2
</p>
</card>
<card id="card3" title="Card 3">
<p>Hello World!</p></card>
</wml>

When you load this program you will get the following screen:

Now, press option Go to card 2 to go to the second card, because of this onenterforward event will
occur and it will take on card number 3 instead of card number 2 and you will see the following
screen:

4. The onpick event is used together with the <option></option> WML tags, which are used to
specify an item of a selection list.

The onpick attribute is a great shortcut if you are using a select menu. Instead of writing a lot of code
that allows the user to go to another card if an option is selected, you can simply place the
destination into the onpick attribute. Here is a code fragment without the onpick attribute:

Example:
Following is the example showing usage of onpick attribute along with <option> element.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card id="tutorials" title="Main Menu">
<p>
Select a tutorial :
<select title="tutorials" name="selection_list">
<option onpick="#xhtml">XHTML Tutorial</option>
<option onpick="#wap">WAP Tutorial</option>
</select>
</p>
</card>
<card id="xhtml" title="XHTML Tutorial">
<p>
Go through our XHTML tutorial
</p>
</card>

<card id="wap" title="WAP Tutorial">

<p>
Go through our WAP tutorial
</p>
</card>
</wml>

When you load this program, it shows you the following screen:

Now, highlight the dropdown box and select it. It will give you two options as follows:
When you load this program, it shows you the following screen:

Now, assume you select WAP Tutorial from the list, then it will display the following screen:

<do> tag

Now let us introduce to you another useful element in WML -- the <do> element. The <do> element
is used to associate a task to a certain user interface element of a wireless device. The task will be
done if the user activates the user interface element. The mapping between a <do> element and a user
interface element depends on the actual wireless device. The WAP specification states that the user
interface element may be a softkey, a function key, a voice-activated command, etc. In mobile
phones, <do> elements are very often associated to softkeys or items in the options menu that is
brought up by pressing a softkey. To program softkeys of mobile phones, we need to know how to use
the <do> element.

The <do> element is not difficult to use. Tasks such as <go>, <prev> and <refresh> are enclosed in
the <do></do> tags. The name attribute of <do> specifies a unique name to a <do> element.
The label attribute specifies the label to be displayed on the wireless device's screen (if applicable).
The type attribute of the <do> element is mandatory. It specifies which type of user interface element
should be associated to a <do> element. Some commonly used attribute values
are accept, options and prev.

If the type attribute value is accept, the <do> element is associated to a user interface element that can
provide a way for the user to accept some kind of action. The ACCEPT element is usually the left
softkey in mobile phone browsers, since the left softkey is used as the "Yes" or "OK" softkey
typically. The table below gives some descriptions of how ACCEPT elements are presented on some
mobile phone emulators:

Mobile phone emulators Descriptions of the ACCEPT element

Nokia Mobile Browser 4.0 If you press the Options softkey on the left, you
will see all the ACCEPT elements.

Openwave Mobile Browser 6.2.2 The first ACCEPT element becomes the left
softkey.

If there are two ACCEPT elements, the second

one becomes the right softkey.

If there are more than two ACCEPT elements, the

right softkey will be labeled as Menu. You can
see the second to the nth ACCEPT elements if
you press theMenu softkey, where n is the total
number of ACCEPT elements.

Sony Ericsson T610 mobile phone If you press the More softkey on the right, the
options menu is opened and you can see all the
ACCEPT elements there.

Sony Ericsson T68i mobile phone If you press the "Options menu" button (located
between the Yes button and the 1 button), the
options menu is opened and you can see all the
ACCEPT elements there.

If the type attribute value is options, the <do> element is associated to a user interface element that
can provide users further options or operations to choose from. Very often WAP browsers place the
OPTIONS elements in an options list and they provide a certain way for you to bring up the options
list, such as pressing a softkey or a physical button.

The following WML example demonstrates how to define <do> elements in a card. We define four
<do type="accept"> elements in the markup below to provide users an additional way to navigate
between cards besides using anchor links. We also define a <do type="prev"> element to change the
label of the "Back" softkey of Nokia Mobile Browser 4.0.
<wml>

<card>

<p> Cart:<br/> Jungle Book <br/>

<a href= “#card2”> Checkout</a>

</p></card>

<card id= “card2”>

<do type= “accept” label=”Buy it”>

<go href=”#card3”/>

</do>

<do type =”prev” label =”cancel”>

<prev/>

</do>

<p> confirm sale </p></card>

In many web sites, the most commonly used links are grouped together in a menu and placed on the
left side or at the top of the web pages. Users can navigate between the web pages conveniently with
such kind of menu.

In WML, we can use the <do> element to create similar menus, which contain the most important and
commonly used links of a mobile Internet site. What we need to do is to make the <do> elements
accessible on all cards. One way is to include the same <do> elements in every card, like this:

<card id="card1">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>

<card id="card2">
 <do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>

<card id="card3">
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</card>

Obviously, the above way has many drawbacks. For example, it increases the size of the WML
document rapidly and thus increases the download time. Also, if we want to change the menu, we
need to make changes to every WML card.

A better way is to define deck-level <do> elements using the <template> element. Deck-level <do>
elements are enclosed within <template></template>. WAP browsers will apply the <do> elements in
a template to all cards in a deck.

With the <template> tag, the previous WML markup can be rewritten as follows:

<template>
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</template>

<card id="card1">
...
</card>

<card id="card2">
</card>

<card id="card3"> ...

</card>
<wml>
<card id="tutorial_tc" title="WML Tutorial">
<do name="a1" type="accept" label="Chapter 1">
<go href="#tutorial_ch1"/>
</do>
<do name="a2" type="accept" label="Chapter 2">
<go href="#tutorial_ch2"/>
</do>
<do name="a3" type="accept" label="Chapter 3">
<go href="#tutorial_ch3"/>
 </do>
<do name="a4" type="accept" label="Chapter 4">
<go href="#tutorial_ch4"/>
</do>
<do name="goBack" type="prev" label="Go Back">
<prev/>
</do>

<p>
Hello, welcome to our WML tutorial.<br/><br/>
Table of Contents:<br/>

<anchor>
<go href="#tutorial_ch1"/>
Chapter 1: WML Introduction
</anchor><br/>

<anchor>
<go href="#tutorial_ch2"/>
Chapter 2: WML Deck and Card
</anchor><br/>

<anchor>
<go href="#tutorial_ch3"/>
Chapter 3: WML Document Structure
</anchor><br/>

<anchor>
<go href="#tutorial_ch4"/>
Chapter 4: WML Generic Metadata
</anchor><br/>
</p>
</card>

<card id="tutorial_ch1" title="WML Tutorial Ch1">

<p>
<em>Chapter 1: WML Introduction</em><br/><br/>
...
</p>
</card>

<card id="tutorial_ch2" title="WML Tutorial Ch2">

<p>
<em>Chapter 2: WML Deck and Card</em><br/><br/>
...
 </p>
</card>

<card id="tutorial_ch3" title="WML Tutorial Ch3">

<p>
<em>Chapter 3: WML Document Structure</em><br/><br/>
...
</p>
</card>

<card id="tutorial_ch4" title="WML Tutorial Ch4">

<p>
<em>Chapter 4: WML Generic Metadata</em><br/><br/>
...
</p>
</card>
</wml>

Template

<template>
<do name="a1" type="accept" label="link 1">
<go href="link1.wml"/>
</do>
<do name="a2" type="accept" label="link 2">
<go href="link2.wml"/>
</do>
...
</template>

<card id="card1">
...
</card>

<card id="card2">
...
</card>

<card id="card3">
...
</card>