BlackBerry
Skip Top Navigation
Developers Partners
North America [change region] Products Solutions Purchasing Support
Developers


BlackBerry Developer Journal

WML 101

Richard Evers, Editor

The Wireless Markup Language (WML) is an easy to learn and lightweight language designed to develop Wireless Application Protocol (WAP) applications for lightweight devices. It has become a standard that is supported by most wireless browsers. This article focuses on WML development and covers most features of the language in a style that will encourage rapid learning.

Topics within this section include:

The Basics

A WML file (or page) is called a deck, and modules within the deck are called cards. Cards can contain 'href' links to other cards, URLS, telephone numbers, email addresses and WMLScript functions that are within external files.

As with XML, all WML tags and attributes must be provided in lower-case form.

All WML scripts begin with this mandatory WML header:

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

... and are wrapped between the start WML tag:

<wml>

... and the end WML tag:

</wml>


Note: all code snippets to follow must be wrapped between WML tags and include the WML header to work.

The following illustrates the basic construct of a WML page:

<card id="Hello">
  <p>
    &quot;Hello, ... <br/>
    ... World!&quot;
  </p>
</card>

Metaphorically, a WML page is a 'deck' of 'cards'. In this case, there is one card in the deck.

In the code above:

  • The card is given an identifier of "Hello"
  • A new <p>aragraph is started
  • The phrase "Hello, ..." is displayed on one line, prefixed with a double-quote (&quot;) and terminated with a self-terminating line feed (<br />). Note that &quot; and <br /> are included to demonstrate use.
  • The phrase "... World!" is displayed on the next line, suffixed with a double-quote.
  • The next two lines close off the </p>aragraph and </card>.

HTML programmers will find it fairly easy to develop WML pages. The key things to remember are that WML requires use of lower-case tags and attributes, and each opening tag must have a matching closing tag.

<card id="CoolQuote">
  <p>
    &quot;In the extraordinary transformation of heat to light, Gibbon rested...&quot;
  </p>

  <p>
    <br />
    <i>
      From the introduction to Edward Gibbon's
      &quot;Decline and Fall of the Roman Empire&quot;
    </i>
  </p>
</card>

Exploring Specific Features of WML

Aligning Paragraphs

Paragraphs can be left, right and center aligned as follows:

<p align="left"></p>
<p align="right"></p>
<p align="center"></p>

The example below shows how to right-align monetary values. Note that '$' is a reserved character to identify variables. By escaping through '$$', a single '$' will be displayed.

<card id="Alignment" title="Right">
  <p align="right">
    DVD $$19.95<br />
    CD $$9.95<br />
    Player $$119.95<br />
  </p>
</card>

Do it with Style

The following style tags will work on the BlackBerry Browser:

Style & Tag Example
Bold <b> So <b>Bold</b> and Beautiful
Emphasis <em> So <b>Bold</b> <em>and</em> Beautiful
Italic <i> So <b>Bold</b> <em>and</em> <i>Beautiful</i>
Strong <strong> <strong>So</strong> <b>Bold</b> <em>and</em> <i>Beautiful</i>
Underline <ul> <u><strong>So</strong> <b>Bold</b> <em>and</em> <i>Beautiful</i></u>


Note: The BlackBerry Browser does not always display spaces as you might expect when using styles. Multiple spaces are translated into single spaces, and spaces that trail closing style tags do not appear. To get around this difficulty, use non-breaking space entities ( ) rather than true spaces, or insert carriage returns after closing tags. Carriage returns are automatically translated into a space within displayed strings.

Showing Pix

The BlackBerry Browser supports several image types:

Type Description
WBMP Monochrome Wireless Bitmaps, which are low-resolution black and white images. For more information, refer to the Wireless Application Environment Defined Media Type Specification (WAP-237-WAEMT-20010515-a) at http://www.wapforum.org.
GIF GIF87 and GIF89 image formats. Note that the browser only displays the first frame of animated GIF files.
JPEG Only color screen BlackBerry handhelds support JPEG images directly. With the BlackBerry Browser, the Mobile Data Service converts JPEG images for display on monochrome handhelds. With the WAP browser, the WAP gateway must convert JPEG images for display on monochrome handhelds.
PNG By default, the browser converts GIF images to PNG images. PNG images have a higher compression ratio and they support alpha channels.

