| <?xml version="1.0"?> |
| <document url="remote-example.html"> |
| |
| <properties> |
| <title>Struts Flow - Remote Example</title> |
| </properties> |
| |
| <body> |
| <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. |
| </p> |
| </section> |
| <section name="Flow Code"> |
| <a name="flow"/> |
| <p>Here is what the flow code looks like: |
| </p> |
| <pre> |
| GuessController = function() { |
| |
| this.play = 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 |
| flow.wait(); |
| |
| // process user's guess |
| this.guess = parseInt( params.guess ); |
| this.guesses++; |
| if (this.guess) { |
| if (this.guess > this.random) { |
| this.hint = "Nope, lower!" |
| } |
| else if (this.guess < this.random) { |
| this.hint = "Nope, higher!" |
| } |
| else { |
| // correct guess |
| break; |
| } |
| } |
| } |
| |
| // 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}; |
| } |
| } |
| </pre> |
| <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="http://www.json.org">JSON</a> and returns |
| it to the client.</p> |
| </section> |
| <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="http://dojotoolkit.org">Dojo Javascript Toolkit</a> to call the cheat() function on the server.</p> |
| <pre> |
| <html> |
| <head> |
| <title>Struts Flow number guessing game - Remote edition</title> |
| <script type="text/javascript"> |
| <!-- |
| function cheat() { |
| dojo.io.bind({ |
| url: 'play.do?FlowCall=cheat&contid=<%= request.getAttribute("contid") %>', |
| 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"); |
| } |
| }); |
| } |
| --> |
| </script> |
| <script type="text/javascript" src="../dojo-io.js"></script> |
| </head> |
| <body> |
| |
| <h1>Guess the Number Between 1 and 10</h1> |
| |
| <h2><%= request.getAttribute("hint") %></h2> |
| |
| <h3>You've guessed <%= request.getAttribute("guesses") %> times.</h3> |
| |
| <form method="post" action="play.do"> |
| <input type="hidden" name="contid" value='<%= request.getAttribute("contid") %>' /> |
| <input type="text" name="guess"/> |
| <input type="submit"/> |
| <input type="button" onclick="cheat()" value="Cheat" /> |
| </form> |
| </body> |
| </html> |
| </pre> |
| <p>The key to the function call executing in the server flow is passing the continuation id to the client flow |
| instance. |
| </p> |
| |
| </section> |
| </body> |
| </document> |
