Converting WML to XHTML


Mobile devices with support for XHTML content are now shipping in volume. Many of these new devices include Openwave Mobile Browser 6.1, which is compatible with the WAP 2.0 standard and supports XHTML Mobile Profile with CSS, WML 1.3, and cHTML. To fully exploit the graphical capabilities of these new devices, application developers should use XHTML Mobile Profile and CSS to implement the application user interface. In many cases, this will require converting legacy WML code to XHTML.

While most of the presentation features in WML are available in XHTML, there isn't always a 1:1 mapping of tags, and some XHTML tags render differently than their WML counterparts. This tech note discusses and provides examples demonstrating how XHTML can be used to achieve the functionality of WML cards and decks, navigational menus, timers, and local variables. The examples are implemented in WML 1.3 and XHTML Mobile Profile 1.0, and are designed to work on Openwave Browser version 6.1 and higher. To test the examples using the same Mobile Browser code included in real devices, download and launch Openwave SDK 6.1.

The following guidelines are by no means intended to be a comprehensive application migration guide, but instead should be used as a starting point for converting legacy WML code to XHTML Mobile Profile.

Cards and Decks

In WML, the <card> and <deck> elements are used to deliver logical groupings of content in a single HTTP response. This can be a significant performance improvement, since it minimizes the number of round-trips to load the content over the network. For example, a newspaper can be implemented as a single deck, with each story implemented and displayed to the user as a separate card. XHTML Mobile Profile does not contain equivalents for the <card> or <deck> elements, but similar functionality can be accomplished by constructing multiple XHTML pages into a single MIME multipart. Multiple pages can be co-delivered and linked to each other via this mechanism. For details on how to construct and deliver a MIME multipart response with multiple XHTML pages, refer to the following tech note:

How to Send a Multipart Messsage

Navigational Menus

Openwave Mobile Browser allows WML applications to use the <select> element to present a navigational menu, where each item in the menu is automatically numbered and has a unique accesskey implicitly assigned to it. The syntax for such a menu looks like this: 
<select> 
  <option onpick="foo1.wml">item 1</option> 
  <option onpick="foo2.wml">item 2</option> 
  <option onpick="foo3.wml">item 3</option> 
</select>
In XHTML, the <select> element can only be used to assign an input value to a variable. To display a navigational menu in XHTML, create an ordered list of links and be sure to explicitly assign a unique, sequential accesskey value to each link, like this: 
<ol>       
  <li><a accesskey="1" href="foo1.html">item 1</a>       
  <li><a accesskey="2" href="foo2.html">item 2</a>       
  <li><a accesskey="3" href="foo3.html">item 3</a>
</ol>
Timers

The WML <timer> element has no equivalent in XHTML. However, similar functionally can be achieved using the HTTP refresh header. Openwave Mobile Browser 6.1 supports the http-equiv meta tag, which allows the equivalent HTTP header functionality to be defined in the XHTML document. The common syntax used to redirect a page to a new URI after a specified length of time looks like this: 
<head>
  <meta http-equiv="refresh" content="30;URL=foo.html" />
</head>
Its important to note that WML timers are only activated by default when the user visits a deck in the forward direction. In contrast, the refresh tag will be executed when the XHTML page is visited in either the forward or backward direction.

Local Variables

WML variables are stored locally in device memory and have global scope (they can be accessed by any card or deck). The following example shows how you can capture a variable via an input field, and then access and display the variable value in a subsequent card: 
<card> 
  <p>
    <do type="accept">
      <go href="#card2"/>
    </do>
    Enter your name:<input name="fname"/>
  </p>
</card>
 
<card id="card2">
  <p>
    Hello $(fname)
  </p>
</card>
In XHMTL, variables are scoped locally within a <form> element. To share a variable across multiple pages, the value must posted to the application server, and then passed back and embedded in a subsequent document (either as a CGI argument in an embedded link or as an embedded default input value). The previous WML code would need to be rewritten to include server-side processing and would look something like this: 
<form action="hello.cgi" method="get">
   Enter your name:
   <br/>
   <input type="text" name="fname"/>
   <br/>
   <input type="submit"/>
</form>
The hello.cgi script in the above example would have to parse the query string for the variable "fname" and return an appropriate response.