XML.com: XML From the Inside Out
oreilly.comSafari Bookshelf.Conferences.

advertisement

Developing Wireless Content using XHTML Mobile

April 14, 2004

Creating unified solutions has always been a challenge in the mobile space. Until recently the industry has been solidly divided: all mobile providers aggressively pushed their own proprietary platforms and languages. For example, Nokia and Openwave developed WML and WAP for consumption in North America. In 1999, NTT DoCoMo launched the popular i-Mode service in Japan based on Compact HTML. Mobile developers had to become specialists, learning the intricacies of each platform. They also had to learn to create content compatible with hundreds of devices. Development took weeks and months and projects were very expensive to implement.

Focused on solving some of these issues, the W3C designed XML technologies to foster industry standards, interoperability and platform independence. Introduced in October 2001, Extensible HTML Mobile Profile stands to make the biggest impact on the industry: it is the amalgamation of XML and HTML designed for mobile devices and supported by many telecommunication companies such as NTT DoCoMo, Nokia, Ericsson and Openwave. Together, these companies form the Open Mobile Alliance (OMA).

This article will show you how to create XHTML Mobile Profile documents that render on multiple devices. We will also demonstrate how set up an XML-based multiserving framework. Finally, we will show you can transform your XHTML to WML without having to make any changes to your XHTML code.

Setting up your Mobile Development Environment

