Search jQuery

jQuery Forum

Best Practices For Communication Between Widgets

in Developing jQuery UI • 9 years ago

I have just started developing custom UI widgets and am noodling with the best method for handling interaction between them.

Right now I am thinking about using bind & trigger with custom events.

Each widget would be set up to "listen" and/or "speak" custom events. I like this approach because the widgets are loosely coupled but I am not sure if this is the best way.

I published a quick blog post detailing the above with a code example:

http://www.devpatch.com/2010/03/communication-between-jquery-ui-widgets/

Thoughts? Suggestions?

Replies(4)

scott.gon..

Re: Best Practices For Communication Between Widgets

9 years ago

Custom events are used by all jQuery UI plugins as a means of communicating when something has happened. For convenience we also allow a callback to be passed in the options hash instead of binding an event listener.

All events triggered by a plugin are prefixed, e.g., dialog's open event is "dialogopen" and has a related callback option with the name "open". So the following two blocks of code accomplish the same thing:

$(el).dialog({ open: function() { alert( "dialog was opened" ); } });

$(el).dialog().bind( "dialogopen", function() { alert( "dialog was opened" ); });

The base widget provides a ._trigger() method to accomplish this. So inside the dialog plugin if you wanted to trigger the open callback/event, you would do:

this._trigger( "open" );

The ._trigger() method takes three parameters:

callback name - required - name of the callback to trigger. The event name is generated by concatenating the plugin name and the callback name.
original event - optional - if this custom event is being triggered by some other event, e.g., a click event, you can pass that along so that the information will be copied over to the new event.
ui/data object - optional - if there is extra information relevant to the event you can pass it as a hash and that hash will be passed to the callback and any event listeners.

boobooben..

Re: Best Practices For Communication Between Widgets

9 years ago

Thanks for the reply, I think you clarified for me best practices for triggering events within a widget.

Do you have suggestions for communicating events between different widgets? I am trying to implement something resembling an observer pattern. Reading through the docs I did not see any conventions or guidelines about this but I am sure it is a frequent use-case.

Thanks again for the help!

scott.gon..

Re: Re: Best Practices For Communication Between Widgets

9 years ago

Just bind to the events that the other widget is triggering. If you want to listen to all widgets you can either use $(document).bind(eventName) or $(widgetSelector).live(eventName).

boobooben..

Re: Best Practices For Communication Between Widgets

9 years ago

Yep this is the approach I had settled on. Thanks for the confirmation.

Time to play with the new release!

volker.mi..

Re: Best Practices For Communication Between Widgets

9 years ago

Hi booboobenny,

I had a similar problem a while ago. We ended up with writing a plugin that manages the glue [1]. See below for some usage example code. The plugin can do a bit more than I've outlined here (e.g. help you preventing event ping-pongs when you have elements that update each other). It was used in production and worked well.

The plugin probably needs an update, it was written for an earlier jQuery, back when events didn't bubble up completely. If anyone likes it, i"m happy to write additional examples and help with updating it.

[1] http://code.google.com/p/jquery-switchboard/source/browse/trunk/lib/jquery.switchboard.js

Here's the example code (It's also online on my website) See inline comments how it works.

<!doctype html>
<html>
<head>
<title>Example for SwitchBoard</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery.switchboard.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// let's say this is a complex UI widget.
// On a change we return the selected text and the position with the dropdown
$('#words').bind('change', function(foo) {
//console.log($(this).val());
var dd = $(this);
var text = dd.val();
var pos = dd.children(':contains("'+text+'")').index() + 1;
dd.trigger("dd-changed", {text: text, pos: pos});
});
$.switchboard.add({
// arbitrary ID for your action
action: 'selectword',
widget: {
// arbitrary for your widget within switchboard (optional)
//id: 'wordsfoo',
// the object the action should be performed on
obj: $('#words'),
// we receive some event, which event is defined here
notify: {
// the event we want to react on. could be any jQuery event
// (also custom ones)
event: 'dd-changed',
// as we want to support any plugin the output could be different
// from what we need. Therefore it can be transformed. An example
// would be that the plugin returns an array, but we need a
// properties list.
// So our input text plugins needs an array with first element
// the actual text, the socond the position.
setModel: function(data) {
return [data.text, data.pos];
}
}
}
})
// now we define everything that is needed to update the input field
.add({
// it's within the same action as the selection dropdown
action: 'selectword',
widget: {
//id: 'myinputbox',
obj: $('#selected'),
// we want to update that input box. In "update" we can use events
// or function calls. Here we'll use a function call.
update: {
methodName: 'val',
// parameters often need some computation, therefore it's a
// function. It needs to return an array with the parameters.
// data is the return value from the setModel() from "notify"
// above
methodParams: function(data) {
// data was already transformed to the way we want (with
// "-text" appended) so we can simply return.
return [data[0] + ' ('+data[1]+')'];
}
}
}
});
});
</script>
</head>
<body>
<p>Hello World</p>
<select id="words">
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select>
<input type="text" id="selected" />
</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Best Practices For Communication Between Widgets

Replies(4)

Re: Best Practices For Communication Between Widgets

Re: Best Practices For Communication Between Widgets

Re: Re: Best Practices For Communication Between Widgets

Re: Best Practices For Communication Between Widgets

Re: Best Practices For Communication Between Widgets

Statistics

Tags

Actions

Related Posts