A Case Study: WAP and the Wireless Markup Language

As the Web has become more ubiquitous, developers have started looking at other devices to use for Web access. In the last few years, handheld and wireless devices such as pagers, cell phones, and PDAs have become an integral part of our technological society. It makes perfect sense then, to Webenable these devices. That's where WAP comes in. The Wireless Application Protocol (WAP) started out as a proposal to the W3C – called the Handheld Device Markup Language (HDML) – in May of 1997 by a company named Unwired Planet. Almost a month later, HDML was subsumed by the Wireless Application Protocol which drew from elements of both HDML and the Handheld Device Transport Protocol (HDTP) – creations of Unwired Planet. The group of companies working with the newly proposed WAP (including Ericsson, Motorola, and Nokia, alongside Phone.com [formerly Unwired Planet]), felt it should be telephony-based and so they created the WAP Forum. The elusive HDML reappeared in WAP as the Wireless Markup Language (WML), which is what I primarily discuss in this article.

Note WML seems to be an interim approach that will be replaced in the longer term by some form of integration with XHTML, as discussed at the end of this article. WML remains important as an HTML-like XML vocabulary, and probably will be one of the more common transformation targets as XHTML information from the Web gets converted into WML for final delivery to a cell phone. Interim approaches do have a way of sticking around.

Choosing Your Emulator Before you get started in programming an example WML document, you need to find something to enable you to see what it looks like. There are several WAP emulators out there, but it's important to make sure you choose the right one.

WAP emulators

Gelon.Net's Wapalizer (http://gelon.net/). This is the easiest of the three emulators on this list to use. All you have to do is reference a URL to your WML file in the input box and click "Wapalize."

