Home arrow XML arrow Page 8 - Introduction to Cocoon, XML XSL

Viewing your document in a WAP browser - XML

This tutorial will guide you through setting up Tomcat and Cocoon to serve XML pages, then you will create a DTD, XML file and three XSL stylesheets so that you can view your data in your desktop browser, a cell phone browser and a pdf file.

  1. Introduction to Cocoon, XML XSL
  2. Getting the tools
  3. Installing Tomcat
  4. Installing Cocoon
  5. Defining your document
  6. Creating your xml file
  7. Viewing your document in an HTML browser
  8. Viewing your document in a WAP browser
  9. Viewing your file as a pdf
By: Olivier Eymere
Rating: starstarstarstarstar / 9
March 22, 2001

print this article


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.

>>> More XML Articles          >>> More By Olivier Eymere

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: