Digital Utopia
Consider this.
You’re walking across Times Square. You look up at the NASDAQ stock ticker, and realize that the value of your portfolio is rising by the minute. You see the opportunity to make a quick buck. Unfortunately, your broker is miles away, and his cellphone’s switched off. What do you do?
Well, if you have one of the new Web-enabled cellphones, you could whip it out, punch a few keys, trade a few shares, and watch your net worth take on a couple of zeroes. The next morning, you get your official invitation to the billionaire’s club - a call from BMW asking if you’d be interested in their latest two-seater…
Sounds utopian? Well, come to think of it, the way the NASDAQ’s been swinging, the billionaire’s club is beginning to look more and more like a gathering of tramps. However, with that caveat, everything described in the scenario above is perfectly possible, thanks to the development of a new protocol that allows mobile phones to browse the Internet with the same elan as a desktop PC.
The magic word here is WAP, or the Wireless Application Protocol. And if you have one of the new generation of “WAP-enabled” mobile phones, you can do all the things that you used to do on your PC, on your phone.
Or Is It?
Of course, WAP - and its attendant user-interface language WML, which is actually the subject of this article - isn’t completely free of gotchas. There are a number of issues that developers need to be aware of before they leap headlong into the world of WML.
According to the specification for Wireless Markup Language, which is currently being developed by the W@P Forum [http://www.wapforum.org], WML has been specifically developed for a certain class of device. The primary characteristics of this class of device are limited display area, limited memory and processing power, and low bandwidth connections - exactly the opposite, in fact, of the characteristics of a typical desktop PC.
Naturally, at the very outset, you get the feeling that WML content is going to be pretty boring - after all, compared to the glitz and glamour of the Web, reading plain text off a two-inch-high screen hardly constitutes riveting entertainment. Despite this, the rapid emergence of handheld devices and cellular phones means that there’s a lot of attention currently being focused on WML - and consequently, developers who have thus far been content with HTML and JavaScript need to quickly get their arms around the new beast.
That’s where we come in.
Over the next few pages, we’ll be giving you a quick-and-dirty crash course in WML, starting off with the tools you’ll need to develop WML content and continuing on with the basic elements of the language. If you’re familiar with HTML, you should have very little trouble adapting to WML - and of course, we’ll be here to catch you if you fall.
Onwards…
The Rules…
First, a quick history lesson, just to put things in context. A couple of years ago, the W3C, which is the governing body for Web protocols and standards, began formulating a new language called Extensible Markup Language or XML.
XML was designed for the benefit of developers who were restricted by the severe limitations of HTML. Among other things, the new language allowed developers to create their own set of markup tags, together with a Document Type Definition [DTD] against which to validate the markup. Mobile phone application developers saw an opportunity to develop a language of their own - based on XML architecture - that would be used exclusively for mobile devices like cellular phones and handhelds. Thus was born WML.
Since WML can be considered a child of the XML generation, there are some basic rules that make it different from the HTML you’re probably used to.
The first and most important difference is that every WML tag must be explicitly closed. For example, you know that <br> produces a line break in HTML. However, if you were to use the same tag in WML, you would need to change it to <br />, where the forward slash / is used to indicate that the tag has been closed.
The other important difference is that, unlike HTML, WML is case-sensitive. In an HTML document,
<B>This is bold text</b>
is acceptable; in a WML document, it would result in a massive choking fit.
With the exception of these two major differences, you’ll find WML very similar to HTML - like HTML, it allows you to mark up text, format it, align it, pretty it up with images, and create links between documents.
…And The Tools
If Michaelangelo hadn’t had a hammer and chisel, David would still be a hunk of marble. And so, while all you actually need to develop a WML-enabled Web site is a little imagination, the right tools certainly won’t go amiss.
The very first thing you need to get your paws on is a WAP-enabled cellular phone. However, if these aren’t available locally, or if you find the price tag a little disconcerting, you can take the beggar’s way out and get yourself a mobile phone simulator, which accurately simulates a WAP phone on your PC.
There are a whole bunch of simulators available for download off the Web - our favourite, and the one we’ll be using for the examples in this article, is the Phone.com simulator, available at http://www.phone.com as part of the UP.SDK. Nokia also has a pretty comprehensive simulator available for download on their Web site at http://www.nokia.com/corporate/wap/sdk.html. We particularly liked the Phone.com simulator because it comes with a powerful debugger which can run in tandem with the WML display agent - useful when testing your WML code!
Unfortunately, both the Phone.com and Nokia simulators are available for the Windows platform, although there’s an interesting article on Anywhereyougo.com [http://www.anywhereyougo.com/ayg/ayg/wap/Article.po?type=WAP_Tutorial&page=9991] which describes how it can be made to work under Linux. You might find it interesting reading.
An alternative to the simulator is a “WML browser” - it’s just like a regular Internet browser, except that it can read WML pages. Try WinWAP at http://www.slobtrot.com/winwap/index.htm. And finally, there are also a number of online services that allow you test WML pages on the Web - take a look at the WAPalizer, at http://www.gelon.net, which is an online simulator designed to test your WML pages online.
Once you’ve got a simulator or browser installed, you have two options to test your WML pages. The first is to simply open WML files from your local system, and the second is to actually upload them to a WML-enabled Web site and test them over a “live” Internet connection. Should you choose to do the latter, you may need to configure your Web server to recognize the WML file type, and serve WML pages correctly.
If you’re using Apache, you simply need to add the following MIME-type directives to the Apache configuration file “httpd.conf”. Alternatively, if your ISP doesn’t allow you access to the primary configuration file, you could try adding them to the per-directory .htaccess file. If neither of these work, you always have the option of yelling for Joe Admin…
AddType text/vnd.wap.wml wml
AddType image/vnd.wap.wbmp wbmp
AddType text/vnd.wap.wmlscript wmls
AddType application/vnd.wap.wmlc wmlc
AddType application/vnd.wap.wmlscriptc wmlsc
Once you’ve configured the server to serve WML pages, you can test it by visiting your site via your simulator or mobile phone. We’ve put up a simple [and temporary] prototype at http://www.melonfire.com/wml/index.wml - you could check it out, or try some of the great services at http://www.nokia.com/wap/competition/index.html
Finally, you might like to try out the very neat little WML editor called WAPtor at http://www.wapdrive.net. While WML pages can be created in any text editor, specialized editors like WAPtor can make things a little easier sometimes.
Playing Cards
Now that you’ve got the tools ready, it’s time to understand the basic concepts of WML - and with our tongue firmly embedded in our cheek, we’re going to tell you that if you’ve ever spent time in Vegas, you’ll find your experiences there to be helpful in getting through this next section. This is because the cornerstone of WML development is the concept of “decks” and “cards”.
When you develop a regular Web site, the basic unit of the site is a Web page. However, in WML-speak, that basic unit is called a “deck”, which is composed of one or many “cards”. A “deck” is nothing but a WML document, which is sub-divided into different cards or screens.
Once the deck of cards has been downloaded, the user is presented with a card; he can view it and then either move on the next card, or back to the previous card, without requiring to download each card separately. This helps to make things a little faster.
A point of note: the maximum size limit for a deck, once it has been compiled by the WAP server, is 1492 bytes.
Here’s a simple WML deck, which actually consists only of a single card:
<wml>
<card>
<p>Welcome to the Information Age!</p>
</card>
</wml>
As you can see, the basic structure of the language is similar to HTML - the document begins and ends with <wml>…</wml> tags, and the body of the document is enclosed within <card>…</card> tags.
However, the document above isn’t ready for a test-drive just yet. If you remember, we told you that the WML effort was an offshoot of XML development - and XML markup needs to be verified and validated against a Document Type Definition file, or DTD, before it can be used. Consequently, you need to specify the complete path to the WML DTD in your WML document:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
<p>Welcome to the Information Age!</p>
</card>
</wml>
The initial block of code specifies the location for the WML DTD - as you can see, it’s available on the W@P Forum’s Web site, which is the body currently responsible for WAP development. It’s important that you not mess with this initial block of code, unless you know exactly what you’re doing and/or have some other DTD that you would like to validate your markup against.
Now save your file - remember to give it a .wml extension - either to your local system or to your Web site. You can then open the file in your simulator - it should look something like this:
Bold-Faced Liar
WML also supports many of HTML’s basic formatting tags - for example, <b>...</b> converts typeface to bold, <i>...</i> is used for italics and <u>...</u> is used to underline text [note that the current version of the Phone.com simulator doesn’t yet support bold and underlined text]
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
<p><i>Welcome to the Information Age!</i></p>
</card>
</wml>
Additionally, you could add paragraph breaks to your code with block formatting tags like <p>...</p>, or line breaks with the <br /> tag. Do note that the line break tag must be explicitly closed with a forward slash to maintain compliance with the XML language - if you’re coming at this from an HTML background, this is one of the first things you’ll have to get used to.
Here’s an 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>
<p>
INCOMING TRANSMISSION
<br />
We have your cellular phone. If you want it back, drop a sack full of
dollars outside your door tonight.
<br />
<i>No cops! Or the phone gets it!</i>
<br />
</p>
</card>
</wml>
A Little Solitaire
We’ve already told you that a single deck can consist of more than one card - these cards are all downloaded when the user connects and retrieves the WML document. The cards are displayed one at a time on the display device.
Here’s how you go about adding more than one card to your deck:
<?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="ace" title="The Ace">
<p>Ace!</p>
</card>
<card id="king" title="The King">
<p>King Harold</p>
</card>
<card id="queen" title="The Queen">
<p>Queen Victoria</p>
</card>
<card id="jack" title="The Jack">
<p>Jack Frost</p>
</card>
</wml>
And when you access the page, you’ll be presented with the first card. In order to access the remaining cards - or another deck - it’s necessary to add some kind of navigation to the deck. We’ll be covering that next - but in the meanwhile, you’ll have noticed that we’ve introduced a couple of new attributes of the <card> tag here - the “id” attribute is a unique identifier for the card and the “title” attribute is a brief label for the card, which comes in useful when bookmarking specific pages.
The “id” attribute is commonly used when linking cards together - it serves as an identifier for the target of the link. We’ve demonstrated this in our next example, which explains how to link cards together using the “anchor” or <a> tag.
<?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="ace" title="The Ace">
<p>Ace!
<br />
<a href="index.wml#king" title="Link to King Harold">Next card </a>
</p>
</card>
<card id="king" title="The King">
<p>King Harold<br />
<a href="index.wml#queen" title="Link to Queen Victoria">Next card </a>
</p>
</card>
<card id="queen" title="The Queen">
<p>Queen Victoria<br />
<a href="index.wml#jack" title="Link to Jack Frost">Next card </a>
</p>
</card>
<card id="jack" title="The Jack">
<p>Jack Frost</p>
</card>
</wml>
This example assumes that the deck containing the cards is called “index.wml”.
As you can see, the anchor takes two attributes - the “href” attribute specifies the target of the link, while the “title” attribute is a label which identifies the link. The browser may, optionally, display this label.
Pretty Pictures
So we’ve formatted and linked your text - now how about making things a little more cheerful with an image or two. WML allows you to use the <img /> tag to add images to your WML documents - here’s an 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="logo" title="Logo">
<p>
<img src="logo.bmp" alt="Our logo" />
<br />
We hope you enjoyed this article. Keep coming back to melonfire.com for more
great open-source tutorials!
</p>
</card>
</wml>
As in HTML, the <img /> tag needs a reference to the source image - this is specified via the “src” attribute. Currently, WML supports a file format called WBMP, and can also display one-bit monochrome bitmaps - which is actually what we’ve used in the example above.
To convert your images to WBMP format, take a look at the online conversion tool at http://www.teraflops.com/wbmp/, or the image editing tool that comes with the Nokia toolkit mentioned above. If you’re using a simulator to test images, though, we should mention that it’s preferable to test this aspect of your WML pages on an actual phone - in our experiments, we found that while the Phone.com simulator could display BMP files, the WAPalizer service choked on both BMPs and WBMPs. Our conclusion: testing on the target platform is by far the preferred - and error-free - method in this case.
The <img /> tag can take a number of attributes as well:
The “alt” attribute specifies an alternative label for the image.
The “align” attribute specified the alignment of the image - top, bottom or middle.
The “height” and “width” attributes allow you to control the size of the image.
That’s about it for this week. In the concluding part of the article, we’ll be looking at some of WML’s other constructs like tables and templates, and we’ll also show you how to add interactivity to your pages with events and form elements. See you then!
Note: All examples in this article have been tested on Phone.com’s UP.SDK 4.0 and the WAPalizer at http://wwww.gelon.net/ YMMV!
This article was first published on 30 Jun 2000.