Page title (cookbook approach, tutorial , ...)

- TARGET-AUDIENCE: *beginner* advanced expert
- COCOON-RELEASES: 2.0.3, 2.0.4
- DOCUMENT-STATUS: *draft* reviewed released

What you will get from this page

A start on using XSLT to transform output generated by JX and Flow as used in FlowHelloWorld. I read the FlowHelloWorld tutorial and found it helpful, but slightly too simple. It uses JX to generate XHTML directly. I wanted to use JX to generate XML, which could then be transformed using XSLT to any format I desire. This is my attempt.

If any experts here know a better way to do this, please change this page. I tried several alternatives that involved less modification to the initial FlowHelloWorld example, but couldn't get anything to work without the internal pipeline.

Your basic skills

Technical prerequisites

Setting up

This project has almost the same structure as the FlowHelloWorld example. Make a directory called, for example, hello-xslt in your Cocoon directory. In hello-xslt, make the directories flow, documents and stylesheets.

The Sitemap

The sitemap, saved as sitemap.xmap in your hello-xslt directory, is slightly modified from the normal Hello, World example and looks like this:

{{{<?xml version="1.0" encoding="UTF-8"?>

<map:sitemap xmlns:map=""> <map:components>


<map:views/> <map:resources/> <map:action-sets/>

<map:flow language="javascript">



<!-- An internal pipeline can be called from within Cocoon, but does not

<!-- The flowscript invokes this part of the pipeline. It's internal-only so

</map:pipelines> </map:sitemap> }}}

The Flowscript

The flowscript should be saved as hello-xslt/flow/hello.js.

It has been modified to call the internal pipeline, and to be a bit more extroverted, saying "Hello" to more than just the world.

function hello() {
  var name =  "World";
  var name2 = "Everything Else";
  cocoon.sendPage("internal/hello", {"name" : name, "name2" : name2} );


This file goes in hello-xslt/documents/hello.jxt

I should pause here to say that, with the exception of sitemap.xmap, which Cocoon expects, these names are all arbitrary. hello-xslt could be anything you want, and the other names could be anything as long as you change them in the sitemap.

On to the JXT file:

<?xml version="1.0"?>
  <hello>Hello ${name}!</hello>
  <hello>Hello ${name2}!</hello>


Finally, the xslt stylesheet should be saved as hello-xlst/stylesheets/hello.xsl. It looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="">
<xsl:template match="//document">
<xsl:for-each select="hello">
<p><xsl:value-of select="."/></p>

This simple stylesheet does nothing more than transform the <hello></hello> elements the JXT spits out into paragraphs.

Running the Example

Assuming a standard installation, browse to a URL like this one:


Modify as needed to suit your Cocoon installation.

Learning from This Example

If you compare this example with FlowHelloWorld, which I recommend, you can see that each file has changed in some way:

This is the beginnings of a framework for a flexible application with separation of content and presentation. In the real world, your flowscript would call business logic rather than just assigning variables

When using flow to serve individual pages with no user input, rather than forms, the effort required may seem a little redundant. That is, in sitemap.xmap you have one match that calls the function and another match that renders its output. I believe this is the nature of the beast, and that for sites with a mixture of interactive and non-interactive dynamic content, the consistency of using flow/jxt for everything will probably outweigh the inconvenience of defining both entry and exit points.

page metadata

- AUTHOR: JasonStitt

FlowAndXsltHelloWorld (last edited 2009-09-20 23:41:20 by localhost)