Event listener/fire from an extension

Vaadin 6 / 7 / 8
1

hi, I’m writting a javascript extension, doing an jquery plugin integration, using latest vaadin: v7 beta 3, of course!

I’m using “registerCallback” for listen to jquery events, but I can’t “fire” this event in order to get listened by another component.

for example, i’m extending jquery “draggable” feature:

/* draggableJavascript_connector.js */
window.com_example_m_draggable_DraggableJavaScriptExtension = function() {
var self = this;
this.attach = function(options) {
$(“#” + options).draggable({
containment: ‘body’,
stop : function(event, ui) {
self.regDrag($(this).offset().left, $(this).offset().top);
}
});
};
};

/* DraggableJavaScriptExtension.java */
@JavaScript({ “jquery-1.7.2.min.js”, “jquery-ui-1.8.22.custom.min.js”, “draggableJavascript_connector.js” })
public class DraggableJavaScriptExtension extends AbstractJavaScriptExtension {
…
public void extend(final AbstractComponent comp) {
super.extend(comp);
registerCallback(“regDrag”, new DraggableJavaScriptCallback());
}
…
public class DraggableJavaScriptCallback implements JavaScriptCallback {
@Override
public void call(JSONArray arguments) throws JSONException {
Integer x = arguments.getInt(0);
Integer y = arguments.getInt(1);
System.out.println("DRAGGED to x “+x+” y "+y);

// HERE SHOULD FIRE EVENT…

}
}
…
}

the only way that I’m finding a solution is to copy code from com.vaadin.ui.AbstractComponent EventRouter feature to a new: "
CustomAbstractJavaScriptExtension
"

private static final Method COMPONENT_EVENT_METHOD = ReflectTools.findMethod(Component.Listener.class, "componentEvent", Component.Event.class);
private EventRouter eventRouter = null;
protected void fireEvent(Component.Event event) {
    if (eventRouter != null) {
        eventRouter.fireEvent(event);
    }

}
public void addListener(Component.Listener listener) {
    addListener(Component.Event.class, listener, COMPONENT_EVENT_METHOD);
}
public void removeListener(Component.Listener listener) {
    removeListener(Component.Event.class, listener, COMPONENT_EVENT_METHOD);
}
public void addListener(Class<?> eventType, Object target, Method method) {
    if (eventRouter == null) {
        eventRouter = new EventRouter();
    }
    eventRouter.addListener(eventType, target, method);
}
public void removeListener(Class<?> eventType, Object target, Method method) {
    if (eventRouter != null) {
        eventRouter.removeListener(eventType, target, method);
    }
}

do you have suggestions?? because I have to build a lot of custom components (extending from AbstractComponent but also using JS extensions)

in resume: I’m needing to add/remove listener + fire events inside an extension… is this possible?

maybe should be a good idea to add events support for extensions too, I’m right?

thanks!
Guillermo

2

also using AbstractJavaScriptComponent could be a solution… but I can’t use the Extension feature…

3

Your example with some code copied from AbstractComponent is the best that is available right now, though your request made me realize that that functionality should actually be integrated into AbstractExtension. I created
http://dev.vaadin.com/ticket/9342
 for adding this functionality. Thank you for pointing this out!

You are also right that you can’t inherit from AbstractJavaScriptComponent as that would force you to make a Component instead of an Extension.

4

thank you!

finally I’ve resolved extending AbstractJavaScriptComponent and including the affected component to it.

 public DraggableJavaScriptComponent(AbstractComponent _component) {
	super();
	component = _component;
	attach(component.getDebugId());
	registerCallback("regDrag", new DraggableJavaScriptCallback());
}
protected void attach(Object... commandAndArguments) {
	invokeCallback("attach", (Object) commandAndArguments);
}

I’ll wait for that ticket.

thanks again