WAP for fun and profit - Part 1 - Basic WML format

Why WAP?

For plain-old-web-browsing, staring at a tiny monochrome screen offers little in the way of excitement. Where WAP can come into good use is in the creation of business applications for remote users. Consider the following situations:

1. A large plumbing firm who wastes many hours having their plumbers travel back to the office to get new job information.
2. Technicians needing to get data back from a remote location to a central server in real time.
3. A large city council looking to streamline car parking services and kill off those pesky meters.

1. Each plumber is given a WAP capable phone and can receive their job information while in the field, they can also input data back to the central server, such as parts used and time spent.
2. Technicians can input data directly into the WAP device and have the master database updated immediately.
3. WAP is used as a medium to provide customers a wireless way to set parking times, and update their parking without having to use a parking meter.

Your first WML page

<?php 
header("Content-type: text/vnd.wap.wml"); ?>
echo "<?xml version=\"1.0\"?>"; // this is only added server side in this example to avoid php trying to parse the xml tag
?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
  <card id="card1" title="Basic WAP Page"> 
   <p>
    <big>		
     My first Wap page
    </big>
    <br/>	
    <small>
     hello!
    </small>
   </p>
  </card>
</wml>

How it all works

The document headers

The first thing we notice is that WML has an XML-based structure. (This will be familiar to anyone who has coded in XHTML.) WAP devices are extremely strict and will not display malformed content. All you will get is a generic error message, so always double check and test at each step of your development. At the server side, (in PHP for this example) we have added a content-type header (to correctly inform the device of the content that follows), then an xml declaration to inform the browser of the structure of the document (well-formed xml). Before the first <wml> tag we add a document type definition. (Currently there is only one document type definition for WML 1.0.) According to the wapforum, a document type definition "is a formal description in XML declaration syntax of a particular type of document. It sets out what names are to be used for the different types of element, where they may occur, and how they all fit together."

The document structure

Similarly to an HTML or XHTML document, the actual content is surrounded by <wml></wml> tags. One difference in WML is that each page is called a "card", and several (or even only one) "card" comprise a "deck". Only one card is displayed at a time and can link to other "cards" in the "deck" via anchor links which reference the id of the card you wish to display. For example a link like this:

Please Note!

1. All displayed content in the WML page must be contained in <p></p> tags or it will not be recognised as well formed and will not display.
2. The card id cannot be a single digit or character, there must be at least 2 digits (alpha or numeric) in the card id for it to allow the page to be rendered correctly.

Getting server side processing going.

Ok, we can display a static page, but how can we hook this up to interact with our database, or get something more exciting happening?

WML has a different way of POSTing or GETTING variables to the server. In this example we will look at the old POST method and how to post variables to the server.

<?php 
header("Content-type: text/vnd.wap.wml"); ?>
echo "<?xml version=\"1.0\"?>"; // this is only added server side in this example to avoid php trying to parse the xml tag
?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
  <card id="card1" title="WML Post to server">  
   <p>		 
    <big>
     Pick your favourtite colour :
    </big>			
    <br/>
    <select name="favColour">
     <option value="red">red</option>
     <option value="yellow">yellow</option>
     <option value="pink">pink</option>
     <option value="green">green</option>
    </select>
    <do type="accept" name="next" label="save">
     <go href="processColour.php" method="post">
      <postfield name="userColour" value="$(favColour)"/>
     </go>
    </do>
   </p> 
  </card>
 </wml>
	  

How WML "forms" and submitting data works.

Boy does that select list look familiar or what? Yes WML supports the select list tag as well as the same option tag format as HTML. The difference here the code for posting the data to the server.

Firstly, the "do" tag defines what type of task is to be performed. Basically this "accept" task causes the label "save" to be displayed in the browser screen (usually at the bottom left).

Secondly, the "go" tag defines the url that the data is to be sent to and the method by which it is to be sent ("post" or "get" - in lowercase.). This is the most similar to the HTML "form" tag.

Thirdly, the "postfield" tag defines which form fields will post data to the server. Not all form fields are automatically sent to the server like in HTML, they must be defined in the "postfield" tags or no data will be sent to the server. The postfield tag must have a different name than the form value it will send. In this example, the name of the variable that will be sent to the server is "userColour", which has the value of "$(favColour)" assigned to it. This is WML''''s way of saying "take the value of ''''favColour'''' and post it to the server with the name ''''userColour'''' ". Cumbersome yes, but that''''s the way it is at the moment, people.

Summary

So far we have covered basic WML formatting and begun to see how we can interact with the server. In Part two we will examine some more of WML''''s input options, as well as navigation and menu structure.
Although WAP does still has many pitfalls and weaknesses (such as security, usability and browser discrepancies - does this remind anyone of the early internet?), it can already provide solutions to some of our customers. We, as developers, just need to help some customers see how they can use this technology to enhance their existing processes.