The standard browser operates through a WAP gateway responsible for conversion of images to a format acceptable to the handheld. When the gateway receives a request to transmit a JPEG image to a monochrome handheld, it either converts the image to an acceptable format or returns a 406 error response. The gateway may also impose size restrictions that prevent larger JPEG files from being retrieved.

BlackBerry handhelds that are configured to operate through the BlackBerry Enterprise Server™ and Mobile Data Service (MDS) can handle far greater types of content.

MDS relies on a User Agent Profile to determine screen size, color depth and accepted image and content types before processing images for display by the handheld.

For example, the RIM 7230 v3.7.1 User Agent Profile has the following characteristics listed under the "BrowserHardware" section:

BitsPerPixel 16
ColorCapable Yes
ImageCapable Yes
PixelAspectRatio 1x1
ScreenSize 240x160
ScreenSizeChar 26x10
StandardFontProportional Yes

The BlackBerry Browser can appear to directly handle a wider range of content through server-side MDS transcoding based on full knowledge of device profiles.

Images are also automatically scaled to better fit the display. Images that are wider than the display are scaled to match the display width less 5 pixels. If the image height is greater than twice the screen height, the image is scaled to be twice the display height. Proportional scaling is always employed. Use the trackwheel to scroll vertical images, and ALT trackwheel to scroll horizontally.

The syntax for displaying images is as follows:

<card id="Pix" title="A Fine Photo">
  <p align="center">
    <img src="mypix.png" alt="My Photo" />
    <br />
    Such a lovely photo!
    <br />
  </p>
</card>

Note that the BlackBerry Browser does not support built-in images as some cell phones do. If your WML page makes use of built-in images, the "alt" description will be displayed when viewing with the BlackBerry Browser.

Tables

Tables are easy to create but need to have the number of columns defined before creation:

<card id="Table" title="Table">
  <p>
    <table columns="1">
      <tr><td>One</td></tr>
    </table>
  </p>
  <p>
    <table columns="2">
      <tr><td>One</td><td>Two</td></tr>
    </table>
  </p>
  <p>
    <table columns="3">
      <tr>
        <td>One</td>
        <td>Two</td>
        <td>Three</td>
      </tr>
    </table>
  </p>
</card>

Images can be displayed within cells, and WML style tags can be used within cells and across entire tables.

Entities

WML supports all named, decimal, and hexadecimal character entities (in Unicode) including:

Named Decimal Hex Description
&quot; &#34; &#x22; Quotation mark
&amp; &#38; &#x26; Ampersand
&apos; &#39; &#x27; Apostrophe
&lt; &#60; &#x3C; Less than
&gt; &#62; &#x3E; Greater than
&nbsp; &#160; &#xA0; Non-breaking space
&shy; &#173; &#xAD; Soft (discretionary) hyphen

Including Telephone Numbers

WML pages can include linkable telephone numbers and email addresses:

<card id="Contact" title="Contact: DisIsMe">
  <p>
    Call:
    <a href="wtai://wp/mc;5195551212"
      title="Call">Work</a>
    <a href="wtai://wp/mc;5195551213"
      title="Call">Home</a><br />
    Email
    <a href="mailto:work@my_office.com">Work</a>
    <a href="mailto:home@my_home.com">Home</a>
  </p>
</card>

Multiple Cards

The true power of WML is shown by including several cards within a deck.

<!-- Multi-card phone and email example -->
<card id="PhoneList" title="Main Listing">
  <p align="center">
    My Phone and Mail Directory
  </p>
  <p>
    <a href="#Funny">Comedians</a>
    <br />
    <a href="#Tunes">Musicians</a>
  </p>
