	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

Hello World

Guessing Game Example

Flow Control Parts

Additions to Site Map

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 04

Doc 16, Cocoon Flow Slide # 2

References

Cocoon Flow Documentation

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

CS 683 Fall 04

Doc 16, Cocoon Flow Slide # 3

Cocoon Flow

Continuations using JavaScript

Require Cocoon 2.1

Java code can be called in flows

CS 683 Fall 04

Doc 16, Cocoon Flow Slide # 4

Hello World

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

Files

flowHello/flow/example.js
flowHello/flow/hello.jx
flowHello/flow/bye.jx
flowHello/sitemap.xmap

CS 683 Fall 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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

game/flow/game.js
game/documents/guess.jx
game/documents/success.jx
game/sitemap.xmap

CS 683 Fall 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 16, Cocoon Flow Slide # 17

Flow Control Parts

Site map

Several items are added to site map to indicate flows

Flowscript

JavaScript API that can be called in a flow

Calling Java

Java code can be called in a flow

JXTemplate

jx tags in the html page for looping extra

Velocity

The Velocity engine can be used in a flow

CS 683 Fall 04

Doc 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 04

Doc 16, Cocoon Flow Slide # 19

Flowscript

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

JavaScript API used in flow program

Added Objects

Cocoon
Request
Response
Session
Context
Cookie
Log
WebContinuation

CS 683 Fall 04

Doc 16, Cocoon Flow Slide # 20

JXTemplate

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

Two languages:

Jexl
JXPath

Access

Form parameter
Java & JavaScript objects passed from Flowscript
Cocoon Flow Object Models

Tags:

template
import
set
if
choose
out
forEach
formatNumber
formatDate
macro
evalBody
eval

CS 683 Fall 04

Doc 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

Velocity Generator

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

Velocity pages have access to Flowscript data

CS 683 Fall 04

Doc 16, Cocoon Flow Slide # 23

Examples

Using Java – Hello World

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

Files

flowExamples/flow/example.js
flowExamples/documents/hello.jx
flowExamples/documents/bye.jx
flowExamples/sitemap.xmap

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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 16, Cocoon Flow Slide # 27

Using Velocity

Evaluating JavaScript Page

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

Files

flowExamples/flow/example.js
flowExamples/documents/script.vm
flowExamples/documents/script.xsl
flowExamles/sitemap.xmap

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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 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 04

Doc 16, Cocoon Flow Slide # 32

Look Ma No XSL

JavaScript example without XSL page

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

Files

flowExamples/flow/example.js
flowExamples/documents/script.vm
flowExamles/sitemap.xmap

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 04

Doc 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 04

Doc 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>

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

Contents

References

Cocoon Flow

Hello World

Files

flowHello/flow/example.js

flowHello/flow/hello.jx

flowHello/flow/bye.jx

flowHello/sitemap.xmap

flowHello/sitemap.xmap Continued

flowHello/sitemap.xmap Continued

Guessing Game Example

Files

The Flow

game/flow/game.js

game/documents/guess.jx

game/documents/success.jx

game/sitemap.xmap

Flow Control Parts

Additions to Site Map

flow

call

Flowscript

Added Objects

JXTemplate

JPath

Velocity Generator

Examples

Using Java – Hello World

Files

flowExamples/flow/example.js

flowExamples/documents/hello.jx

flowExamples/documents/bye.jx

Changes in sitemap.xmap

Using Velocity

Evaluating JavaScript Page

Files

In flowExamples/flow/example.js

flowExamples/documents/script.vm

flowExamples/documents/script.xsl

flowExamples/documnets/script.xsl Continued

Changes in sitemap.xmap

Look Ma No XSL

JavaScript example without XSL page

Files

In flowExamples/flow/example.js

flowExamples/documents/rawScript.vm

Changes in sitemap.xmap