Dojo 1.7 is quite different

I've been having a lot of fun dodging and perrying through a full Javascript UI for Quizzo. I know, it sort of subverted the original intent of getting it out there fast, but I'm thinking there is a good Roo add-on lurking in here. Specifically around controlling the actions of the Quiz - somehow I need to let all of the players know that the time is up for their current question, or that new scores appeared, or any number of other things.

I could poll, but I'm thinking that would be expensive. Sure, you can use setInterval(ms, function) and ask every four seconds, like I'm doing now (quite amatuerish, I'm sure but then that's what I am in the JS UI department at the moment):

require([
    "dojo/dom",
    "dijit/registry",
    "dojo/_base/xhr",
    "dojo/domReady!"],
 function (dom, registry, xhr) {


   pollScores = function pollScores() {
     xhr.get({
       url: "${quizzo_scores_url}",
       handleAs: "json",
       load: function(data) {
         var yourScore = dom.byId("scores");
         var targetStr = "";
         yourScore.innerHTML = "";
         data.score.forEach(function(scoreValue) {
         //TODO - make this nice with spans and a div for each score instead
         //TODO - put on rhs in layout
         targetStr +=  scoreValue.team + " : " + scoreValue.value + "<br />";
        });
        yourScore.innerHTML = targetStr;

        console.log(data);
       },
       error: function(err) {
         console.log(err);
         dom.byId("yourScore").innerHTML = "error.";
       }
     });
  });

... later that same evening ...

window.setInterval(pollScores, 4000);

But that would be rather inefficient. However, for those looking to manipulate some DOM elements, call some Ajax, and update parts of HTML using Dojo 1.7, at least it's some useful information, so I'll post it.

Instead of polling, communicate on channels

Our CTO Aaron Mulder talked about WebSockets at our Chariot Day last weekend. Other developers in our group including Don Coleman and Steve Smith have been using jQuery UI, jQuery Mobile, Sencha Touch, etc., and tools like Handlebars.js to provide data bindings and other features.

But since I'm investing some time in Dojo and related projects, I want to see how far I can dig and what I can offer to the Roo community from this research. So, I found a project that the Dojo foundation has been using, CometD which in the most recent versions supports WebSockets as a transport medium. It's an asychronous communication mechanism for subscribing to and publishing messages without forcing programmatic polling.

My initial goal for server-side push is to broadcast messages on a hub-and-spoke pub/sub channel, broadcasting these events:

• Updated scores
• General messages from the quiz master
• Change of game state (team registration time, question available, voting open, voting closed, results, end of game)

Maybe the third one needs some refinement, especially since it could be tough to make sure the clients actually got the messages. But at least it's a way of making the control of those activities a little more coordinated.

What's in the repo now?

So far, I've migrated the code for the admin/moderator and quizzo URIs to use Dojo 1.7.2, and embedded 1.7.2 as a library in src/main/resources. The tests still fail on some machines, so -Dmaven.test.skip=true is a necessity. Also, if you're playing around you may need to change the persistence.xml to create schema elements at first, then go back and change it back.

The UI is NOT ready.

If you have a spreadsheet of questions and answers, you'll find that handy class in the test directory as well.

I'm going to focus on making the question/answer views, using polling for now (because it's easy) to check on the current project state. I'll post when I have it working (soon).

Next, I'll event-ize the moderator communications.

This will end up generating one or two add-ons, I'm sure. Of course, I'm under the gun for my ETE presentation and need some additional add-ons to show off, so synergy will be my friend.

Watch this space.