WML, Wireless Markup Language

WML is a form of Extensible Markup Language, and as
such, has to conform to the well formedness rules of XML.

Basic Rules of Form

• WML is case sensitive
• Elements and attributes are all in lowercase
• All tags must have closing tags
• Tags must be nested correctly
• attribute values are enclosed in single or double quotes.

A WML document corresponds to a valid Document Type
Definition (DTD) which describes the different types that are
available for use in the language.  Following is the declaration
that is used.

WML DTD

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">

A page on a device is referred to as a card. A card
is an element in WML that has an id and a title attribute.
A document can have multiple cards.

The id provides the card with a name and acts
as an anchor for navigation purposes. 

Example

<card id="intro"    title="WML Overview">
  <!-- Card Contents -->
</card>


The <go> Element


The go element acts like HTML's anchor tag.
It has the following attributes.

The <go> Element Attributes

• href
  
• method

The following example shows that the <go> element
has the ability to be used in conjunction with the
HTTP protocol to do POST methods.

 Example

<go href="#ACard" method="post">
    <postfield name="usrname" value="$usr"/>
    <postfield name="account" value="$acct"/>
</go>

// GET is the default but if postfields are used POST is invoked

In the following example, a card is referenced from
within the same deck. ( Note the use of the '#' symbol.)
This use of the # symbol is called a 'fragment anchor'
in HTML.

Example

<go href="#intro"/>



A card in a different deck can be referenced by
prefixing the the name of another wml page.

Example

<go href="deckname.wml#intro"/>

// As in URL format, http://server[:port]/[path/][file][#cards]

There are a number of attributes available for use
with the Card Element.

Card Element Attributes

• newcontext
•  // resets variables & history
  
• onenterbackward
  
• // navigate backwards
  
• onenterforward
•  // navigate forwards
  
• ontimer
•  // specifies URI when timer expires
  
• title
• // some devices display titles

Linking With <a>   vs   <go>

In the above example the wml <go> element was
used. The <a> anchor tag is also recognized in WML.
 
Rationale for Introducing <go>

Dave Sims, in 'Start Coding WML' questions why the
authors of WML introduced the <go>. The rationale is
that 'go' is a common concept in many languages and
provides a better description of what is happening.

Following is an absolute link to a wml page using
the <a> tag. 


Absolute Link Example

<a href="http://www.sentex.net/index.wml">The World of WML</a>

The following example contains three cards with 'in-document'
links to navigate between the cards using the <a> tag.

links.wml
// from Wireless Markup Langauge (WML) Tutorial, Gez Lemon

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<!-- root card    -->
<card id="index" title="Index Page">
<p>
    <a href="#first">First Link</a><br/>
    <a href="#second">Second Link</a><br/>
    <a href="#third">Third Link</a>
</p>
</card>
<!-- first card    -->
<card id="first" title="First Card">
<p>
    This is the first card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
<!-- second card    -->
<card id="second" title="Second Card">
<p>
    This is the second card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
<!-- third card    -->
<card id="third" title="Third Card">
<p>
    This is the third card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
</wml>



The following example shows anchors nesting go,
prev and refresh tasks. The <prev> element returns
to a previous page. The <go> element goes to a url.
While the syntax is different the code is similar in it's
effect to the previous example.

anchor.wml
// from Wireless Markup Langauge (WML) Tutorial, Gez Lemon

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="index" title="Index Page">
<p>
    <anchor>First Link<go href="#first"/></anchor><br/>
    <anchor>Second Link<go href="#second"/></anchor><br/>
    <anchor>Third Link<go href="#third"/></anchor>
</p>
</card>
<card id="first" title="First Card">
<p>
    This is the first card.<br/>
    <anchor>Back to Index<prev/></anchor>
</p>
</card>
<card id="second" title="Second Card">
<p>
    This is the second card.<br/>
    <anchor>Back to Index<prev/></anchor>
</p>
</card>
<card id="third" title="Third Card">
<p>
    This is the third card.<br/>
    <anchor>Back to Index<prev/></anchor>
</p>
</card>
</wml>

Associating Cards With Buttons With the <do> Element

Following is an example of two cards that link to each
other. As well, references are associated with device
buttons.

Most devices include two default buttons, an 'Accepts'
button and an 'Ends' button. In the following example,
the Accept button is used in association with a set of
cards. Notice this is achieved using the <do> element.

The following code can be loaded into an emulator to
demonstrate these actions. This also works in Mozilla's
WML browser.


Button Code Using <do>
// from 'Start Coding WML', David Sims, O'Reilley

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
 "http://www.wapforum.org/DTD/wml_1.2.xml">
  <wml>
    <card id="card1">
      <do  type="accept" label="Next">               
      <go  href="#card2"/>
      </do>
      <p>
      Here's the first card.
      </p>
    </card>

    <card id="card2">
      <do  type="accept" label="Next">
      <go  href="#card3"/>
      </do>
      <p>
      Here's the second card.
      </p>    
    </card>

    <card id="card3">
      <do  type="accept" label="Back">
      <go  href="#card1"/>
      </do>
      <p>
      Here's the third card.
      </p>
    </card>
  </wml>


The <do> Element

The <do> element provides a way to assign values
and attributes to a function. This is a common notion
in computer programming but one which is not found
in HTML.

WML Tasks and the <do> Element

Earlier we saw in Dave Sim's paper how to
associate actions with device buttons. Following
a summary of the attributes of the <do> element.

The do Element Attributes

• accept // positive ack
  
• delete // remove option
  
• help // help option
  
• options // list of options
  
