Introduction to Cocoon, XML XSL - Viewing your document in a WAP browser (Page 8 of 9 )
One of the key features of xml is that you can view the same data in a variety of formats. Once you have created a contact book wouldn't it be nice to be able to use the same contact book whenever and wherever you need to look up a contact? Rather than writing conversion tools to reformat your contact for each media you can use different stylesheets on the same data.
As the use of web enabled cell phone and PDAs grows this approach can save you a lot of headaches. The standard for cell phone browsers is (for better or worse) wireless markup language (wml). We want to make our contact accessible from a cell phone browser. To do this we must now create a stylesheet for wml browsers. Create a file called 'address-wml.xsl' and open it in an editor.
The xsl instructions are essentially the same but we are now using wml constructs.
The top of the stylesheet adds a processing-instruction for the type text/wml so the wml can be interpreted and formatted.
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template
match="contact">
<xsl:processing-instruction name="cocoon-format">
type="text/wml"
</xsl:processing-instruction>
The body is a mix of xsl and wml instead of html but is quite similar otherwise. Because users will be viewing this page on a cell phone browser we should rethink the presentation of the data. Taking the small screen and intended use of the page into consideration the first page will only show the name and phone number. If the cell phone user wants more contact information there is a link to the full contact info.
<wml>
<card id="index" title="Your Contacts">
<p align="center">
<a href="WP_BOOKMARK#contact">Phone Book</a><br/>
</p>
</card>
<card id="contact" title="Phone Book">
<p>
<b><xsl:value-of select="name/first-name"/>
<xsl:text>
</xsl:text>
<xsl:value-of select="name/last-name"/></b><br/>
<xsl:value-of select="phone"/>
<do type="accept" label="More">
<go href="#Address"/>
</do>
</p>
</card>
<card
id="Address" title="address">
<p>
<b>
<xsl:value-of
select="name/first-name"/>
<xsl:text> </xsl:text>
<xsl:value-of
select="name/last-name"/>
</b><br/>
<xsl:value-of select="address/street"/><br/>
<xsl:value-of select="address/city"/><br/>
<xsl:value-of
select="address/state"/><br/>
<xsl:value-of select="address/country"/><br/>
<a href="#index">Main</a>
<do type="prev">
<prev/>
</do>
</p>
</card>
</wml>
</xsl:template>
</xsl:stylesheet>
As with the html stylesheet you need to tell the xml processor to use addres-wml.xsl when a phone browser accesses the page. To do this open up homer.xml in an editor and add the following line:
<?xml-stylesheet href="address-wml.xsl? type="text/xsl? media="wap"?>
Simply put, this line tells cocoon to use address-wml.xsl for formatting instructions when the media requesting the page is a wap browser.
Open up your phone.com browser and point it to the same URL you used to view the html page.
The data is the same but we have changed the document layout to make it more useful in a cell phone browser. We do not have all of the information in one page. Instead the first page shows the contacts name and phone number only. Assuming that a cell phone user is most likely to look up a phone number lets show the phone number first and not clutter up the small screen.
Next: Viewing your file as a pdf >>
More XML Articles
More By Olivier Eymere
