Adapted from Tony Collen's GettingStartedWithFlow page on the Cocoon wiki.

In this example, an HTML form is shown repeatedly, until the user guesses the correct number.

Start the game here.

## The sitemap

At the sitemap level, Flowscript applications need four things:

- The Flowscript code must be made available to the sitemap
- A map:call function instruction must start the Flowscript function when the "application start" request is received
- A pipeline must use map:call continuation to activate continuations when their IDs are received in requests
- A "view" pipeline must use the (Flowscript-aware) JXTemplate generator to insert data provided by Flowscript into pages.

The corresponding excerpts of our sitemap are shown below.

### Flowscript declaration

Note that this already contains the declaration of the next example's Flowscript.

### map:call function

Here we use variables to allow any Flowscript function to be called, with a simple security restriction: the function name must start with the public_ prefix.

The maxValue parameter is used by our Flowscript public_startGuessNumber function, but doesn't hurt if it is passed to other functions (like in the next example).

### map:call continue

This activates a Flowscript continuation when an URL ending with a continuation ID and the .continue suffix is received.

### View pipeline using JXTemplageGenerator

To be able to include data provided by Flowscript in our forms and views, we use the Flowscript-aware JXTemplateGenerator

Here's the pipeline

Which uses this resource to convert the page to HTML

And here's the JXTemplate component declaration

## Flowscript code

Here's the complete Flowscript code that drives the number-guessing game. (sorry about the lost indentation, the Slop block, which generates these listings, has been improved in the meantime).

## JXTemplate view

The JXTemplateGenerator makes Flowscript variables (like the toGuess and hint attributes of the sendPageAndWait call above) accessible using a simple substitution syntax.

Here's the page definition for our number-guessing form. JXTemplate codes like ${cocoon.continuation.id}, will by replaced by values provided in the Flowscript sendPageAndWait function call.

## That's it!

We have now seen the complete code of our Flowscript application:

- A few sitemap declarations, which will be very similar for other Flowscript-based applications
- A JXTemplate-based view, a "normal" page with some substitution codes
- The Flowscript itself

We didn't have to write much code to implement this, and more importantly all the code that we wrote is application-specific. The Cocoon framework provides all the infrastructure.