Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Dojo 1.7 is quite different

DZone's Guide to

Dojo 1.7 is quite different

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

 

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Ken Rimple, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}