</card>

<card id="Funny" title="Comedians">
  <p align="center">
    Comedians
  </p>
  <p>
    Cheech Marin
    <br/>
    <a href="wtai://wp/mc;5195551234">
      &gt;Call
    </a>
    <br />
    <a href="mailto:info@cheechandchong.com">
      &gt;Email
    </a>
    <a href="http://www.cheechandchong.com">
      &gt;Web Site
    </a>
  </p>

  <p>
    Tommy Chong
    <br/>
    <a href="wtai://wp/mc;5195551234">
      &gt;Call</a><br />
    <a href="mailto:info@cheechandchong.com">
      &gt;Email</a>
    <a href="http://www.cheechandchong.com">
      &gt;Web Site</a>
    <do type="prev" label="Back">
      <prev/>
    </do>
  </p>
</card>

<card id="Tunes" title="Musicians">
  <p align="center">
    Musicians
  </p>
  <p>
    Alanis Morissette
    <br/>
    <a href="wtai://wp/mc;5195551234">
      &gt;Call
    </a><br />
    <a href="mailto:info@alanismorissette.com">
      &gt;Email
    </a>
    <a href="http://www.alanismorissette.com">
      &gt;Web Site
    </a>
  </p>
  <p>
    Barenaked Ladies
    <br/>
    <a href="wtai://wp/mc;5195551234x123">
      &gt;Call
    </a><br />
    <a href="mailto:info@bnlmusic.com">
      &gt;Email
    </a>
    <a href="http://www.bnlmusic.com">
      &gt;Web Site
    </a>
    <a href="ladies.wml#Ed">
      &gt;Ed's Edvice
    </a>
    <a href="ladies.wml#Steve">
      &gt;Steve's Sagacity
    </a>
    <do type="prev" label="Back">
      <prev/>
    </do>
  </p>
</card>

Unique things about this sample:

  • A comment line was included at the start.
  • The first card, "PhoneList", displays a menu to access other cards within the script via:
    <a href="#Funny">Comedians</a>
    <br />
    <a href="#Tunes">Musicians</a>
  • The remaining cards, "Funny" and "Tunes", display the syntax used to incorporate telephone numbers, email addresses and URLs in user-selectable HREF links.
  • The telephone number in the "Barenaked Ladies" card also includes a telephone extension (x123).
  • Two trailing href's in the "Barenaked Ladies" card call an external WML file, positioning to cards with an id of "Ed" or "Steve".
  • A line near the base of the "Funny" and "Tunes" cards:
    <do type="prev" label="Back"><prev/></do>
    ... provides users with a method to return to the previous screen.


Note: Many URLS shown within this article do not exist and have been used purely to demonstrate syntax and use.

Variables

Variables can be used in WML pages by using the <setvar> and <input> tags, and can be accessed by preceding the variable name with '$'. The following example show how to use <setvar> and <input> to set variables, and how to display them thereafter.

<!-- An example that uses variables -->
<card id="Variables" title="Wonderful Variables">
  <p align="center">
    Working with variables
  </p>
  <do type="accept" label="Want to see">
    <go href="#WhatIs">
      <setvar name="mListen"
        value="Jimi Hendrix" />
      <setvar name="mAge" value="44.93" />
      <p>
        You like to listen to?
        <input name="yListen" />
        What is your telephone number?
        <input name="yTelephone"
          format="\(NNN\)\ NNN\-NNNN" />
        Your age?
        <input name="yAge" size="2"
          maxlength="2" format="NN" />
        Your password?
        <input name="yPassword" size="12"
          maxlength="12" type="password"
          format="*x" />
      </p>
    </go>
  </do>
</card>

<!-- display variables -->
<card id="WhatIs" title="Here they are">
  <p align="center">
    My wonderful variables!
  </p>
  <p>
    I am $mAge years old and like to listen to
    $mListen<br />
    You are $yAge years old and like to listen to
    $yListen<br />
    Your telephone number is $yTelephone<br />
    Your "secret" password is $yPassword<br />
  </p>