• prev // nav to previous card
  
• reset // reset device state
  
• unknown // no type defined
  
• label // label names a task
  

The <do> element is applied to a card or a deck
of cards. Tasks respond to events like a button
click. Buttons available will depend on the device
in question.



Binding Tasks to <do> Elements

Every <do> must have a task bound to it one
of the following.

Tasks

• go
  
• noop // no operation, does nothing
  
• prev
• refresh // used to renew variable values

In the following example a <do> element has a
<prev> task bound to it.

Example of a Binding

<do type="prev" label="BACK">
    <prev/>
</do>

The refresh tag needs to have at least one variable
specified with the <setvar> element.

 Example

<refresh> <setvar name="zone" value="Pacific"></refresh>

The 'ontimer' attribute may be set to a time after which
the timer element automatically moves to a new card.
Time is specified in intervals of 100 milliseconds. Five,
therefore, is half a second.

Students from the first turn at the course pointed out
to me that the value assigned to the timers 'value'
attribute acts like a counter. Therefore you need to
offset the second use of the value attribute. In the
following example, the value starts at 40 which is
equivalent to 4 seconds. It is set to 80 in the subsequent
card to trigger a response after 4 more secords.

Timer Example


<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="one" title="Beginning" ontimer="#two">
<timer value="40"/>
<p align="center">
    Begin!<br/>
    <big>Four</big><br/>
    
</p>
</card>
<card id="two" title="Middle" ontimer="#three">
<timer value="40"/>
<p align="center">
    Rest<br/>
   Eight
</p>
</card>
<card id="three" title="End">
<p align="center">
    Done<br/>
  Twelve
</p>
</card>
</wml>

The <template> Element

The template element is used to apply events at
a global, whole deck level rather than to individual
cards. It also provides a mechanism to apply tasks
on certain events. The element has the following
form.

The Form of the <template > Tag

<template>
..<do>..
..<onevent>..
</template>

The element has the following attributes, some of
which we have seen used in other contexts.


The <template> Element Attributes

• onenterbackward
• onenterforward
• ontimer
• class
• id

Following is a W3C school's example. This is nice
sample showing the use of hyperlinks in conjunction
with buttons.


W3C Schools Template Example

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

<wml>
<template>
 <do type="prev" label="Back">
  <prev/>
 </do>
</template>

<card id="card1" title="Card 1">
<p>
 <a href="#card2">Go to Card 2</a>
</p>
</card>

<card id="card2" title="Card 2">
<p>
 <a href="#card3">Go to Card 3</a>
</p>
</card>

<card id="card3" title="Card 3">
<p>
 Hello World!
</p>
</card>
</wml>

The onevent Element

We saw the onevent element may be nested inside
the template element. It adds a couple of attributes.
The 'onpick' attribute allows actions to proceed from
selections from a select element.

The <onevent> Element Attributes

• onenterbackward
• onenterforward
• onpick
• ontimer

The <input> Element

The <input> element provides a mechanism to capture
text. The element has the following attributes.

The <input> Element Attributes

• name // required attribute
  
• emptyok // boolean, is empty, (is OK)
• format
• maxlength
• size // size of field
  
• title // sometimes used in a tooltip
  
• type  // text or password
  
• value // supply a default
  

Example

<input type="text" name="key" emptyok="false"/>

Formatting the Input

There is a number of formats that may be used
in different combinations.

Formats with Symbols

• A // uppercase character
• a  // lowercase character
• N  //  number (0 - 9)
• X  // uppercase character or number
• x   // lowercase character or number
• M // uppercase character changeable to lowercase or number
• m  // lowercase character changeable to uppercase or number

A number prefix will limit the number of characters
that may be provided.


Example

format = "8N"

// limits to 8 number digits


Example

format =*X;

// wild cards any number of uppercase characters or number digits
 

Example

<input type="password" name="username" value="guest"/>

The <select> Element

The select element allows choosing one or more
items from a list. If the 'multiple' attribute is selected
multiple values may be selected.

The <select> Element Attributes

• multiple // set to true or false
  
• name // name of variable to store selection under
  
• title
• value

The <select> element is exampled below, after
discussing two more elements.

The <option> Element

In the above W3C example we see options nested
inside a <select element >The option element is used
choices for the <select> element.

Option Groups

The optgroup element lets options be specified in
groups so they are more manageable. The following
example shows this syntax. In the Mozilla WML browser
the grouping effect is not evident.

OptGroup Example
// from Wireless Markup Langauge (WML) Tutorial, Gez Lemon,

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
    "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="start" title="Choose Food">
<do type="accept" label="Juicy Studio">
    <go href="#index"/>
</do>
<p>
    What would you like to eat:
    <select name="food">
        <optgroup title="Poultry">
            <option value="Chicken">Chicken</option>
            <option value="Duck">Duck</option>
        </optgroup>
        <optgroup title="Meat">
            <option value="Lamb">Lamb</option>
            <option value="Beef">Beef</option>
        </optgroup>
    </select>
</p>
</card>
<card id="index" title="Juicy Studio">
<p>
    You want to eat $food
</p>
</card>
</wml>



Other Tags

See Gez Lemon's WML Tutorial for information on
the fieldset element and meta tags.

Variable Escaping

Similar to PHP, variables are 'escaped', in WML using
the dollar sign. That is the value associated with the
variable is referenced.

The following W3C Example shows the select element
as well as capturing a value and showing it in another
card. (This didn't work in the Mozilla WML Browser but
I am going on faith that it would work on a emulator that
supported WML. )

W3C Variable Example

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

Above the select element was used. The following