SDSU Emerging Technology
Fall Semester, 2004
Cocoon Flow
Previous     Lecture Notes Index     Next     
© 2004, All Rights Reserved, SDSU & Roger Whitney
San Diego State University -- This page last updated 30-Sep-04

CS 683 Emerging Technologies Fall Semester, 2004 Doc 16 Cocoon Flow

Contents

References

Cocoon Flow

Hello World

Guessing Game Example

Flow Control Parts

Additions to Site Map

Flowscript

JXTemplate

JPath

Velocity Generator

Examples

Using Java – Hello World

Using Velocity

Look Ma No XSL

Copyright ©, All rights reserved. 2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent ( http://www.opencontent.org/opl.shtml) license defines the copyright on this document.

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 2

References

Cocoon Flow Documentation

http://cocoon.apache.org/2.1/userdocs/flow/index.html

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 3

Cocoon Flow

Continuations using JavaScript

Require Cocoon 2.1

Java code can be called in flows

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 4

Hello World

http://bismarck.sdsu.edu:9006/cocoon/flowHello/hello.html

Files

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 5

flowHello/flow/example.js 

function hello() {
   var message = "Hi Mate";
   var now = new Date();
   cocoon.sendPageAndWait( "hello.jx", 
         { message:message, date: now});
   cocoon.sendPage("bye.jx");
}

flowHello/flow/hello.jx 

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
   <title>Hello World</title> 
</head>
<body>
<h1>${message}</h1> 
It is now ${date.toString()}.
   
<form action="${cocoon.continuation.id}.kont" method="post">
   <input type="submit" value="Done" /> 
</form>
</body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 6

flowHello/flow/bye.jx 

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
   <title>GoodBye World</title> 
</head>
<body>
<h1>So Long</h1> 
<form action="${cocoon.continuation.id}.kont" method="post">
   <input type="submit" value="Now What" /> 
</form>
</body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 7

flowHello/sitemap.xmap 

<?xml version="1.0" encoding="UTF-8"?>
<map:sitemap xmlns:map="http://apache.org/cocoon/sitemap/1.0">
   
<map:components>
   <map:generators default="file">
      <map:generator label="content,data" 
         logger="sitemap.generator.jx"
         name="jx"
         src="org.apache.cocoon.generation.JXTemplateGenerator"/>
   </map:generators>
   <map:transformers default="xslt"/>
   <map:serializers default="html"/>
   <map:matchers default="wildcard"/>
   <map:selectors default="browser">
      <map:selector name="exception" 
         src="org.apache.cocoon.selection.XPathExceptionSelector">
         <exception name="invalid-continuation"
          class="org.apache.cocoon.components.flow.InvalidContinuationException"/>
         <exception class="java.lang.Throwable" unroll="true"/>
      </map:selector>
   </map:selectors>
   <map:actions/>
   <map:pipes default="caching"/>
</map:components>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 8

flowHello/sitemap.xmap Continued 

<map:views/>
<map:resources/>
<map:action-sets/>
   
<map:flow language="javascript">
   <map:script src="flow/example.js"/>
</map:flow>
   
<map:pipelines>
   <map:component-configurations>
      <global-variables/>
   </map:component-configurations>
   
   <map:pipeline>
      <map:match pattern="hello.html">
         <map:call function="hello"/>
      </map:match>
   
      <map:match pattern="*.jx">
         <map:generate type="jx" src="documents/{1}.jx"/>
         <map:serialize type="xhtml"/>
      </map:match>
   
      <map:match pattern="*.kont">
         <map:call continuation="{1}"/>
      </map:match>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 9

flowHello/sitemap.xmap Continued 

      <map:handle-errors>
         <map:select type="exception">
            <map:when test="invalid-continuation">
               <map:generate 
                     src="documents/invalidContinuation.html"/>
               <map:serialize type="xhtml"/>
            </map:when>
         </map:select>
      </map:handle-errors>
   </map:pipeline>
   
</map:pipelines>
   
</map:sitemap>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 10

Guessing Game Example

From http://cocoon.apache.org/2.1/userdocs/flow/tutor.html

http://bismarck.sdsu.edu:9006/cocoon/game/

Files

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 11

The Flow

game/flow/game.js 

function main() {
   
   var random =   Math.round( Math.random() * 9 ) + 1;
   
   var hint = "No hint for you!"
   var guesses = 0;
   
   while (true) {
   
      cocoon.sendPageAndWait("guess.jx", { "random" : random, 
               "hint" : hint, "guesses" : guesses} );
   
      var guess = parseInt( cocoon.request.get("guess") );
      guesses++;
   
      if (guess) {
         if (guess > random) {
            hint = "Nope, lower!"
         } else if (guess < random) {
            hint = "Nope, higher!"
         } else {
            break;
         }
      }
   }
   
   cocoon.sendPage("success.jx", {"random" : random, 
            "guess" : guess, "guesses" : guesses} );
}

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 12

game/documents/guess.jx 

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
   <title>cocoon flow number guessing game</title>
</head>
<body>
   <h1>Guess the Number Between 1 and 10</h1>
   <h2>${hint}</h2>
   <h3>You've guessed ${guesses} times.</h3>
   <form method="post" action="${cocoon.continuation.id}.kont">
      <input type="text" name="guess"/>
      <input type="submit"/>
   </form>
</body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 13

game/documents/success.jx 

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
   <title>cocoon flow number guessing game</title>
</head>
<body>
   <h1>Success!</h1>
   <h2>The number was: ${random}</h2>
   <h3>It took you ${guesses} tries.</h3>
   <p><a href="./">Play again</a></p>
</body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 14

game/sitemap.xmap 

<?xml version="1.0" encoding="UTF-8"?>
<map:sitemap xmlns:map="http://apache.org/cocoon/sitemap/1.0">
   
<map:components>
   <map:generators default="file">
      <!-- in this example we use JXTemplateGenerator to insert
             Flow variables in page content -->
      <map:generator label="content,data" 
         logger="sitemap.generator.jx" name="jx" 
         src="org.apache.cocoon.generation.JXTemplateGenerator"/>
   </map:generators>
   <map:transformers default="xslt"/>
   <map:serializers default="html"/>
   <map:matchers default="wildcard"/>
   <map:selectors default="browser">
      <map:selector name="exception" 
         src="org.apache.cocoon.selection.XPathExceptionSelector">
         <exception name="invalid-continuation"
         class="org.apache.cocoon.components.flow.InvalidContinuationException"/>
         <exception class="java.lang.Throwable" unroll="true"/>
      </map:selector>
   </map:selectors>
   <map:actions/>
   <map:pipes default="caching"/>
</map:components>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 15
<map:views/>
<map:resources/>
<map:action-sets/>
   
<map:flow language="javascript">
   <!-- Flow will use the javascript functions defined in game.js -->
   <map:script src="flow/game.js"/>
</map:flow>
   
<map:pipelines>
   <map:component-configurations>
      <global-variables/>
   </map:component-configurations>
   
   <map:pipeline>
      <!-- no filename: call main() in game.js -->
      <map:match pattern="">
         <map:call function="main"/>
      </map:match>
   
      <!-- use JXtemplate to generate page content -->
      <map:match pattern="*.jx">
         <map:generate type="jx" src="documents/{1}.jx"/>
         <map:serialize type="xhtml"/>
      </map:match>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 16
      <!-- .kont URLs are generated by the Flow system for continuations -->
      <map:match pattern="*.kont">
         <map:call continuation="{1}"/>
      </map:match>
   
      <!-- handle invalid continuations -->
      <map:handle-errors>
         <map:select type="exception">
            <map:when test="invalid-continuation">
               <map:generate 
                     src="documents/invalidContinuation.html"/>
               <map:serialize type="xhtml"/>
            </map:when>
         </map:select>
      </map:handle-errors>
   </map:pipeline>
   
</map:pipelines>
   
</map:sitemap>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 17

Flow Control Parts

Several items are added to site map to indicate flows

JavaScript API that can be called in a flow

Java code can be called in a flow

jx tags in the html page for looping extra

The Velocity engine can be used in a flow

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 18

Additions to Site Map

http://cocoon.apache.org/2.1/userdocs/flow/sitemap.html

flow 

<map:flow language="javascript">
   <!-- Flow will use the javascript functions defined in game.js -->
   <map:script src="flow/game.js"/>
</map:flow>

Each script element give a file that will be compiled & run

call 

<map:match pattern="">
   <map:call function="main"/>
</map:match>


<map:match pattern="*.kont">
   <map:call continuation="{1}"/>
</map:match>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 19

Flowscript

http://cocoon.apache.org/2.1/userdocs/flow/api.html

JavaScript API used in flow program

Added Objects

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 20

JXTemplate

http://cocoon.apache.org/2.1/userdocs/flow/jxtemplate.html

Two languages:

Access

Tags:

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 21

JPath

http://cocoon.apache.org/2.1/userdocs/flow/jpath.html

XSP extensions to access data from Flowscript in XSP pages

Tags

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 22

Velocity Generator

http://cocoon.apache.org/2.1/userdocs/flow/velocity.html

Velocity pages have access to Flowscript data

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 23

Examples

Using Java – Hello World

http://bismarck.sdsu.edu:9006/cocoon/flowExamples/java.html

Files

flowExamples/flow/example.js 

function javaHello() {
   importPackage(java.util);
   var message = new java.lang.String("Hi there");
   
   var list = new ArrayList();
   list.add("Mary");
   list.add("Jack");
   list.add("Jill");
   
   var now = new java.util.Date();
   
   cocoon.sendPageAndWait( "hello.jx", 
      { message:message, date: now, names: list});
   cocoon.sendPage("bye.jx", {names: list});
}

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 24

flowExamples/documents/hello.jx 

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<head>
   <title>Hello World</title> 
</head>
<body>
<h1>${message}</h1> 
<p>It is now ${date}.</p>
<p>Hello to:</p>
<table>
   
<jx:forEach var="each" items="${names}" >
   <tr><td>${each}</td></tr>
</jx:forEach>
   
</table>
<p>A special greating to: ${names[0]}</p>
<form action="${cocoon.continuation.id}.kont" method="post">
   <input type="submit" value="Done" /> 
</form>
</body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 25

flowExamples/documents/bye.jx 

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
<jx:macro name="tablerows">
  <jx:parameter name="list"/>
  <jx:parameter name="color"/>
  <jx:forEach var="item" items="${list}">
    <tr><td bgcolor="${color}">${item}</td></tr>
  </jx:forEach>
</jx:macro>
   
<head>
   <title>GoodBye World</title> 
</head>
<body>
<h1>So Long</h1> 
<p>Good bye to:</p>
<table>
   <tablerows list="${names}" color="lightblue"/>
</table>
   
</body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 26

Changes in sitemap.xmap 

<map:flow language="javascript">
   <map:script src="flow/example.js"/>
</map:flow>
   
<map:pipelines>
   <map:component-configurations>
      <global-variables/>
   </map:component-configurations>
   
   <map:pipeline>
      <map:match pattern="java.html">
         <map:call function="javaHello"/>
      </map:match>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 27

Using Velocity

Evaluating JavaScript Page

http://bismarck.sdsu.edu:9006/cocoon/flowExamples/script.html

Files

In flowExamples/flow/example.js 

function script() {
   var source = "x = 2;\ny = 3;\nreturn x + y;";
   var result = "5.0";
   var kont = ".kont"
   while (true) {
      cocoon.sendPageAndWait( "scriptPage", 
         {source: source, result: result, ending: kont});
      source = cocoon.request.get("code");
      try {
         var doIt = new Function('', source);
         result = doIt();
      } catch (exception) {
         result = exception;
      }
   }
}

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 28

flowExamples/documents/script.vm 

<?xml version="1.0"?>
<page>
   <title>JavaScript</title> 
   <content>
      <paragraph>
         Enter Some JavaScript. Your code must contain a return.
      </paragraph>
      <form action="$continuation.id$ending" method="post">
         <textarea name="code" rows="15" 
               cols="40">$source</textarea>
         <input type="submit" /> 
      </form>
      <paragraph>
         The source
      </paragraph>
      <pre>$source</pre> 
      <paragraph>
         The Result
      </paragraph>
      <pre>$result</pre> 
   </content>
</page>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 29

flowExamples/documents/script.xsl 

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
   xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   
   <xsl:template match="page">
      <html>
         <head>
            <title>
               <xsl:value-of select="title"/>
            </title>
   
         </head>
         <body>
            <xsl:apply-templates/>
         </body>
      </html>
   </xsl:template>
   
   <xsl:template match="title">
      <h2>
         <xsl:apply-templates/>
      </h2>
   </xsl:template>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 30

flowExamples/documnets/script.xsl Continued 

   <xsl:template match="paragraph">
      <p>
         <xsl:apply-templates/>
      </p>
   </xsl:template>
   
   <xsl:template match="form|pre|textarea|b|input">
      <xsl:copy>
         <xsl:copy-of select="@*"/>
         <xsl:apply-templates/>
      </xsl:copy>
   </xsl:template>
</xsl:stylesheet>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 31

Changes in sitemap.xmap 

<map:flow language="javascript">
   <!-- Flow will use the javascript functions defined in game.js -->
   <map:script src="flow/example.js"/>
</map:flow>
   
<map:pipelines>
   <map:component-configurations>
      <global-variables/>
   </map:component-configurations>
   
   <map:pipeline>
      <map:match pattern="java.html">
         <map:call function="javaHello"/>
      </map:match>
      <map:match pattern="script.html">
         <map:call function="script"/>
      </map:match>
      <map:match pattern="scriptPage">
         <map:generate type="velocity" src="documents/script.vm" />
         <map:transform type="xslt" src="documents/script.xsl" />
         <map:serialize type="html" />
      </map:match>
   
      <map:match pattern="*.kont">
         <map:call continuation="{1}"/>
      </map:match>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 32

Look Ma No XSL

JavaScript example without XSL page

http://bismarck.sdsu.edu:9006/cocoon/flowExamples/rawScript.html

Files

In flowExamples/flow/example.js 

function rawScript() {
   var source = "x = 2;\ny = 3;\nreturn x + y;";
   var result = "5.0";
   var kont = ".kont"
   while (true) {
      cocoon.sendPageAndWait( "rawScriptPage", 
         {source: source, result: result, ending: kont});
      source = cocoon.request.get("code");
      try {
         var doIt = new Function('', source);
         result = doIt();
      } catch (exception) {
         result = exception;
      }
   }
}

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 33

flowExamples/documents/rawScript.vm 

<?xml version="1.0"?>
<html>
   <title>JavaScript</title> 
   <body>
      <p>
         Enter Some JavaScript. Your code must contain a return.
      </p>
      <form action="$continuation.id$ending" method="post">
         <textarea name="code" rows="15" 
               cols="40">$source</textarea>
         <input type="submit" /> 
      </form>
      <p>The source</p>
      <pre>$source</pre> 
      <p>The Result</p>
      <pre>$result</pre> 
   </body>
</html>

CS 683 Fall 04Doc 16, Cocoon Flow Slide # 34

Changes in sitemap.xmap 

<map:match pattern="rawScript.html">
   <map:call function="rawScript"/>
</map:match>
<map:match pattern="rawScriptPage">
   <map:generate type="velocity" src="documents/rawScript.vm" />
   <map:serialize type="html" />
</map:match>

Copyright ©, All rights reserved.

2004 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA.

OpenContent license defines the copyright on this document.

Previous     visitors since 30-Sep-04     Next