</card>

Unique things about this sample:

  • The opening "Variables" card declares two variables using <setvar>, then prompts the user to enter three additional variables through the use of the <input^gt; tag.
  • The first <input> tag does not perform any field limitation, validation or conversion. It simply lays down an input field that is the width of the current window.
  • The second <input> tag masks the telephone entry field to automatically insert characters while the user is typing. The format="\(NNN\)\ NNN\-NNNN" will translate into "(999) 999-9999" if the user typed 9's.
  • The third <input> tag limits the size of the field to 2 characters, and limits entry to numeric values. The BlackBerry Browser will automatically use numeric values when numeric keys are entered even if the Alt key is not depressed.
  • The fourth <input> tag limits the field size to 12 characters, obfuscates input by setting type="password", and "wildcard" formats the data to allow alphanumeric and symbol characters converted to lower case.
  • The final "WhatIs" card display all variables.

Note that variable names are case sensitive, must begin with an alphabetic or an underscore character, and can contain numeric characters after the first character.

The Input Element

Attribute Required Type Description
name Yes Alphanumeric The name of the variable used for the input field
type No Alphabetic "text" (default) or "password"
value No Alphanumeric Default value of the "name" variable
format No Alphanumeric Sets a mask to allow, limit and alter data entered by the user
    Format Description
    A Allow upper-case alphabetic, punctuation and symbols
    a Allow lower-case alphabetic, punctuation and symbols
    N Allow numeric characters
    n Allow numeric, punctuation and symbols
    X Allow upper-case alphabetic, numeric, punctuation and symbols
    x Allow lower-case alphabetic, numeric, punctuation and symbols
    M Allow all supported characters
    m Allow all supported characters
    *F A wildcard mask, which applies the second character mask ('F', which represents a Format from the list above) to the entire input string from the placement position onwards. Note that the mask ('F') must be the last character in the masks
    #F A repeating mask where '#' represent a value from 1 to 9, and 'F' represents a Format from the list above (except *F). Note that this must be positioned as the last entry in the mask.
    \C Display the next escaped character 'C' in the input field.
emptyok No Boolean If true, then the user does not have to enter a value in the field
size No Numeric The size of the input field
maxlength No Numeric The maximum number of characters that can be typed
tabindex No Numeric Sets the tab order between fields.
Ignored by the BlackBerry Browser.
title No Alphanumeric Sets the field title.
Ignored by the BlackBerry Browser.
accesskey No Numeric Sets a key value to access the field.
Ignored by the BlackBerry Browser.

The example to follow shows how to navigate to a fully formed user-entered URL by using field formatting, then using a "noesc" directive to stop the parser from translating the URL before use.

<!-- An example that navigates to a site -->
<!-- using a variable -->
<card id="Navigator"
  title="Variable
  Navigation">
  <p align="center">
    Let's set an URL
  </p>

  <input name="Troll"
    value="http://www.blackberry.net/go/mobile/"
    format="\h\t\t\p\:\/\/*x" />

  <do type="accept" label="Want to browse?">
    <go href="$(Troll:noesc)" />
  </do>
</card>

Other variable directives include "escape" to translate non-alphanumeric characters into their hexadecimal equivalents, and "unesc" to reverse the translation from hex to original form.

Give me an option

The best user interface for WAP forms is usually one that requires the least amount of typing and navigating from one screen to another. To minimize keyboard activity, use menus of options where the user can scroll through a list of options, and select one or more options from the list.

The first method in the "MyOptions" group allows the user to select a single option from the list. The selected option string is returned in $MyOptions, with the index number of the selected option (range 0-n) returned in $MyOptionsIndex where a return of zero indicates that no option was selected.

The second method in the "MoreOptions" group allows the user to select zero or more options from the list. The selected option strings are returned in $MoreOptions.

Note that none of the attributes available for use with the select tag are mandatory. A single <select> will suffice to start an options list.

