MarkupLib

Gobi MarkupLib lives in gobi/code/Global/Markup.js.

Experimental callback support

View the live demo. Watch the URLs while you play the game. These are, so to speak, anonymous, temporary actions passed as form.callback. The form stores them in the user's session. They automatically maintain the state of the game in their JavaScript scope.

Source code (explanation follows below):

  function test_callback_action() {
    var number = Math.ceil(Math.random() * 10);
    var guesses = 0;
    var done = false;
    var form = Html.Form({ method: "post", name: "form" },
            Html.P({ name: "feedback" }, "Guess a number between 1 and 10!"),
            Html.Input({ name: "n" }),
            Html.Submit({ value: "go" }),
            Html.P({ name: "message", style: "font-weight: bold;" }),
            Html.A({href: this.href("test.callback")}, "Start a new game"));
    form.callback = function() {
      if (!done) { // game still active?
        guesses += 1;
        form.populate(req.data);
        form.get("feedback").setChildren("You entered: " + req.data.n);
        var n = parseInt(req.data.n, 10);
        if (isNaN(n)) {
          form.get("message").setChildren("Sorry, can't parse that!");
        } else if (n > number) {
          form.get("message").setChildren("Too high!");
        } else if (n < number) {
          form.get("message").setChildren("Too low!");
        } else {
          done = true;
          form =
             [Html.H3({}, "Bingo! The number was " + number + "!"),
              Html.P({}, "And it only took you " + guesses + " guesses."),
              Html.P({}, Html.A({href: this.href("test.callback")}, "Play again"))];
        }
      }
      this.renderPage(form);
    };
    this.renderPage(form);
  }

In the main test_callback_action, we basically do 5 simple things:

1. generate a random number between 1 and 10
2. initialize a variable that store the number of guesses to 0
3. create a form element with one simple input field
4. add a callback function to the form element
5. render the page with the form element

The real magic happens in the callback function. When a form element with a callback function is rendered, the function is stored in the user's session with a random ID. The form than gets its action attribute set to the callback ID and, when submitted, gets routed to the callback function (some amount of getChildElement() magic is involved). As the callback inherits the surrounding scope, the form, number, and guesses variables remain visible and up to date throughout the game. It even has the this keyword pointing to the same object as the surrounding function (again, some amount of trickery was necessary to achieve that).

Since we use the same form with the same callback multiple times (unless you guess right the first time), the same callback is used multiple times, which is perfectly ok except (maybe) for caching issues. You may want to disable client caching using res.cache (or maybe fake request parameters).

  function renderPage(body) {
    res.write(Html.Html({},
      Html.Head({},
        Html.Title({}, "The number game"),
        Html.Script({ type: "text/javascript" },
            "function load() {" +
            "if (document.form) { document.form.n.select(); " +
            "document.form.n.focus(); }}")),
      Html.Body({onload: "load()"}, body)));
  }

The renderPage() function is a pure utility method to wrap the page content into an html tags. Unfortunately, we can't currently use Gobi's page skin in combination with callbacks because they put an additional object in the request path that doesn't extend the Page prototype. Which is why this whole crap is still tagged as experimental :-)