Preface to DnD: topics
by Peter Higgins

This is a quick cookie to cover a really cool topic. Custom events and Dom Events are all well and good for method-to-method functionality. It is a really common use case to connect some event happening to call another function, but when you get into really ambiguous, large applications, you need some mechanism to just say “hey, something has happened, act accordingly” … dojo.publish and dojo.subscribe provide just that mechanism.

As the title states, this is a primer cookie to a DnD cookie (which uses topics to communicate between drag-able objects), so read up if you are unfamiliar, or just need something to refresh with over coffee.

So we all understand the concept of connecting to a dom event, a really common one being “onclick”:

var node = dojo.byId("someNode");
dojo.connect(node,"onclick",function(e){
  /* node id="someNode" clicked */
});

… run some anonymous function when some node is clicked. pretty straightforward.

What if that button/node/whatever was meant to call some action “globally”: send out some alert, or otherwise have some way of communicating ambiguously with any number of “listening” elements. Publish it, and tell folks to subscribe to the topic.

lets convert our “onclick” listener to a publish message, so other’s can know about it:

var n = dojo.byId("someNode");
dojo.connect(n,"onclick",function(e){
     dojo.publish("/node/clicked",{
     // some message to send out:
         message:{
             text:"This node was clicked",
             node:e.target // our event target
         }
     });
});

At which point, nothing actually happens. That’s okay, because the ambiguity we’re looking or has already occurred. We’re already sending out whatever message we intended to send. Now, any element which wants this information needs to subscribe to it:

dojo.subscribe("/node/clicked",function(topicData){
    // when we get this topic, do "something" about it:
    console.log('someone, somewhere, clicked:',topicData.node);
});

This can happen as often as we want, in as many scopes as we want. Each subscription should handle it’s own logic. If a particular subscription doesn’t want to know about something going on, all it has to do is unsubscribe. A dojo.subscribe() call returns a handle, made just for this.

var handle = dojo.subscribe("/node/clicked",function(message){
     // example of connect-once to a subscription
     console.log("i got a click",message);
     dojo.unsubscribe(handle);
});

This shows how to connect to a topic once, and stop listening. A more common use would be to have some topic being published, and when some other topic publishes, go ahead a stop listening:

// setup some connections:
var n = dojo.byId("someNode");
dojo.connect(n,"onclick",function(e){
     dojo.pushlish("/got/clicked",{ node:e.target });
});
var n2 = dojo.byId("cancelNode");
dojo.connect(n2,"onclick",function(e){
     dojo.puslish("/stop/listening",{ uselessHere:"now!" });
});
// here's the topic stuff:
var handle = dojo.subscribe("/got/clicked",function(data){
     alert("alert()'s are annoying.");
});
dojo.subscribe("/stop/listening",function(data){
     // anytime the /stop/listening topic is published, reallly stop listening:
     if(handle){ dojo.unsubscribe(handle); } // thank jebus: stop the alert()
});

Another upcoming cookie idea: How dijit.layout.StackContainer uses topics to communicate, and why it’s the coolest widget ever.

This entry was posted on Friday, February 29th, 2008 at 4:56 am and is filed under Beginners, Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Responses to “Preface to DnD: topics”

  1. DojoCampus » Blog Archive » The dojo.moj.oe Says:

    [...] have every intention of fully tutorial-izing the demo. To continue from where we left off with the topic cookie and simultaneously start a series of small tutorials, I present to you: Mojo part [...]

  2. 5 Easy Tutorials for Advanced JavaScript using Dojo | Kyle Hayes Says:

    [...] Easily listen for events Custom events and Dom Events are all well and good for method-to-method functionality. It is a really common use case to connect some event happening to call another function, but when you get into really ambiguous, large applications, you need some mechanism to just say “hey, something has happened, act accordingly” … dojo.publish and dojo.subscribe provide just that mechanism. View tutorial >> [...]

  3. Dojo Javascript Framework Toolkit, Take your Apps to the Next Level | tripwire magazine Says:

    [...] Easily listen for events [...]

  4. Larping Documentary (Character Creation) :: LARP Costumes, LARP kit, LARP FTW Says:

    [...] DojoCampus » Blog Archive » Preface to DnD: topics [...]

  5. Getting StartED with Dojo » 5 Easy Tutorials for Advanced JavaScript using Dojo Says:

    [...] Easily listen for events Custom events and Dom Events are all well and good for method-to-method functionality. It is a really common use case to connect some event happening to call another function, but when you get into really ambiguous, large applications, you need some mechanism to just say “hey, something has happened, act accordingly” … dojo.publish and dojo.subscribe provide just that mechanism. View tutorial >> [...]

Leave a Reply

You must be logged in to post a comment.