<!-- An example that uses a list of options -->
<card id="Options" title="Our Options">
  <p align="center">
    Let's display our options
  </p>

  <p>
    <select name="MyOptions"
      iname="MyOptionsIndex">
      <option value="Life">
        Living well
      </option>
      <option value="Death">
        Not living at all
      </option>
      <option value="Tween">
        Something in between
      </option>
    </select>

    <select name="MoreOptions" multiple="true">
      <option value="Happy">
        Feeling fine
      </option>
      <option value="Sad">
        Feeling awful
      </option>
      <option value="Normal">
        Getting by
      </option>
    </select>

    <do type="accept" label="Want to see">
      <go href="#TheOption" />
    </do>
  </p>
</card>

<card id="TheOption" title="Selected Option">
  <p align="center">
    You selected $MyOptions which was option
    #$MyOptionsIndex<br />
    You also selected $MoreOptions
  </p>
</card>

The Select Element

Attribute Required Type Description
title No Alphanumeric Sets the set title. Ignored by the BlackBerry Browser.
name No Alphanumeric Returns string value of selected option(s). The first letter in the variable name must be alphabetic.
iname No Numeric Name token. Returns numeric value of selected option. The first letter in the variable name must be alphabetic.
ivalue No Numeric Index value of default <option> when the script is first run.
multiple No Boolean Set to "true" to permit use to select multiple <option> items. The default is "false"
tabindex No Numeric Sets the tab order between select groups.
Ignored by the BlackBerry Browser.
xml:lang No Alphabetic Language code. See: here

Event Handling

Events are triggered when cards are loaded, cards are acted upon, and timers are set.

For example, the following code will cause the second card to be displayed as soon as the first card is loaded due to the way events are triggered. It will then load the third card when the <prev /> event is used to navigate back to the first card. When a <go> is used in the third card to directly navigate to the first card, it will automatically load the second card again.

<card id="One" title="Card #1"
  onenterforward="#Two"
  onenterbackward="#Three">
  <p align="center">
    This is card #1
  </p>
</card>

<card id="Two" title="Card #2">
  <p align="center">
    This is card #2
  </p>

  <do type="accept" label="To Card #1">
    <prev />
  </do>
</card>

<card id="Three" title="Card #3">
  <p align="center">
    This is card #3
  </p>

  <do type="accept" label="To Card #1">
    <go href="#One" />
  </do>
</card>

This code works because of the way the "onenterforward" and "onenterbackward" events are triggered.

An "onenterforward" event is triggered when a card is first loaded, or when it is called via <go> or <anchor>.

An "onenterbackward" event is triggered when a card is called via <prev />.

Card one is destined never to display by setting it to handle both events.

As shown in the following code, timers are enabled in the card by setting the timer name and duration in the code of a card, and setting the action within the card declaration using the "ontimer" attribute.

<!-- An example that deals with timers -->
<card id="First" title="First card"
  ontimer="#Second">
  <p align="center">
    My first card
  </p>
  <timer name="t_1" value=20 />
</card>

<card id="Second" title="Second card"
  ontimer="#Third">
  <p align="center">
    My second card
  </p>
  <timer name="t_2" value=20 />
</card>

<card id="Third" title="Third card">
  <p align="center">
    My third card
  </p>
</card>

In this example, the "First" card displays for 2 seconds then loads the "Second" card. The "Second" card does the same then calls the "Third" card.

You will run into a problem if you call a card that already has an expired timer. For example, changing the card "Third" as shown below will not work as expected:

<card id="Third" title="Third card"
  ontimer="#First">
  <p align="center">
    My third card
  </p>
  <timer name="t_3" value=20 />
</card>

On initial execution of the script with the modified "Third" card above, cards "First", "Second", "Third" and "First" will be called in sequence every 2 seconds. Unfortunately, the state of expired timers will remain cached for the duration of script execution. As such, this script will leave "First" on display after it is called by "Third". Refreshing the deck will not reset the expired timers. The only workaround at present is to flush the cache to fully reload and initialize the deck.

