Introduction to WML
From Compsci.ca Wiki
Contents |
We all know that your can browse the internet on your phone, but how do we create those pages? We use an XML-based variant of HTML, called WML (wireless markup language). Of course we want some of our pages to be dynamic, which I will cover in another tutorial with PHP, but for now I will concentrate on static pages.
Basic knowledge of HTML will help you understand the following better, but you should be able to follow along without.
Preface
There are some terms, abbreviations, and bits of information you should know before I begin.
WML is the language used to create pages on your cell phone.
Like HTML, there is a client-side scripting language called WMLScript. WMLScript is very basic but does enough for the type of pages you will be creating, but it is not covered in this tutorial.
WAP (wireless application protocol) is what we use for accessing information over the internet. It is handled by the phone, so we do not really need to worry about it.
WML is based on XML, so every tag must be closed. This is like XHTML, only it is more strict. Phones generally do not render pages which contain tags which are not properly closed.
Basic Structure of a Page
Every page must contain certain elements. Each page is composed of a stack of cards. These cards can call each other and allows more information to be in the pages without requiring the user to download more information, which costs money.
- Header
The beginning of each page is always the same. It contains a doctype declaration which is always the same, and the entire document (aside from the doctype) sits within the wml tags.
<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml"> <wml> ... </wml>
- Cards
As you've probably already guessed, cards are placed within the wml tags. You can easily link to another card, as I will show shortly.
<card> ... </card>
Text
There are many ways to format text in WML. With no formatting, text must be encased in the p tag, much like HTML. Similarly, you can format text the same way as you can in HTML, with tags such as em and strong.<p>Unformatted text <em>Emphasized (Italicized)</em><br/> <strong>Bold</strong><br/> <u>Underlined</u><br/> <i>Italicized</i><br/> <b>Bold</b><br/> <big>Large Text</big><br/> <small>Small text</small></p>You can insert line breaks, as shown above, by using the
tag.
Links
You can link almost the same way as in HTML, with the a tag. However, there is an alternative called the go tag.
<anchor>Go
<go href="otherpage.wml"/>
</anchor>The anchor tag is used to display the text for the link on the page, and allow the user to select it.
Let's say you want to link to another card. It's very easy to do, just look at the following example.
<card name="Card 1">
<p>Setting the variable...</p>
<setvar name="message" value="greetings from card 1"/>
<anchor>Next Card
<go href="#card2"/>
</anchor>
</card>
<card id="card2">
<p>Card 1 says: $(message).</p>
</card>
Input Boxes
There is no need to specify a form area here, it is assumed that your pages will be small enough and only contain one form per card. Forms are again similar to those of HTML, but again follow a more XML style syntax.
<p>
<input type="text" name="name"/><br/>
<input type="text" name="age"/>
</p>You can access those entered values after the form is submitted using variables as I will explain shortly.
Variables
Variables are either set automatically by input boxes, or by using the setvar tag. The above boxes would create two variables automatically, those being $(name) and $(age), the value of their name in the tag.
<setvar name="foo" value="bar"/> <p>The value of the variable 'foo' is $(foo).</p>
Images
Considering the fact that WAP applications have very little bandwidth to play with, we must remember to use images sparingly. WML pages use a special type of restricted and small image type called wbmp. With photoshop you can save in that format, as with ImageMagick and probably others too. Images must be in this format in order to display properly.
<p><img src="image.wbmp" alt="Image"/></p>
Timers
Timers allow us to do something with our pages after a certain amount of time has passed. They're useful if you want to display something like a splash screen.
Let's take the following example, which should display an image then a message after 5 seconds (Note: the value of the timer is in 1/10 of a second).
<card name="card1" ontimer="#card2">
<p><img src="image.wbmp" alt="Image"/></p>
<timer value="50"/>
</card>
<card id="card2">
<p>This is card 2</p>
</card>
Testing Your Code Without a Cell Phone
Don't have a cell phone or just don't want to pay the fee for using the browser? Luckally there's a few emulators out there which allow you to avoid needing one.
The one I recommend is YourWAP. It's a regular program which you install to your computer and it allows you to view online pages. You must have the pages saved on the web for you to access them.
If you don't have a Windows box, then the TagTag should work well. I find the first one to be more accurate, but unfortunately it's Windows only. Timers tend to give me problems with this one, as they don't work whatsoever.
Here's an example of all this together.
<?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" ontimer="#card2">
<p><strong>My Application</strong></p>
<timer value="30"/>
</card>
<card id="card2">
<p>
<img src="main.wbmp" alt="Main Image"/><br/>
Welcome to my first WML page. It's great, isn't it?
</p>
</card>
</wml>
The above code will display a message for 3 seconds, then change cards and display an image called 'main.wbmp' and a short message afterwards.
Credits
Written by cartoon_shark on CompSci.ca, rdrake on IRC.
