"Hello World" Simple Woody Sample

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

What you will get from this page

An example of the basics required to work with Woody forms.

Your basic skills

Technical prerequisites

Setting Up

You should create a new subdirectory under the Cocoon installation directory called, for example HelloFlow.

Please save the attached hellowoody.zip file on your Cocoon machine, then unzip all the files. If you expand the ZIP file properly, this should contain the following subdirectories:

The Sitemap

The following code snippets highlight relevant snippets of the sitemap that are required for forms.

  <map:transformers default="xslt">
    <!-- woody -->
      name="woody"  logger="woody"
    <!-- internationalisation  -->
      <catalogues default="woody">
        <catalogue id="woody" name="WoodyMessages" location="messages"/>
        <catalogue id="forms" name="FormLabels"    location="messages"/>

The above is required to enable the Woody transformer and allow for translations of Woody error messages.

  <map:selectors default="browser">
    <!-- flow exceptions --> 
      <exception name="invalid-continuation"
      <exception class="java.lang.Throwable" unroll="true"/>

The above is required to handle exceptions from the flow.

    <!-- woody -->

The above is required to use the Woody Template Transformer.

    <!-- internationalisation  -->
      <catalogues default="woody">
        <catalogue id="woody" name="WoodyMessages" location="messages"/>

The above, while not strictly required, is very useful if you need to create an alternatve language representation of form elements. It also allows for the conversion of Woody "error codes" into user-friendly messages; see the /resources/WoodyMessages.xml.

    <!-- display the form for entry -->
    <map:match pattern="form-display">
      <map:generate src="forms/form_template.xml"/>
      <map:transform type="woody">   
      <map:transform type="i18n"><!-- translates form messages and codes -->
        <map:parameter name="locale" value="{request-param:locale}" />
      <map:transform src="resources/woody-samples-styling.xsl"/>
    <!-- process the info from the form --> 
    <map:match pattern="form-success">
      <map:generate type="jxt" src="documents/hellowoody.jxt"/>

The above matches handle the form display, based on the form definition file; note the <map:transform type="woody"> step which handles the actual processing - thereafter any internationalisation takes places, followed by use of a tranform to create the actual HTML page.

    <!-- resources -->
    <map:match pattern="resources/**">
      <map:read src="{0}"/>

The above ensures the availability of files (used for styling).

The Woody Form Definition

The form definition file (form_definition.xml) spells out what form "elements" are required in the form. These are called "widgets". The information associated with widgets is used to both help display (eg. 'label') and validate (eg. 'length') the form elements, but is not used for layout.

<?xml version="1.0"?>

    <wd:field id="name" required="true">
      <wd:datatype base="string">
          <wd:length min="5"/>



The Woody Form Template

The template file (form_template.xml) is used for layout of the form elements (defined in the Form Defintion). It uses the wt: prefix for the Woody elements that must appear on the form page.

<?xml version="1.0"?>
  <title>Hello Woody Form</title>

  <h1>Enter Your Name</h1>
  <wt:form-template action="#{$continuation/id}.continue" method="POST">
    <wt:widget-label id="name"/>
    <wt:widget id="name"/>
    <input type="submit"/>      


The Flow Script

The hellowoody.js in the documents directory looks as follows; explanantions for each step are given in the script comments:


function hellowoody() {
  create Form object from definition - Form function is defined in the woody2.js
  available from the Cocoon source code repository (note cut in lines...):
  var form = new Form("forms/form_definition.xml");

  /* getModel() function is also defined in woody2.js */
  var model = form.getModel();
  /* set the default value for the "name" widget */
  model.name = "Woody";
  /* call a pipeline in the sitemap */

  /* populate javascript variable with data from the Form object*/
  var bizdata = { "name" : model.name };

  /* display the HelloWorld.jxt page; using the form-success pipeline */
  cocoon.sendPage("form-success", bizdata );


The Result Page

The hellowoody.jxt in the flow directory is used to display the name value submitted from the form.

<?xml version="1.0"?>
<html xmlns:jx="http://apache.org/cocoon/templates/jx/1.0">
  <title>Cocoon Woody Hello World</title>
  <h1>Hello ${name}!</h1>

Note that this is the same as the hello.jxt for the FlowHelloWorld sampl

What did we achieve?

page metadata

- AUTHOR: DerekH
- REVIEWED-BY: (none yet)

Attachment: hellowoody.zip

WoodyHelloWorld (last edited 2009-09-20 23:40:12 by localhost)