Selecting or deselecting an option from a <select> list triggers an "onpick" event as shown below:

<!-- An example that captures an -->
<!-- onpick event -->
<card id="Options" title="Our Options">
  <p align="center">
    Let's display our options
  </p>

  <p>
    <select name="TheSelection" multiple="true">
      <option value="Option1">Option #1</option>
      <option value="Option2" onpick="#Option2">
        Option #2
      </option>
      <option value="Option3">Option #3</option>
    </select>
  </p>

  <do type="accept" label="View Selection(s)?">
    <go href="#Selections" />
  </do>
</card>


<card id="Selections" title="Selected Option">
  <p align="center">
    You selected $TheSelection
  </p>
</card>

<card id="Option2" title="Triggered Card">
  <p align="center">
    You're in triggered Option #2 and you've
    selected $TheSelection
  </p>
</card>

When first executed, the user will be presented with a list of three items, any of which can be selected or deselected as required. Nothing of particular interest occurs if "Option1" or "Option3" are modified, but if any modification is made to "Option2", then the "Option2" card will be called.

There are four main tasks that help direct event handling within a WML script:

  1. <go>
  2. <prev />
  3. <refresh>
  4. <noop>

The <go> Task

As demonstrated in earlier scripts, <go> will load a specific card in the current deck, or from an external WML deck, WMLScript file, or URL. The table to follow details all attributes that can be used with <go>

Attribute Required Type Description
href Yes Alphanumeric A card in the current deck, a WML deck or WMLScript file, or an URL.
sendreferer No Boolean If "true", passes the referring deck (URI). The default is "false".
method No Alphabetic HTTP submission method: "post" or "get". The default is "get".
enctype No ContentType Content type to submit to the server. Default "application/x-www-form-urlencoded" is used when method ="get". When method="post", can be default or "multipart/ form-data".
cache-control No "no-cache" Must be set to "no-cache" if the attribute is used. This forces server to reload the deck on execution.
accept-charset No Alphanumeric List of character encodings in comma or space delimited format for data that is acceptable to the processing server. Examples include: utf-8, UTF-8, us-ascii, iso-8859-1, utf-16. The default is "unknown".

The <prev /> Task

This task will navigate to the previous card in the history list. In doing so, it triggers an "onenterbackward" event in the destination card. The syntax is as follows:

<do type="accept" label="Previous">
  <prev />
</do>

The <refresh> Task

This task is used to refresh the display and variable settings, where <refresh /> will simply refresh the display. Use the following syntax to refresh variable settings that may be accessed within another card.

<!-- An example that deals with <refresh> -->
<card id="Main" title="Main entry point">
  <p align="center">
    Enter a string value:
    <input name="ChangeMe" />

    CARD: Main<br />
    The string value is set to $ChangeMe<br />

    <do type="accept" label="Modify">
      <go href="#ChangeIt" />
    </do>
  </p>
</card>

<card id="ChangeIt" title="Time for a change">
  <p align="center">
    CARD: ChangeIt<br />
    ChangeMe is currently set to $ChangeMe<br />

    <do type="accept" label="Update">
      <refresh>
        Enter a NEW string value:
        <input name="ChangeMe" />
      </refresh>

      <prev />
    </do>
  </p>
</card>

The <noop> Task

At first glance, inserting a task that performs "No Operation" within a deck seems a little odd. After all, why insert code to do nothing?

The answer is simple: to disable default functionality on some cell phones (but not on the BlackBerry handheld).

The code to follow would disable default functionality on many cell phones to return to the previous card:

<!-- An example that deals with <noop> -->
<card id="Main" title="Main entry point">
  <p align="center">
    You're in the main card!!

    <do type="accept" label="Next Card">
      <go href="#Next" />
    </do>
  </p>
</card>

