XML.com

Developing Wireless Content using XHTML Mobile
by Jean-Luc David | Pages: 1, 2

Using WURFL and PHP to Detect Mobile Devices

The Wireless Universal Resource File (WURFL) open source project has developed an ambitious XML configuration file tracking the capabilities of over 400+ mobile devices. The creation of such resource files is called resourcification. The ASP.NET Mobile Controls has similar device capability information found in the Machine.config file. You can visit the WURFL Project website at the following link: http://wurfl.sourceforge.net. Here is how you deploy WURFL on your website using PHP:


<?
require_once('wurfl_class.php');
$device=new wurfl_class($HTTP_USER_AGENT);

First, we bring in the WURFL library and pass the user agent as a parameter into an instance of the WURFL class called $device.


if($device->browser_is_wap){
  header("Content-Type: text/vnd.wap.wml");
  echo '<?xml version="1.0" encoding="ISO-8859-1"?>'."\n";
}
?>

Once the object is instantiated, we can programmatically check the device capabilities (in the above example, we are checking for the existence of a WAP browser). The WURFL will match the user agent within the XML file, check the resources available to the targeted device and return a Boolean value. The WURFL project is derived from a W3C initiative called User Agent Profile (UAProf). You can find out more information about the initiative at the following link: http://www.w3.org/TR/di-dco/

Outputting Device Specific Code using XSLT

A useful feature of XHTML is that it can be manipulated as XML. Extensible Stylesheet Language Templates can be used to transform XHTML into WML or any other proprietary mobile formats:


<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" omit-xml-declaration="no"
  doctype-public="http://www.wapforum.org/DTD/wml_1.1.xml" />

First, we make our XML declaration and also declare the XSL namespace. Then we define the output format for the content. We want our WML output to retain an XML structure. We also want to output a WML document type:


<xsl:template match="/">
<xsl:text disable-output-escaping="yes">
&lt;!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
  "http://www.wapforum.org/DTD/wml_1.1.xml"&gt;
</xsl:text>

The xsl:template element is used to associate our XSL template with the XHTML document. The match="/" parameter indicates that we want to apply our custom template to the entire document. The WML DOCTYPE needs to be declared in our WML file. Since we don't want it to be included as a node in our XSL file, xsl:text is used to write out the DOCTYPE as text. The disable-output-escaping attribute allows the greater than (>) and lesser than (<) entities to be converted into start "<" and end ">" brackets.


<wml>
<card id="menu" title="{html/head/title}">
<p align="center"><b>
<xsl:value-of select="html/body/h1"/>
</b></p>

Now it's time to set up our WML deck. The title of the first card will correspond to the title tag in our XHTML page. Underneath the title, "Current Articles" will be extracted from between the h1 tags in the XHTML page and placed in its own paragraph.


<xsl:for-each select="html/body/p">
<p align="center">
<a href="{a/@href}"><xsl:value-of select="a"/></a>
</p>
</xsl:for-each>

Next step, we need to iterate through and extract all the links. The {a/@href} directive retrieves each hyperlink from the XHTML page and <xsl:value-of select="a"/> extracts the text between each anchor tags.


</card>
</wml>
</xsl:template>
</xsl:stylesheet>

Now we will look at the PHP code that will transform our XHTML document using the XSL. First, we send out the WML MIME type in the header stream then instantiate the WURFL object to check if the user's browser is WAP enabled. If the answer is yes, then we pass the locations of the XSL and XHTML files into two variables. Notice that locations are stated using the file:// prefix to specify the absolute file path of both files on the server. This is to work around a known bug in Sablotron (the PHP XSL library). The xslt_create and xslt_process methods combine both files and outputs a WML deck based on the template specifications:


<?
header("Content-type: text/vnd.wap.wml");
require_once('wurfl_class.php');
$device=new wurfl_class($HTTP_USER_AGENT);
if($device->browser_is_wap){
$xhtmlfile="file://D:/localhost/xmlmobile-articles.html";
$xslfile="file://D:/localhost/xmlmobile-wmltransform.xsl";
$xsltransform=xslt_create(); 
$xslresult=xslt_process($xsltransform,$xhtmlfile,$xslfile); 
print($xslresult);
xslt_free($xsltransform);} 
?>

Here is a screenshot of the XHTML Mobile Profile page as seen in Nokia Mobile Browser. The XHTML displays perfectly complete with the colors provided from the Wireless CSS:

If we use a WAP enabled browser, the results appear as a WAP deck. The stylesheet does not render but the web page is still perfectly functional.

Debugging your XHTML Mobile Profile Site

Validating your work is a great way of tracking errors, especially if you are experiencing rendering problems. As an added benefit, validators will give you instant feedback on your code. Here are links to the validators used to test the code in the article:

W3C XHTML Validator -- http://validator.w3.org/
W3C CSS Validator -- http://jigsaw.w3.org/css-validator/
W3Schools WML Validator -- http://www.w3schools.com/wap/wml_validate.asp

Most mobile browsers are somewhat forgiving in respect to bad code. Ultimately, the validator will match up your code to the specs outlined in your DTD.

validation

Here is a list of common problems and solutions in creating XHTML Mobile Profile content:

Some mobile browsers have limited or no table support: The obvious solution to this problem is to stop using tables. Some browsers will display tables with thick cell borders which may be a problem from an esthetic perspective. WAP based browsers can't display tables at all, therefore you may want to use alternatives. For example, instead of using tables for a menu use an ordered list. If you absolutely need to use tables, you can detect table support by using the getDeviceCapability('table_support') method. For example:
```
<?
require_once('wurfl_class.php');
$mobiledevice=new wurfl_class($HTTP_USER_AGENT);
if ($mobiledevice->getDeviceCapability('table_support')){
// Display a table
}
?>
```

Handling images in multiple browsers: Older WAP browsers only support Wireless Bitmaps (WBMP files). To deal with this situation, you can create WBMP images for each of the GIFs or JPEGs featured on your web page. Using the WURFL classes, you can dynamically swap the images on the page. For example:


<?
require_once('wurfl_class.php');
$mobiledevice=new wurfl_class($HTTP_USER_AGENT);
if($mobiledevice->browser_is_wap){
// Output the WBMP image on WAP enabled devices
echo '<img src="technewslogo.wbmp" alt="TechNews" />'."\n";
}else{
// Output the standard GIF image
echo '<img src="technewslogo.gif" alt="TechNews" />'."\n";
}
?>

Without a doubt, the best method to track and troubleshoot your XHTML Mobile Profile page is to test it in a wide variety of mobile devices and emulators.

Conclusion

XHTML Mobile Profile has the most vendor support, therefore is the best choice for developing mobile web pages. By adding resourcification capabilities into your application, you can cut down on development time and multiserve hundreds of devices. XSL is a good choice for converting your XHTML data into WML or any other types of mobile content. The introduction of XML technologies in the mobile space has simplified many time consuming tasks and provides a powerful toolset for the wireless developer. Feel free to apply these techniques into your own applications. Good luck!