Page: http://wiki.cocoondev.org/Wiki.jsp?page=GettingStartedWithFlow , version:
27 on Tue Apr 29 07:51:31 2003 by TonyCollen
- ''TODO: Describe what happens when a request is made for the game and follow
the execution of the Flowscript. -- [TonyCollen]''
+ Alright, now let's follow the execution of this Flow and pipeline:
+ The player accesses the URL {{http://host/cocoon/game/}} and the {{<map:match
pattern="">}} matches, and starts the pipeline.
+ The function {{main()}} which is referenced in {{flow/game.js}} is called,
and a new Continuation object is created. Without getting into too much
detail, the state of the Javascript code is saved, and can be recalled any
number of times.
+
+ ''TODO: Explain the concept of continuations in further detail. --
[TonyCollen]''
+
+ We now enter the code in {{game.js}}:
+ *A random number between 1 and 10 is chosen.
+ *Variables containing a hint for the player and the player's current number
of guesses are initialized.
+
+ The Flow now enters the {{while(true)}} loop which basically keeps the game
going until the player guesses the correct number.
+
+ We now get to the following line, where things start to get interesting:
+
+ {{{
+ sendPageAndWait("guess.jxt", { "random" : random, "hint" : hint, "guesses" :
guesses} );
+ }}}
+
+ The Flow layer sends the contents of the URI "guess.jxt" which is matched in
the sitemap (see above). We also pass an inline Javascript object, containing
three key/value pairs, one named "random" which contains the value of the
variable {{random}} as initialized above, and so on for {{hint}} and
{{guesses}}. The keys are substituted later down the line, when the
JXTemplateGenerator comes into play.
+
+ We could also do the following:
+ {{{
+ sendPageAndWait("guess.jxt", { "foo" : random } );
+ }}}
+
+ In this case, the value of {{random}} would be able to be substituted in our
JXTemplate, but under the name "foo"" instead -- we'd just have to make sure we
have the correct keyname in our template.
+
+ The Flow Layer also does another interesting thing: __it halts the execution
of the Javascript!__ Through the magic of continuations, the Flow Layer is
able to resume execution of the script at the exact line in which it left off.
This creates some very powerful situations with respect to web programming, and
forces the reader to think very differently about how web applications are
designed.
+
+ Picking back up in the script execution, the client is sent through the
pipeline matching "guess.jxt". Referring back to the sitemap, we match
{{*.jxt}}, and run the file through the JXTemplateGenerator, which substitutes
the keynames for the values sent from the {{sendPageAndWait()}} function.
+
+ One thing to note is in the form which is sent back to Cocoon when the player
submits the guess:
+
+ {{{
+ <form method="post" action="${continuation.id}.kont">
+ }}}
+
+ Here, {{ ${continuation.id} }} is resolved to a unique identifier which
points to the current continuation. One can think of this somewhat of a
session ID.
+
+ When the player submits the form, it is submitted to a unique URL which
contains the continuation ID, plus ".kont", which we end up matching in the
sitemap:
+
+ {{{
+ <map:match pattern="*.kont">
+ <map:call continuation="{1}"/>
+ </map:match>
+ }}}
+
+ When Cocoon sees a URL like this, it attempts to restart the continuation
with the specified ID, and we re-enter the Javascript code where we left off
previously.
+
+ ''TODO: Explain map:match pattern="invalidContinuation" -- [TonyCollen]''
+
+