<card id="Next" title="Bypassing previous">
  <p align="center">
    You're in the NEXT card!!

    <do type="prev">
      <noop />
    </do>
  </p>
</card>

Please if you can find other uses for <noop> within a BlackBerry WML script.

Deck-Level Event Handlers

Default event handling can be specified for an entire deck through the use of the <template> tag as shown below:

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

  <do type="accept" label="Next Card">
    <go href="#Next" />
  </do>
</template>

<!-- An example that deals with <template> -->
<card id="Main" title="Main card">
  <p align="center">
    You're in the main card!!
  </p>
</card>

<card id="Next" title="NEXT card">
  <p align="center">
    You're in the NEXT card!!
  </p>
</card>

This handling can be overridden at a card level.

The <meta> Tag

The most common use for meta tags within a WML deck is to set caching control. In the example to follow, the browser is directed to cache the deck for one minute, and then automatically reload the deck:

<head>
  <meta forua="true" http-equiv="Cache-Control" content="max-age=60" />
</head>

<card id="IsCached">
  <p>
    This deck will be cached for one minute
  </p>
</card>

Set "max-age=0" to prevent deck caching.

Access Control

Deck access can be restricted to specific IP address(es) or domain(s) through the use of the <access> tag:

<wml>
  <head>
    <access domain="DOMAIN" [path="PATH"]/>
  </head>
</wml>

... where DOMAIN can be an IP address or an authenticated domain, and optional PATH can be a specific path off of the domain or IP such as "/secret".

Creating Client-Server Applications

The most vital component of a dynamic WML site is to interact with server-side applications.

The WML example below prompts the user to input two fields, then submits the fields to a Perl script:

<!-- An example that submits a form -->
<card id="Submit"
  title="Form Submission Script">
  <p align="center">
    Form Submission<br />
    Enter Contact:
    <input name="Contact" />
    Enter Company:
    <input name="Company" />
  </p>

  <do type="accept">
    <go href="ProcessForm.pl">
      <postfield name="formContact"
        value="$Contact" />
      <postfield name="formCompany"
        value="$Company" />
    </go>
  </do>
</card>

This method of form submission cleanly declares fields with variables before form submission.

The Perl script below extracts the passed fields, then creates and displays a WML deck containing the passed fields:

#!/bin/perl
#
# Filename: ProcessForm.pl
# Purpose : to extract passed form fields
#
use CGI qw(:standard);

use CGI;

$query = new CGI;

$Contact = $query->param('formContact');
$Company = $query->param('formCompany');

$Deck = "Content-type: text/vnd.wap.wml

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

<!DOCTYPE wml PUBLIC \"-//WAPFORUM//DTD WML 1.2//EN\"
  \"http://www.wapforum.org/DTD/wml_1.1.xml\">

<wml>

<!-- after submission -->
<card id=\"Returned\"
  title=\"Form Returned Script\">
  <p align=\"center\">
    Returned Form<br />
    You passed $Contact and $Company
  </p>
</card>

</wml>";

print $Deck;

As you can see, it's not very difficult to get form submissions working.

An alternate method of accomplishing the same goal within the passed URL can be done by changing the code as follows:

<do type="accept">
  <go href="ProcessForm.pl?formContact=
    $(Contact)&formCompany=$(Company)"/>
  </go>
</do>

It's far less clear than using the <postfield> tags, and far more visible to the user, but it will work.

That's it!

WML really is an easy to learn language that most people can program in without a huge learning curve.

If you want to expand your skills with WML, I strongly suggest that you read my article "WMLScript Compendium", which has also been published this issue. You will quickly discover that WMLScript is an easy to learn subset of JavaScript that provides math functions, string handling, extended URL and WMLBrowser handling, and dialog boxes.


Top |  Table of Contents |  Journal in PDF Format |  Legal Disclaimer
 
     
 Home | Products | Solutions | Purchasing | Support | Developers | Worldwide | News | About Us | Contact Us | Site Map
 Legal | Copyright © 2008 Research In Motion Limited, unless otherwise noted.