PDA

View Full Version : yui and yui-ext eventhandling?



Wolfgang
2 Jan 2007, 1:16 PM
Hello,

somewhere in the forum i read something like: "do not mix the yui eventhandling with the yui-ext eventhandler".
Does this mean that for example i should not use the yui connection manager or yui dragDrop or yui custom events?

Wolfgang

tryanDLS
2 Jan 2007, 2:07 PM
YUI Connection Manager is used for everything in yui-ext that talks to the server. There's really no event handling involved, it's all done with callback methods.

As for dragdrop, I think you'd rather use Jack's version (in the .04 dev code) since the feeling here is that yui's is backwards, and Jack's makes more sense.

yui-ext is still using YAHOO.util.CustomEvent, however it's using it's own EventManager (as opposed to YAHOO.util.Event) to manage events (e.g. adding listeners, etc). I believe this is really the point of the comment you refered to - b/c the syntax is different, it would be painful to mix these 2, and since anything in yui-ext that talks to yui wraps it's event handling, there's not a lot of need to use the yui one.

Hope that didn't make it more confusing :)

Wolfgang
6 Jan 2007, 2:11 PM
...
yui-ext is still using YAHOO.util.CustomEvent, however it's using it's own EventManager (as opposed to YAHOO.util.Event) to manage events (e.g. adding listeners, etc). I believe this is really the point of the comment you refered to - b/c the syntax is different, it would be painful to mix these 2, and since anything in yui-ext that talks to yui wraps it's event handling, there's not a lot of need to use the yui one.
...


Yes that is exactly what i meant. I am still not sure wether i could/should/(not) use the yui event methods like addListener, removeListener, CustomEvent, subscribe etc.
For example: If i want to attach an event to an div i can do this in yui like this:


YAHOO.util.Event.addListener("myDivId", "myEvent", fmyCallback)
fmyCallback = function() {alert('i am fired for myEvent');}

and i can remove my listener


YAHOO.util.Event.removeListener("myDivId", "myEvent", fmyCallback)

Would that be the appropriate way in yui-ext as well, or should one use yui-ext functions (in this case - which ones?)

Moreover: In another post i asked wether for example yui-ext would clean-up a the content of a contentpanel in terms of listeners and events, when the content changes (for example via XHR)
The answer was yes it cleans up, because of the yui-ext EventManagerkeeping track of registered events/eventhandler/callbacks.
So i can image, that the cleanup works when using the yui-ext Eventmanger, and not yui events. But how? :roll:




Hope that didn't make it more confusing :)

Not really but it opens new questions :wink:

Regards

Wolfgang

jack.slocum
6 Jan 2007, 3:24 PM
var el = getEl('myDivId');
el.on("myEvent", fmyCallback);
...
el.removeListener("myEvent", fmyCallback);

The EventManager, which provides a normalized event object, requires slightly more work because it wraps your function with a function that applies the EventObject. You need a reference to that function in order to remove it.

var el = getEl('myDivId');
var fn = el.mon("myEvent", fmyCallback);
...
el.removeListener("myEvent", fn);

on(...) is standard YUI event, mon(...) is a "managed" event where your param will be "e" which is a YAHOO.ext.EventObject. EventObject provides useful functions and key codes on the "e" object directly (for more info on EventObject see the docs for it).

There are also a variety of longhanded variations:

el.addListener, el.addManagedListener

YAHOO.ext.EventManager.on(...) = mon() but you have to pass in the element/element id.

Wolfgang
7 Jan 2007, 11:16 AM
Thank you. That makes it nearly clear.

But, what about custom events?
Would one have to use


myEvt = new YAHOO.util.customEvent("myEvent");
myFSubscriber = function(type, args) {alert('sample subscriber')};
myEvt.subscribe(myFSubscriber);
myEvt.fire('my argument');

or is there also a yui-ext version (haven't seen something like that in the docs)?

Animal
8 Jan 2007, 12:23 AM
If your object needs to publish events, extend the Observable class: http://www.yui-ext.com/playpen/yui-ext.0.40/docs/output/YAHOO.ext.util.Observable.html

To see how it's used, look at teh source code for yui-ext widgets that publish events.