Originally Published: Tuesday, 28 August 2001 Author: S.D. Campbell
Published to: develop_articles/Development Articles Page: 1/3 - [Printable]

WAP and the Wireless Web: Part 2

Sean Campbell continues his series on the wireless web and Linux with part 2 of his look at WAP. In this installment we take a closer look at WML, the language used on your server to define a document for a wireless device.

Marking Up the Wireless Web   Page 1 of 3  >>

Last time we looked at the basics behind what WAP, the Wireless Application Protocol is and how it works. We also looked at how to set up a basic web server to serve WAP pages. This article, the second of three that look at WAP, will look at the structure of a WAP document, and the language that is used to define it: WML.

Before we move on with looking at WML, a quick note about development environments. While there are many IDEs for WAP available on the Wintel platform, there are relatively few for Linux. Because WML and WMLScript documents are simply raw text parsed by a micro-browser, the best bet for a Linux developer interested in WAP would be to fall back on your favorite text editor (be it Emacs, Vi or Pico) for your coding needs. All of the examples provided can be cut and paste into any text editor, and if saved with the .wml file extension, will be served as valid WML.

WML - Marking up the Wireless Web

WML, or the Wireless Markup Language should look similar to most web designers and developers. If you have experience hand-coding HTML, or better yet, XHTML, you should have no problem working with WML. Like XHTML, WML is a mark-up language derived from XML and takes many of its conventions. When we develop WML decks, we're working with well-formed XML documents, which must conform to several criteria.

A well formed XML document (and by extension a WML document) contains one or more elements consisting of start and end tags, that are properly nested inside one another. One element, called the document element, contains all other elements that describe the document's structure and layout. In WML, this is the <wml> tag, and there can be only one opening <wml> tag and one closing tag in each WML document. Every subsequent tag must be properly nested inside this document element.

In addition to being well-formed XML, a WML document must also be valid WML as described by the WML Document Type Definition (DTD), which can be found on the WAP Forum website at http://www.wapforum.org/DTD/wml_1.1.xml. As each micro-browser should also be a WML validator, every valid WML document must include a doctype reference to these WML DTDs.

Finally, each WML document describes a collection of WML pages, each page being a small amount of data, which can be shown on a micro-browser screen, one at a time. If you think of a set of playing cards, and how they can be passed from one bearer to another as a stack, then you will understand the reason why WML pages are called cards, and WML documents are collections of cards called decks. A card is described by the <card> element, and all the cards are properly nested inside the <wml> element.

So how does all this come together? Let's look at a simple 'Hello World' 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 title="A Hello World page" id="card1"> <p>Hello, Linux.com!</p> </card> </wml>

As you can see, there are quite a lot of similarities to XHTML, and its older sibling, HTML. Because WML is descended from XML the first line must indicate what version of XML is being used. The second declaration, the DOCTYPE element, outlines the version of the WML DTD [1] we're using for this particular page. This line must be included as is for validating micro-browsers to properly render the WML document. The bottom half of our mark-up consists of our document element <wml> with a single card nested inside. The <p> tag is the same in WML as XHTML and HTML: it indicates a new paragraph.

You'll notice that all our tags are in lower-case. This isn't just a convention as in some HTML. In WML, and XML, tags are case-sensitive. The WML DTD specifies all tags as being in lower case. You'll also note that the <card> tag contains an attribute called title. This is very similar to the <title> tag in HTML, in that the value specified by the attribute after the equal sign appears as the title for the page in the micro-browser. All attribute values in WML must be inside single or double-quotes. The other attribute in the <card> element is the card's id. This will become important when we start linking cards together.

Before we go any further, it is important to pause for a word about design. As has been covered before, WAP is a very tricky environment to work within. There are constraints on bandwidth, and the amount of data that can be passed to a micro-browser over a wireless link; there are constraints to the amount of visual space that content will be displayed within; and there are a vast and wide ranging number of different wireless devices, all of which have different ways of displaying this content.

Designing content for a WAP device can be like herding cats at times. The real trick is to break content down into small, easily digestible chunks. Each chunk will become a card, and a series of related cards will become a deck. It is important to remember not to make your decks too large. A deck must be downloaded all at once by the micro-browser, and some devices (like Nokia's 7110 phone) have hard limits on the size of a deck they can process. When in doubt, slim down your content, and organize it into smaller units. More decks may mean more communication with the gateway/server, but it also means an easier time on the micro-browser. WAP design will always be a balancing act.

WML would be pretty useless if we didn't have the power of hypertext to present our data. To link to another card in the same deck, or another deck, we would use the <a> element, which should look familiar to any web designer or developer. The <a> tag is used in WML the same way that it is used in HTML. If we were to link to the linux.com WML page by using the previous example deck, simply replace the text line with the following:


<p>Hello, <a href="http://www.linux.com/index.wml">Linux.com!</a></p>

This would of course assume that Linux.com contained an index.wml page. To link to another card in the same deck, preface the id of the card being linked to with a pound sign (#) and use that as the href value. For 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 title="A Hello World page" id="card1">
		<p> this links to <a href="#card2">Card 2</a></p>
	</card>
	<card title="Card 2" id="card2">
		<p>Hello, <a href="http://www.linux.com/index.wml">Linux.com!</a></p>
	</card>
</wml>

This deck consists of two cards, the first that links to the second which then links to Linux.com.

As mentioned before, the main design issues relating to WAP documents revolve around the constraints imposed by WAP devices. Due to these constraints, many WML pages are text only, with very few WBMPs or tables (which are poorly supported by micro-browser in any case) included. For this reason text formatting becomes of paramount importance. Again we see the limits of wireless devices. The wide range of HTML tags available to us for text formatting are not present in WML. Instead we rely on our most basic tags for both paragraph and character formatting.

We've already seen the paragraph, or <p> tag for use in paragraph formatting. Like its HTML cousin, the WML <p> element has an align attribute which can be used to left, center or right justify test in the micro-browser. In addition to the <p> element, there is a line break tag. This tag, <br/> is similar to the HTML line break tag with one difference, because it has no closing tag (it is called an 'empty-element') we must include the back-slash before the closing angled bracket for it to be a valid WML tag.

To format characters themselves, we can use the <em> element for emphasis, the <strong> tag for strong emphasis, <big> to increase the font size, <small> to decrease the font size, and <b>, <i>, and <u> to create a bold, italic, or underline effect respectively. Each of these elements require a closing tag to be valid WML.

While images are a rarity in WML pages, there is support for the WBMP or Wireless Bitmap formatted image. WBMPs are 1-bit images, meaning that they are made up of pixels that contain only 1-bit worth of color information: black, or white. This makes WBMPs very small and easy to transmit through the narrow wireless bandwidth. WBMPs are usually physically small as well, because an image too high or wide may not be displayed properly on a small cellular phone screen. WBMPs are usually created by using an image converter to convert Gifs, PNGs or Jpegs to the WBMP format.

Embedding an image in a WML page is as simple as using the empty-element <img>. Like HTML, the WML <img> tag takes a src attribute which points to the path the image can be found at, and an alt attribute which provides a text alternative should the image not be available. Other attributes include hspace and vspace which provide, in pixels, horizontal or vertical space around the image, and height and width attributes, used to size the image.

An example of using an image might be the following:


<p><img src="tux.wbmp" alt="Tux The Penguin" /></p>

Be cautious and judicious when using images in a WML page however, they have a tendency to eat up screen real estate and bandwidth, and not all micro-browsers, or converters are created equal, meaning you may sometimes be faced with an image that doesn't work.





Marking Up the Wireless Web   Page 1 of 3  >>