If you plan on successfully developing any mobile content using XHTML, you need the right tools at your disposal:

  • Authoring tools: You can use anything from a text editor to a full IDE to create your mobile websites. Here is a short list of free IDE tools targeted to specific devices and platforms. Please note that the Nokia Mobile Toolkit was one of the tools used to test the XHTML code in this article. The WAP content was tested using the Ericsson WapIDE:
  • Device Emulators and Simulators: All the major telecommunication companies offer software development kits for their devices. Here is collection of links to download emulator and simulators to test your mobile code:
    • Openwave Phone Simulator: http://www.openwave.com
    • Motorola: http://www.motocoder.com
    • Sony Ericsson: http://www.ericsson.com/mobilityworld
    • Nokia: http://forum.nokia.com
    • Web Server: You'll need a web server to deploy your mobile web sites, especially if you are planning on generating dynamic or database driven content. There are many server platforms available including Apache and Microsoft. You can also use one of a wide variety of server scripting languages such as PHP, JSP, ASP and ColdFusion. If you want to develop WAP based content derived from XHTML, you can download a WAP Gateway server on Ericsson's Indonesian site: http://www.ericsson.co.id/mobilityworld/download/ All of the examples featured in the article were tested on an Apache server using PHP. You must enable XSLT support in your PHP.INI file to try them out. For more information, please refer to the following page on the official PHP website: http://ca.php.net/xslt
    • Actual Mobile Devices: Also known as "real-world" testing. Many companies offer equipment loaner programs to developers. Borrow devices from friends and family. Or visit a provider (such as Sprint, T-Mobile or AT&T) to do some "window shopping". Who knows, they may allow you to test out your web content on a variety of devices.

    Case Study: XML.com Mobile Articles

    To demonstrate how XHTML content can be reused on multiple devices, we created a simple XHTML Mobile Profile web page displaying article titles from the mobile section of XML.com. In a fully functional application, it would be more practical to bring in the data using an RSS feed or database. Here is a complete analysis of the XHTML file:

    
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
      "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
    

    First, we declare the page as an XML document. Then we set the DOCTYPE to XHTML Mobile 1.0 and we associate it to the DTD located on WAPForum's server. A Document Type Definition outlines what tags are allowed and how they should be formatted on the page. If you want to implement XHTML Mobile Profile using Openwave's proprietary extensions, you must declare a different DOCTYPE:

    
    <!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"
    "http://www.openwave.com/dtd/xhtml-mobile10.dtd">
    

    The rest of the document consists of a simple well-formed HTML Page with links to the mobile articles on XML.com:

    
    <html>
    <head>
    <title>XML.COM Mobile</title>
    

    XHTML Mobile Profile supports Wireless Cascading Style Sheets (WCSS). We embed the style sheet into the page using the LINK tag:

    
    <link rel="stylesheet" href="xmlmobile.css" type="text/css"/>
    

    There are alternative ways of embedding stylesheets into XHTML Mobile Profile pages. Since the document is XML based, you can use an XML declaration to bring in your styles. Notice that the media type is set as "handheld". The following line of code is usually right below the XML declaration. Here is an example of a typical xml-stylesheet declaration:

    
    <?xml-stylesheet href="xmlmobile.css" media="handheld" type="text/css"?>
    

    All the text within the body tag is contained within block level elements such as Header 1 and Paragraphs as outlined in the XHTML specifications:

    
    </head>
    <body>
    <h1>Current Articles</h1>
    <p><a href="http://www.xml.com/pub/a/2004/01/28/binaryxml.html">
      Binary Waltz, Play On</a></p>
    <p><a href="http://www.xml.com/pub/a/ws/2003/08/19/mobile.html">
      A Web Services Strategy for Mobile Phones</a></p>
    <p><a href="http://www.xml.com/pub/a/ws/2003/08/19/ksoap.html">
      Low Bandwidth SOAP</a></p>
    <p><a href="http://www.xml.com/pub/a/2003/08/13/deviant.html">
      Binary XML, Again</a></p>
    </body>
    </html>
    

    For more detailed information on XHTML, take a look at this great tutorial found on the W3Schools website: http://www.w3schools.com/xhtml/default.asp

    Introducing Wireless Cascading Style Sheets

    XHTML is a versatile document type. Not only will it behave like a regular HTML page, but it also structures data like an XML file. In this new paradigm, data elements and presentation elements are treated as separate entities. Wireless Cascading Style Sheets provides the presentation elements to XHTML Mobile Profile documents.

    Here is an example of Wireless CSS code which can be applied to our XHTML page. We've defined four styles for four HTML elements: Heading 1, Paragraphs, Anchors and the Body tag:

    
    h1 {font-size:x-large;color:#4040ff;text-align:center;
        text-decoration:underline;}
    p {border:1px #6060ff solid;background:#f0f0ff;
        text-align:center;font-size:medium;padding:4px;}
    a {color:black}
    body {background:#c0c0ff;}
    

    Here is a screenshot of the XHTML/WCSS combination in Internet Explorer 6.0:

    screenshot

    Some devices will override the CSS tags you've defined. For example, if you are using a monochromatic device the colors will obviously be ignored. Also keep in mind that the implementation of CSS in mobile device browsers is a rather new development. Don't be surprised if you get inconsistent results when you test on different devices, especially image and font rendering.

    Due to device limitations, mobile browsers usually can't cache files like regular web browsers. Keep in mind that every time a user will access your page, the CSS file will download into the device. Interestingly enough, most wireless vendors (Nokia, Openwave, AU Systems and Access) have added support for embedding inline styles on your XHTML (which bypasses the multiple file download problem, but also ties your presentation code to your data). Inline styles are not officially part of the Mobile Profile standard.

    Choosing the right XHTML Mobile Profile MIME Type

    You have to configure appropriate MIME types to host XHTML Mobile Profile pages on your web server. The Open Mobile Alliance recommends you use the following MIME type for XHTML Mobile Profile content:

    
    application/vnd.wap.xhtml+xml
    

    Realistically, the implementation of XHTML MP differs from the stated specifications, especially in regards to WAP support. The only company that supports WAP in their mobile browser is Openwave. Most mobile browsers from OMA members support basic XHTML; therefore you can also set the MIME type as application/xhtml+xml.

    The MIME type is usually used for browser validation. Either one is suitable for outputting XHTML Mobile Profile. Your choice of MIME types will depend on the presence of WAP based features in your Mobile Profile documents.

    Handling Different Implementations and Vendor-Specific Features

    XHTML Mobile Profile is a step in the right direction, but there are still challenging obstacles ahead in regards to multi-platform wireless development. Many vendors have chosen different implementations of XHTML Mobile Profile in their mobile browsers. For example, the Access browser on Japanese DoCoMo cellphones supports the stripped down XHTML Basic rather than the entire Mobile Profile specifications. New Nokia phones can handle XHTML Mobile Profile, but without the WAP namespace support.

    A solution to get around these differences is to go with the lowest common denominator -- create web pages and content in strict XHTML Basic, which is theoretically supported on all devices. Unfortunately, this solution doesn't really take into account or harness the amazing proprietary features found on many devices. Fortunately, you can have the best of both worlds without having to write down or research the capabilities of an untold number of devices.

    Pages: 1, 2

    Next Pagearrow