blob: 950ea480b1fa3dbdb1671ba4b25f1430a050d97f [file] [log] [blame]
<?xml version="1.0"?>
<document url="remote-example.html">
<title>Struts Flow - Remote Example</title>
<section name="Number Guessing Game Example - Remote Edition">
<a name="overview"/>
<p>This example shows the number guessing game demonstrated in the <a href="guess-example.html">previous example</a>,
but now we add a browser remote function call to show how easy it is to call server-side Javascript functions
from client-side Javascript.
Struts Flow provides a client Javascript library and server-side framework support for calling flow functions
remotely from the client's web browser.
Function calls on the server are executed in the
flow so the global variable state is available to be read and modified. In this example, we add a "cheat"
button that will let the user see the secret number, but penalize their number of guesses by 5. The
two new parts to the example are in the flow code and the guess.jsp file.
<section name="Flow Code">
<a name="flow"/>
<p>Here is what the flow code looks like:
GuessController = function() { = function() {
this.random = Math.round( Math.random() * 9 ) + 1;
this.hint = "No hint for you!"
this.guesses = 0;
while (true) {
// send guess page to user and wait for response
// process user's guess
this.guess = parseInt( params.guess );
if (this.guess) {
if (this.guess &gt; this.random) {
this.hint = "Nope, lower!"
else if (this.guess &lt; this.random) {
this.hint = "Nope, higher!"
else {
// correct guess
// send success page to user
flash.guesses = this.guesses;
flash.random = this.random;
flow.redirect( { "action" : "endGame" } );
this.endGame = function() {}
this.cheat = function() {
this.guesses += 5;
return {"secret":this.random, "guesses":this.guesses};
<p>The only change to the original is a new <code>cheat()</code> function that provides the secret word at the expense of 5 extra guesses. Struts Flow converts the returned object into <a href="">JSON</a> and returns
it to the client.</p>
<section name="JSP Presentation">
<a name="jsp"/>
<p>This example adds the "cheat" button to the number guessing form, <code>play.jsp</code>. When
pressed, the Javascript uses <a href="">Dojo Javascript Toolkit</a> to call the cheat() function on the server.</p>
&lt;title&gt;Struts Flow number guessing game - Remote edition&lt;/title&gt;
&lt;script type="text/javascript"&gt;
function cheat() {{
url: ';contid=&lt;%= request.getAttribute("contid") %&gt;',
type: "text/javascript",
load: function(type, data, evt) {
eval("data = "+data);
alert("The secret number is "+data.secret+". After applying a penalty, you have guessed "+data.guesses+" times");
&lt;script type="text/javascript" src="../dojo-io.js"&gt;&lt;/script&gt;
&lt;h1&gt;Guess the Number Between 1 and 10&lt;/h1&gt;
&lt;h2&gt;&lt;%= request.getAttribute("hint") %&gt;&lt;/h2&gt;
&lt;h3&gt;You've guessed &lt;%= request.getAttribute("guesses") %&gt; times.&lt;/h3&gt;
&lt;form method="post" action=""&gt;
&lt;input type="hidden" name="contid" value='&lt;%= request.getAttribute("contid") %&gt;' /&gt;
&lt;input type="text" name="guess"/&gt;
&lt;input type="submit"/&gt;
&lt;input type="button" onclick="cheat()" value="Cheat" /&gt;
<p>The key to the function call executing in the server flow is passing the continuation id to the client flow