WML Notes - 1
Some basics about Wireless (WML and XHTML Mobile)
WAP 1.0 and WML are industry standards, managed by WAP Forum. The specification is at http://
www.wapforum.org/what/technical.htm
The WML DTD is “-//WAPFORUM//DTD WML 1.3//”EN”
See it at http://www.wapforum.org/DTD/wml13.dtd. Also might want to see http://
www.wirelessdevnet.com
Root Element
A WML document is conceived of as a deck of cards, only one of which is visible at a time. The wml
element is the parent of the card element, which in turn contains all other elements in the document. You can
have an unlimited number of cards in each document (deck). The card is intended to suggest one screen of data.
To scroll beyond the screen, users can navigate with the arrow keys.
Navigation
Because so little data fits on a screen, you may have to map actions to the mobile device’s “softkeys”,
which are the mysterious blank buttons just below the screen. The labels (names) that appear on the screen just
above them will vary.
Besides anchors, WML provides a selection list tools that you use to display a series of choices as a
numbered list. Thus, the user can select an option with a number key on the keypad as well as the Link buttom.
WML includes several actions (go, prev, refresh, and so on) that move between cards, such as go
href=”url” in the anchor element...
Content
There are a few text-formatting tags and .wbmp (Wireless BitMap Pictures), SMIL, and some kinds of 3D
are supported. Images can’t be larger than 64 x 64. Not all WAP implements support images, tho.
Creating WML Documents
First steps:
•
•
•
•
•
•
create a deck (the WML container document)
enter and format text
navigate around other cards in the deck
associate events with a card element
set up a field for user entry
insert an image
What you need
•
•
A text editor
Mobile phone simulator (which acts as a microbrowser)
•
Get one at http://www.forum.nokia.com/main/0,,034-13,00.html or other mobile phone
manufacturers’ website
•
Or try WinWAP (http://www.winwap.org/)
•
Or try Openwave SDK (http://www.openwave.com/products/developer_products/)
•
Or an online simulator, such as Wapaka (a Java-based microbrowser for testing WML; http://
www.digitalairways.com/wapaka/)
WML Notes - 2
•
Debugger (usually comes with the simulator)
Transmitting WML Documents
To transmit a WML document, you need a WML gateway and a web server. The cell phone transmits the user’s
information to a WAP gateway, which sends it on to the web server, which stores it as session information in the
user profile.
The web server needs to know how to process the MIME types of the WML document (but must check
your server’s documentation for specifics). However, each of the following should be identified to the server:
•
•
•
•
•
•
•
text/vnd.wap.wmlscript
image/vnd.wap.wbmp
text/vnd.wap.si
text/vnd.wap.sl
application/vnd.wap.wbxml
application/vnd.wap.wmlc
application/vnd.wap.wmlscriptc
Basic WML Document
To view the sample, you need a phone simulator. Here’s a sample file. NOTE: the word processor
program used to create this document converts the “ into typographer quotes (different style quotes for the left
and right side). If you cut-and-paste the sample, it won’t work unless you change the quotes.
Experiment using <b>, <big>, <em>, <i>, <small>, and <strong>
<?xml version=”1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3’’EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
<wml>
<card>
<p>Welcome to LIS531, XML</p>
<i>Today is Tuesday.</i>
</card>
</wml>
The basic card is obvious.
Navigation:
•
•
•
•
anchors, e.g., <a href=”url”>the content</a>
select>option construct
links using the OK softkey
separate cards using other softkeys, such as the Menu key
Sample file with list (file name: movielist.wml)
<?xml version=”1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
<wml>
WML Notes - 3
<card id=”films”>
<p align=”center”><b>Films to see</b></p>
<p><i>Film List</i></p>
<p><a href=”#godfather1”>Godfather, Part 1</a></p>
<p><a href=”#fannie”>Fannie and Alexander</a></p>
<p><a href=”#dogma”>Dogma</a></p>
</card>
<card id=”godfather1”>
<p><b>The Godfather, Part 1</b></p>
<p>Don Corleone decides to start a tech firm by learning XML.</p>
</card>
<card id=”fannie”>
<p><b>Fannie and Alexander</b></p>
<p>Strangely intriguing Swedish film, death, sex...</p>
</card>
<card id=”dogma”>
<p><b>Dogma</b></p>
<p>Matt Damon and Ben Afflick tour New Jersey.</p>
</card>
</wml>
Note: in the above example, we use the anchor. You can replace the anchor (the colored section above) with
select>option
<select>
<option onpick=”#godfather1”>Godfather 1</option>
<option onpick=”#fannie”>Fannie and Alexander</option>
<option onpick=”#dogma”>Dogma</option>
</select>
Everything else in the file is the same. The difference is that the select>option creates radio buttons on the
screen.
Selection using the OK softkey - here the user scrolls to an option and presses the OK key on the device.
Example: (file name: moviedesc_kingkong.wml)
<?xml version=”1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
<wml>
<card id=”one”>
<do type=”accept”>
<go href=”#two”/>
</do>
<p align=”center”><b>Films to see</b></p>
<p><i>King Kong</i> This is a remake of the 1933 film of an adventure to
Skull Island to locate a library school student who eats cats. It is a
horror to behold!</p>
</card>
WML Notes - 4
<card id=”two”>
<do type=”accept”>
<go href=”#three”/>
</do>
<p align=”center”>Page -2-</p>
<p>The legend is real and dangerous, living in a massive urban jungle
called Boston where ducks rule</p>
</card>
<card id=”three”>
<do type=”reset”>
<go href=”#one”>
</do>
<p align=”center”>-3-</p>
<p>Fortunately, in the end Super Bix saves the day.</p>
</card>
</wml>
The “accept” value of the “do” element assigns the enclosed “go” action to the OK softkey. The value
“accept” for the “type” attribute indicates that the action applies to the OK softkey. You could replace that with
“prev” and “noop”. Notice how each eard links to the next; but the 3rd card has a “reset” button option.
You could also set a timer to flip the cards automatically after 20 tenths of a second (2 seconds); here’s a
model and example:
model
example
<card>
<onevent type=type>
action
</onevent>
</card>
<card id=”one”>
<onevent type=”ontimer”>
<go href=”#two”/>
</onevent>
<timer value=”20”/>
<p align=”center”>Films to see</p>
<p><i>King Kong … [and so on...]
</card>
Alternatively:
<card id=”one” ontime=”#two”>
<timer value=”20”/>
<p align=”center”> -2- </p>
<p>The legend … </p>
</card>
Mapping to Menu Button
You can map to other buttons, too, using the “do” element, which has an attribute named type.
The type attribute can be any of the following actions that correspond to the microbrowser’s software:
accept
delete
help
options
prev
reset
okay button
delete button
help button
option or menu button
prev button, return to the previous card
return to the first card or reset variables.
WML Notes - 5
Example of selecting an option (file name: movieselect.html). You’d have to make the various .wml
files referred to.
<?xml version=”1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
<wml>
<card id=”top”>
<p>Press the Menu button for more choices:</p>
<do type=”options” name=”movies” label=”Movies”>
<go href=”#movies”/>
</do>
<do type=”options” name=”synopses” label=”Synopses”>
<go href=”#synopses”/>
</do>
<do type=”options” name=”theaters” label=”Theaters”>
<go href=”#theaters”/>
</do>
</card>
<card id=”movies”>
<p align=”center”><b>MOVIES</b></p>
<p><a href=”moviedesc_godfather.wml”>Godfather, Part 1</a></p>
<p><a href=”moviedesc_fannie.wml”>Fannie and Alexander</a></p>
<p><a href=”moviedesc_dogma.wml”>Dogma</a></p>
</card>
<!-- notice the synopses call the same file, but to anchored sites -->
<card id=”synopses”>
<p align=”center”><b>SYNOPSES</b></p>
<select>
<option onpick=”movielist.wml#godfather”>Godfather, Part 1</option>
<option onpick=”movielist.wml#fannie”>Fannie and Alexander</option>
<option onpick=”movielist.wml#dogma”>Dogma</option>
</card>
<card id=”theaters”>
<p>THEATERS
<select>
<option onpick=”theaterlist.wml#lowes”>Lowes-Boston</option>
<option onpick=”theaterlist.wml#joescafe”>Joe&apos;s Cafe Movie House</option>
<option onpick=”theaterlist.wml#tower”>Tower Theater</option>
</select>
</p>
</card>
</wml>
Displaying an Image
<?xml version”1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
<wml>
<card>
<p><img src=”mylogo.wbmp” alt=”My Logo”
width=”64” height=”39”/>
WML Notes - 6
</p>
</card>
</wml>
Accepting User Input
<?xml version”1.0”?>
<!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.3//EN”
“http://www.wapforum.org/DTD/wml13.dtd”>
<wml>
<card id=”subscribe”>
<p align=”center”><b>FILMS</b></p>
<p>To subscribe to TalbotCo, enter an email address</p>
<p><input name=”email”/></p>
<do type=”accept”>
<go href=”#email-ok”/>
</do>
</card>
<card id=”email-ok”>
<p>You entered <i>$email</i> If correct, press OK.</p>
<do type=”accept”>
<go href=”#username”/>
</do>
</card>
<card id=”username”>
<p>Enter your name</p>
<p><input name=”username”/></p>
<do type=”accept”>
<go href=”#thanks”/>
</do>
</card>
<card id=”thanks”>
<p>Thanks, </b>$username</b>!</p>
<p>Bye!</p>
</card>
</wml>
WML and XHTML Mobile
WML is good for backward compatibility with other phones or if you like the card metaphor. XHTML
Mobile is more advanced because it supports CSS (relies on WCSS stylesheet). XHTML Mobile might be
considered a subset of regular XHTML because fewer commands are supported.
Example: (file name: moviedesc_kingkong.xhtml)
<?xml version”1.0”?>
<?xml-stylesheet type=”text/css” media=”handheld” href=”moviedesc.css”?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN”
“http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
<html>
<head></head>
<body>
<h1 align=”center”>Films to see</h1>
WML Notes - 7
<p><i>King Kong</i> this is the text... blaah blaah blaah …
</body>
</html>
filename: moviedesc.css
body {
background: #FFFFFF;
}
h1 {
font-size: x-large;
color: #660000;
text-align: center;
text-decoration: underline;
}
p {
display: block;
border; 1px #330000 solid;
background: #660000;
color: #FFFFFF;
text-align: left;
font-size: medium;
padding: 4px;
}
End of the file.