WML

(Wireless Markup Language)

Features:
• Text and Images
• User Interaction
• Navigation
• Context management
Program Structure
Example 1-1
<?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="First WML Example">
<p>Hello, World!</p>
</card>
</wml>

The first two lines are known as Prolog. 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 /
Output
XML Declaration and Character Encoding

<?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.

<!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 element should be enclosed
in the <wml></wml> tag pair.
<card> element
• Specifies the content of the card
Example: <card id="card1" title="WML Tutorial">
• Attributes: id and title
• Text cannot be directly enclosed in the <card></card> tag pair.
• One card displayed at a time
• Several cards can be stored in a deck in the same file
• Cards in a deck are all downloaded at the same time
Empty-Element tags :
Example 1-2. 
• <?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="Another WML Example">
• <p><img src="img/pic.wbmp" alt="Image"/></p>
• </card>
• </wml>
Empty-Element tags :
• an empty element is an element that is complete by
itself; it never contains other elements.
• rather than being composed of a start tag, data, and
an end tag, the empty element is a combined start and
end tag.
• required in WML whenever a tag has no matching end-
tag
Elements
• element takes one of two forms: either a start-tag and
an end-tag (whose types must match):
Example: <tag> . . . </tag>
• An element can contain other elements (either matched
pairs or empty-element tags)
Example: <x>...<y>...</y>...</x>
• important to ensure the tags match properly
• mismatching tags result in errors
Attributes
• Attributes affect the behavior of the whole element
• effects of attributes vary between different elements: the title
attribute on the <card> element sets an optional title to be displayed
with the card, while the src attribute on the <img> element gives the
URL at which the image can be found.
• You can also add an align="center" attribute to the <p> element,
which centers that paragraph of text .
Comments
• comment starts with the four characters <!-- and ends with the three characters -->
• Everything that appears between these two markers, including tags, body text, entities, and line
breaks, is ignored
• Example:
1. <!-- A simple comment. -->
2. <!--This is a
comment that
spans several lines.-->
• You can’t nest comments. The following doesn’t work:
<!-- A simple <!-- EMBEDDED COMMENT, NOT! --> comment. -->
WML Variables and Contexts
• WML allows use of variables
• Case-sensitive
• variables contain strings, and these strings can be
inserted into the body text of the WML document or
into the values of certain attributes
• Variables can be created and set using several different
methods. Following are two examples:
1. The <setvar> element
2. The <input> element
WML Variables and Contexts
1. the following element would create a variable named a with a
value of 1000:
<setvar name=“a” value=“1000”/>

2. the following element would create a variable named b:

<select name=“b”>
<option value=“value1”>Option 1</option>
<option value=“value2”>Option 2</option>
</select>
Variable Substitution
• Variables can be inserted into the text body or attributes in one of the
3 ways:
1. $name
2. $(name)
3. $(name:conversion)
Example: The following deck includes a card which sets the value of two variables when the
user presses ACCEPT. A second card displays the variable values

<wml>
<card>
    <do type="accept">
        <go href="#viewvalues">
            <setvar name="var1" value="value 1"/>
            <setvar name="var2" value="value 2"/>
        </go>
    </do>
  <p>
    Press OK to view variable values.
  </p>
</card>
<card id="viewvalues">
   <p>
    $var1<br/>
    $var2
   </p>
</card>
</wml>
Result:
Example: A WML deck with two cards - one for user input and one for
displaying the result

<?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="card1" title="Tutorial">
<do type="accept" label="Answer">
<go href="#card2"/>
</do>
<p>
<select name="name">
<option value="HTML">HTML Tutorial</option>
<option value="XML">XML Tutorial</option>
<option value="WAP">WAP Tutorial</option>
</select>
</p>
</card>
 
<card id="card2" title="Answer">
<p>
You selected: $(name)
</p>
</card>
 
</wml>
Result :
Result :
Example explanation:
Example explanation:
The <do> element
<do> ... </do>
The first card has a <do> element that defines an event to be triggered.
The type="accept" attribute of the <do> element causes the label="Answer" to be
displayed in the lower left corner of the display.
The Event
The <go> element triggers when the user clicks the <do> label.
The href="#card2" attribute of the <go> element causes card2 to be displayed on the
screen.
The Variable
Card2 displays the $(name) variable from card1, because variables are valid across
cards.
Tasks
• an element that specifies an action to be performed by the browser,
rather than something to be displayed
• WML provides following four elements to handle four WML tasks
called go task, prev task, refresh task and noop task.
The <go> Task
• represents the action of going to a new card.
Attributes:
1. Href
2. Method
3. Sendreferer
4. Accept-charset
5. Class
6. id
The <go> task
<?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>
The <prev> Task:
• Represents the action of returning to the previously visited card on
the history stack
• If no previous URL exists, specifying has no effect
• Most commonly used in a connection with <do> element
Attributes:
1. Class
2. id
The <prev> Task:
<?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>
The <refresh> task
• 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.
• most often used to perform some sort of "reset" action on the card.
Attributes:
1. Class
2. id
The <refresh> task
<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
Attributes:
1. Class
2. Id
The <noop> task
<wml>
 
<card title="Noop Element">
 
<p>
 
<do type="prev" label="Back">
 
<noop/>
 
</do>
</p>
 
</card>
 
</wml>
Events
• An event in WML is simply something that can happen to some
element from time to time.
• When something happens in a computer system, the system
itself has to 
(1) detect that something has happened and 
(2) know what to do about it.
Events
WML supports following four event types:

1. Onenterforward
2. Onenterbackward
3. Onpick
4. ontimer
WML <onevent> element
• The <onevent>...</onevent> tags are used to create event
handlers.
• Its usage takes the following form:

<onevent type="event_type">
A task to be performed.
</onevent>
WML <onevent> element
The <onevent> element supports the following attributes:
1. Type - can take following values:
a) onenterbackward
b) onenterforward
c) onpick
d) Ontimer
2. Class
3. Id
Example of <onevent> element:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
 
<wml>
<onevent type="onenterbackward">
<go href="#card3"/>
</onevent>
 
<card id="card1" title="Card 1">
<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>
<onenterbackward>
<?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>
Result:
• When you load this program, you will get the following screen:
Result:
• Now, press option Go to card 2 to go to the second card this will
take you to the following screen:
Result:
• 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
the following screen.
<onenterforward> element
<?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">

<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>
Result
• When you load this program, you will get the following screen:
Result
• 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:
<onpick> attribute
<?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>
Result
• When you load this program, it shows you following screen:
Result
• Now, highlight the dropdown box and select it. It will give you
two options as follows:
Result
• Now, assume you select WAP Tutorial from the list, then it will
display the following screen:
<ontimer> event
<onevent type="ontimer">
A task to be performed.
</onevent>
<timer value="50"/>
<ontimer> event
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">

<wml>

<card id="splash" title="splash">

<onevent type="ontimer">
<go href="#welcome"/>
</onevent>
<timer value="50"/>
<p>
<a href="#welcome">Enter</a>
</p>
</card>

<card id="welcome" title="Welcome">

<p>
Welcome to the main screen.
</p>
</card>
</wml>
Result
When you load this program, it shows you the following screen:
Result
• If you do not select given Enter option, then after 50 seconds
you will be directed to Welcome page and following screen will
be displayed automatically.