XSLT – A Wired and Wireless Case Study

Author: Jaidev

The Multi-channel Arena

The information arena is buzzing ever more with activity these days. Apart from the common web browser, small devices such as mobile phones, PDAs and hybrids of these are being increasingly used to retrieve information, to access media content, and of course to communicate.

Creating separate content for each type of device or channel entails redundant effort and is very expensive. Instead, a far better approach is to have the same content and merely repurpose it for different channels. Thus the central paradigm of multichannel applications these days is to have common XML content and apply device/channel different stylesheets (XSLTs) to the XML content to make it appear best on the devices targeted.

Let us consider the case of displaying our favorite List of Articles on a Web Bowser and on a Mobile Phone Browser. Displaying information in a web browser is simple – use HTML! To display information on a mobile phone, you would need to use another markup language called the Wireless Markup Language or WML (well you could use VoiceXML or SMS or MMS but for now let us stick with WML!).

 

However, it is not quite enough to use an XSLT to render to multiple devices and formats. There are a few additional steps to be taken to understand the kind of device making the request for information and to respond to it appropriately. Let us therefore look at the flow of a typical multi channel application.

 

Flowchart for rendering to multiple channels

 

In order to render the same XML content to two or more different formats (such as HTML or WML) automatically, we would need to use a multi channel application framework such as the one shown in Chapter 12. The flow of information and the components involved can be shown by means of the diagram below.

 

The key points to note are that a “generic” resource is requested. This means that the device requesting for a resource such as a page need not request specifically for a HTML or a WML page. It can merely request for a generic (i.e. device independent) JSP, ASP or PHP page for instance. Therefore - one URL serves all devices.

 

 

 

The other important point to note is that the Script (JSP, ASP, PHP etc) can determine the kind of device that is making the request by examining an HTTP header that is called “User-Agent”. A reasonably good (and free) list of WAP user agents can be found at http://webcab.de/wapua.htm. Once the user agent has been identified its characteristics can be obtained from a predefined database and an appropriate XSLT transform can be applied.

 

These XSL transforms can be executed at two locations:

¨      Server Side – Typically WAP browsers on mobile devices are too small to provide the full functionality of XSL Transformations. In these cases, the transformation must be done at the web server and the content-type must be set before the content itself (WML for WAP) is sent back to the mobile device.

¨      Client Side – The latest versions of IE and Netscape Navigator browser can however perform XSL transformation directly. So the server can simply send XML back directly to the browser along with a link to the XSLT and leave it to the browser to transform and render the content.

 

Transformation scripts – WML and HTML

 

Let us now look at transformation scripts – wml.xslt and html.xslt which will transform our original “Articles” XML document shown in Chapter 13 (not repeated here) into WML and HTML respectively.

 

Text Box: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">        <xsl:output omit-xml-declaration="yes"/>        <xsl:template match="/">              <wml>                     <card id="card1" title="Articles">                            <xsl:for-each select="ARTICLES/ARTICLE/ARTICLEDATA">                                  <p>                                         <b>Article Name: </b>                                         <xsl:value-of select="TITLE"/>                                         <br/>                                         <b>Synopsis: </b>                                         <i>                                                <xsl:value-of select="AUTHOR"/>                                         </i>                                         <br/>                                         <br/>                                  </p>                            </xsl:for-each>                     </card>              </wml>        </xsl:template> </xsl:stylesheet>  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


XSLT File:  wml.xslt

 

 

 

 

Text Box: <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">        <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>        <xsl:template match="/">              <html>                     <body>                            <h2>List of books</h2>                            <table border="2">                                  <tr>                                         <b>                                                <th>Title</th>                                                <th>Author</th>                                                <th>Abstract</th>                                                <th>Body</th>                                         </b>                                  </tr>                                                                  <xsl:for-each select="ARTICLES/ARTICLE/ARTICLEDATA">                                         <tr>                                                <td><xsl:value-of select="TITLE"/></td>                                                <td><xsl:value-of select="AUTHOR"/></td>                                                <td><xsl:value-of select="ABSTRACT"/></td>                                                <td><xsl:value-of select="BODY"/></td>                                         </tr>                                  </xsl:for-each>                            </table>                     </body>              </html>        </xsl:template> </xsl:stylesheet>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


XSLT File:   html.xslt

 

Outputs – WML and HTML

 

The output on the Web Browser (shown using XMLSpy) and a Wap Phone (courtesy www.wapsilon.com) are shown below.

 

 

Web Output

 

Phone Output

 

(Aside: To view WML you need to download a WAP emulator. For a simple start, download the free version of the Klondike WAP browser from www.apachesoftware.com. For this tutorial, I recommend using this browser or you could also use an online web based WAP emulator such as the one available from http://www.wapsilon.com/. If you are looking at serious development, you can get hold of a more complete mobile toolkit such as the one from Nokia (forum.nokia.com))

 

You can notice that the web output shows a lot more content and in a tabular form of presentation as against the simpler phone output, since a mobile phone’s display real estate is much lesser than that of a web browser. However, most importantly we have demonstrated that the same XML content for “Articles” has been used to display information on two different endpoints using different XSLTs. The same paradigm could well be extended to other markup languages such as VoiceXML (VXML), Interactive TV etc (by use of corresponding XSLTs) to make the availability of information far more ubiquitous.

 

The Power of Transformations

 

The above case study has demonstrated the power of XML transformations. The theory we learnt in the earlier chapters has now been realized into an exciting practical application. With the huge proliferation of devices in the market today and a highly connected global IT infrastructure, the power of XML (using XSLTs and standard scripting) can truly be harnessed to bring information to every mode and medium of consumption.

 

With that, we have reached Camp III – the penultimate camp in our climb (that hasn’t been too steep I hope!). We will round off this journey with the last phase, where we will see a few key XML-related specifications.

Copyright© 2004-2006 Aleksey Nudelman