Wireless Markup Language (WML) Tutorial

Working with Cards

Each page on the device is called a card, and should contain an id, and a title attribute. A WML document may consist of a single card, or multiple cards.

Attributes for Cards
Attribute Description

id

The name of the card. This attribute acts as an anchor for navigating to the card. The name of the following card is "start".

<card id="start" title="Juicy Studio">
  <!-- Content of card -->
</card>

The card may be linked to from the same deck with:

<go href="#start"/>

If the card is in a different deck, the card may be linked to with:

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

If the card is the first card in the other deck, the card name may be omitted.

<go href="deckname.wml"/>

newcontext

Determines whether or not a new context is initialised. If a new context is set, all variables are reset and the history stack is cleared. The possible values for this attribute are true or false.

<card id="start" title="Juicy Studio" newcontext="true">
    <!-- Content of card -->
</card>

onenterbackward

Allows you to specify a URI to open if the card has been navigated to through a prev task.

<card id="start" title="Juicy Studio" onenterbackward="#main">
    <!-- Content of card -->
</card>

onenterforward

Allows you to specify a URI to open if the card has been navigated to through a go task.

<card id="start" title="Juicy Studio" onenterforward="#intro">
    <!-- Content of card -->
</card>

ontimer

Specifies the URI to open if the timer expires.

<card id="start" title="Juicy Studio" ontimer="#nextcard">
    <!-- Content of card -->
</card>

See Working with Timers for more information on this attribute.

title

The title used for the card. Some devices display the title on the screen if there is enough space.

<card id="start" title="Juicy Studio">
    <!-- Content of card -->
</card>

Linking Cards

The id attribute is used to identify the name of the card to link to. There are three ways of specifying a link to another card. An absolute link contains the full path to the page, and is typically used to link to other WAP sites. A relative link contains the name of the WML file, either in the same directory, or with the relative path from the current directory. For WML documents that contain more than one card, you can provide an in-document link, which uses the card id to locate the card. The first set of examples use the a element to produce the link. The anchor element is introduced at the end of this page.

Absolute Link

<a href="http://www.juicystudio.com/index.wml">Visit Juicy Studio</a>

Relative Link

<a href="recent.wml">Recent Posts</a>

In-Document Link

<a href="#announce">Announcements</a>

Relative Link to a Particular Card

<a href="recent.wml#today">Recent Posts</a>

The following example is a WML document that contains three cards with in-document links to navigate between the cards.

links.wml

<?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>
    <a href="#first">First Link</a><br/>
    <a href="#second">Second Link</a><br/>
    <a href="#third">Third Link</a>
</p>
</card>
<card id="first" title="First Card">
<p>
    This is the first card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
<card id="second" title="Second Card">
<p>
    This is the second card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
<card id="third" title="Third Card">
<p>
    This is the third card.<br/>
    <a href="#index">Back to Index</a>
</p>
</card>
</wml>

Output From Program

The following shows the original page, following the link to the first card.

The image shows the screen of a mobile phone with the output from the program.

The anchor Element

The anchor element extends the a element to perform a go, prev, or refresh refresh task. We'll use the refresh element later when we start to use variables in WMLScript. The go element is used to specify the URI, and the prev element is used to return to the previous page. The prev element is particularly useful, as it if there were several ways to end up at the page, they're always taken back to the page they come from. The following example is the previous example re-written to use anchor element.

anchor.wml

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

The output of running the above program is exactly the same as the previous program.

You might also like...

Comments

About the author

Gez Lemon United Kingdom

I'm available for contract work. Please visit Juicify for details.

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“Computer science education cannot make anybody an expert programmer any more than studying brushes and pigment can make somebody an expert painter” - Eric Raymond