Downloading the Nokia WAP Toolkit To download the Nokia WAP Toolkit (version 1.3 beta or higher), go to the Nokia Forum page (http://www.forum.nokia.com). Click WAP Developers and choose the Registration Form option. Sign up for forum access and select Nokia WAP Developer Forum. Follow the links for the Nokia WAP Toolkit and download it. If you need a Java Runtime Environment, install that as well.

Note Feel free to use the Wapalizer for your WML examples if you're concerned about the size of the Nokia download or having to sign up for the developer forum. Just remember that as of this writing, there are several problems with the Wapalizer.

Note A articlemark isn't considered added until you exit each cell. After you type in your location URL, tab back to the Name cell to complete the addition.

Authoring a WML Document To start your first WML document, click File→New→WML Deck. The document that opens along with the window is the basic template for any WML document. The first two elements are the XML and DOCTYPE declarations. A valid WML document is a valid XML document. Therefore, both the XML and DOCTYPE declarations are required for any WML document. This section of your WML document is known as the prolog and it is considered an error to omit this section from your document:

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

A deck of cards The structure of your WML document revolves around a "deck of cards" analogy. Each singular WML document is a deck, and each card within that deck contains the document's content and navigation information. Think of a card as a DHTML layer or, if you ever used Apple's HyperCard, think of it as a card in a HyperCard stack. What layer is displayed at any given time depends on where the user chooses to click. The next element after the prolog is the <wml> element. This tag defines a WML "deck" and encloses all the "cards" contained within the document. A card is specified using the <card> element. Each card has an id and title attribute. While the id is mostly for internal document use, the title attribute value shows up almost like the HTML <title> element.

Hello World The first program everyone learns when delving into any new computer-based language is Hello World. WML should be no different. You may have noticed that the Nokia template does this for you:

   <?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"  title="Title">
   <p>
   <!-- Write your card  implementation here. -->
   Hello World!!!
   </p>
   </card>
 </wml>

You now have your first WML document sitting right in front of you. Click Compile to make sure it works; it then prompts you to save it. Choose a directory in which to place all of your future WML documents and name this one hello-world.wml.

Navigation One of the primary features of the Web is to enable users to navigate through different pages utilizing links. To get to a new page, you click the link. WML employs links to get from card to card. But instead of using the non-specific <a> element, it uses <do> and <go>. These elements give a little more context than their HTML counterpart.

   <card id="mycard"  title="Welcome to my World">
   <do type="accept"  label="Forward">
   <go  href="#mycard2"/>
   </do>
   <p>
   Click "forward" to go to  the next card.
   </p>
 </card>

The <do> element tells the browser to "do" whatever actions are specified within it. In this case, it says to "go" to the hypertext reference of mycard2 due to the value of the <go> element. The browser screen shows the title of the <do> element and says to Click forward to go to the next card. Add it all together and here's what your WML document looks like:

   <?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="mycard" title="My  World">
   <do type="accept"  label="Forward">
   <go href="#mycard2"/>
   </do>
   <p>
   Click "forward" to go to the next  card.
   </p>
   </card>
   <card id="mycard2" title="Card  2">
   <p>
   Welcome to Card number 2.
   </p>
   </card>
 </wml>

The <do> element has other types besides accept. You can also use help to get some assistance on what you're doing, reset to reset all values, options to give you a set of possible options to choose from, and prev to navigate in reverse. <go /> actually has a few different attributes and values. You've already used href, which can refer to a card within the current deck or a URL that points to a different deck altogether. You can actually specify whether or not you want the user's browser to send an HREF referrer URL to the server specified in the href attribute by using the sendreferrer attribute and setting it to TRUE. If you deal with forms (discussed later in this article), you can specify Get or Post as the value for the method attribute that deals with the corresponding href attribute.

Time-based automation If a developer wants to have a splash page that automatically forwards the user to the main Web page of a site, he or she uses the HTML 4.01 <meta> element with an http-equiv value of refresh. In addition, the developer use a content value that contains the amount of seconds to wait before it forwards the browser to a URL, which is also designated in the content value. You can still use this method in WML, but the editors of the specification have created the <timer> element to allow timed automation between each card in a deck.

   <card id="mycard"  ontimer="#mycard2" title="My World">
 <timer value="150"  />

The preceding code says that after the amount of time specified in the <timer> element (15 seconds entered in tenths), the browser should forward from the current screen to the card whose id value is specified in the ontimer intrinsic event. Let's see how it works:

   <?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="mycard" ontimer="#mycard2"  title="My World">
   <timer value="150"  />
   <p>
   In 15 seconds, we will automatically  forward you to our main page or
   <a href="#mycard2">  go to it yourself</a> if you don't want to wait
   </p>
   </card>
   <card id="mycard2"  title="Welcome to my World">
   <p>
   Welcome to the main page of "My  World."
   </p>
   </card>
 </wml>

Notice that you also add an <a> element. This is exactly like the <a> element used in HTML 4.01 to create a link within a Web page.

User input and forms Everything you've seen so far with WML is basic, run-of-the-mill Web stuff – not the interactivity that phone companies keep claiming in flamboyant commercials. Let's now try to solicit some information from a user. Use of user input WML forms definitely increases the capability for wireless navigators to make choices rather than deal with the content that is thrust at them. Let's start with a simple, text-based input box. This element is based on its HTML 4.01 counterpart:

   First Name:<br />
 <input type="text"  name="firstname" /><br />
 Last Name:<br />
 <input type="text"  name="lastname" />
 To insert the values of the input  elements into a future card, you use $(firstname) and
 $(lastname).
 Welcome $(firstname) $(lastname).  Please click Back to return to the previous page.

With the addition of a few more elements – including <do>, <go />, and <prev /> – you have a fully interactive experience:

   <?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="mycard" title="Welcome to my World">
   <do type="accept"  label="Forward">
   <go  href="#mycard2"/>
   </do>
   <p>
   First Name:<br />
   <input type="text"  name="firstname" /><br />
   Last Name:<br />
   <input type="text"  name="lastname" />
   </p>
   </card>
   <card id="mycard2"  title="My World">
   <do type="prev"  label="Back">
   <prev />
   </do>
   <p>
   Welcome, $(firstname) $(lastname).  Please click "Back" to return to the previous page.
   </p>
   </card>
 </wml>

After clicking OK the second time, select the Options button again and choose Forward. Now you should see a card titled "My World" that says, "Welcome, firstname lastname. Please click 'Back' to return to the previous page." This time you also add the <prev /> element, which creates a function for you to return to the previous page by clicking the button marked Back.

Submitting a form Now that you've determined how to input data into form fields, you must figure out how to get it to your server for processing. The easiest way to do this is by introducing a new element called <postfield>. Also modify your go so it's set up to post to a CGI script.

   <?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="mycard"  title="Welcome to my World"> <do type="accept"  label="Forward">
   <go method="post"  href="www.example.com/form.pl">
   <postfield name="name"  value="$(firstname)"/>
   <postfield name="age"  value="20"/>
   </go>
   </do>
   <p>
   First Name:<br />
   <input type="text"  name="firstname" /><br />
   Last Name:<br />
   <input type="text"  name="lastname" />
   </p>
   </card>
   </wml>

There's no easy way to show you the results. If you have the ability to create an echo CGI script that shows you the values submitted in WML, then go ahead and give it a try. Otherwise, this WML document looks exactly like

form-input.wml.

Images in WML Adding images to your WML is no different from doing it in HTML 4.01, with the exception that the files are in a different format. Instead of using JPG, GIF, or PNG, you use a WAP-only format of WBMP or WAP Bitmap. (See the following section, "Creating WBMP images.")

 <img  src="http://www.zotgroup.com/development/wap/images/sunny.wbmp"  alt="The Sun" />

Create a new card and input this line:

   <?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="mycard"  title="My World">
   <p>
   <img  src="http://www.zotgroup.com/development/wap/images/sunny.wbmp"
   alt="The Sun" /> is  sunny.</p> <p align="center"> How about yours?
   </p>
   </card>
   </wml>
 

Creating WBMP images Currently, the only image format supported in WAP is the proprietary WBMP or WAP Bitmap. These images must be small in both file size and height/width and be black and white. The best way to create a WBMP is to open up a GIF or JPG file in your favorite graphics program, make sure the pixel size corresponds with that of the traditional WAP device screen, and save it. Then open it up in the Nokia WAP Toolkit – there is an option to open "Images for import to WBMP (.gif, .jpg), which strips out the colors. Finally, save it as a WBMP. Let's look at an example of this process. Grab the GIF at http://www.zotgroup.com/development/wap/images/window.gif. Open it in your graphics program; make sure the pixel size is at least 49×42 and it's non-interlaced when you resave it. Open it up in the Nokia WAP Toolkit and resave it as a WBMP. Now add it to the following code. (I include a link to an example so you can see what it should look like.)

   <?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="mycard"  title="WinLove">
   <p>
   <img  src="http://www.zotgroup.com/development/wap/images/window.wbmp"  alt="Windows" />
   </p>
 

Integrating WML and XHTML On October 30, 1998 the WAP Forum, the creators of WML, and the W3C published a document detailing their intent to cooperate on future standards efforts. So far, the WAP Forum has contributed the following three Notes to the W3C:

- Composite Capability/Preference Profiles (CC/PP): A User Side Framework for Content Negotiation ( http://www.w3.org/TR/NOTE-CCPP )

- CC/PP Exchange Protocol Based on HTTP Extension Framework ( http://www.w3.org/TR/NOTE-CCPPexchange )

- WAP Binary XML Content Format ( http://www.w3.org/TR/wbxml )

These documents are the first steps toward the eventual reconciliation and integration of the WAP/WML approach with the W3C/XHTML approach, and members of the WAP Forum have been active in various W3C activities (notably XHTML Basic). Bits and pieces of WAP documents are included in the Modularization for XHTML working draft as a "content negotiation" section, and they are included as references as well. Although it isn't clear how smooth the project will be, or how long it will take these new developments to reach maturity within the cellular architectures that WAP currently dominates, this work may bring cellular technology to XHTML and vice versa. (A few of WAP's competitors already use vocabularies similar to XHTML Basic.) The integration of Internet Engineering Task Force (IETF) work on content negotiation may add yet a few more bumps to the mix.

Until such reconciliation takes place at the standards level, developers can take some comfort in using XHTML's cleaner structures to maintain an easier transformation path to WML documents. Standard XML tools, including the XSLT style sheets described in Article 12, can manage the relatively mild transition from XHTML to WML. This makes it easier to create one document and let programs create the derivatives.