Use ClickHandler with a native Javascript object?

In Javascript, I'm making an SVG shape and adding a click handler to it like this:

var rect = document.createElementNS('','rect'); rect.addEventListener('click', myClickHandler, false);

This works great. I'm trying to make an overlay Rect class in GWT. If possible, I'd like to simply do something like this:

public class SVGRect extends JavaScriptObject { public native void addClickHandler(ClickHandler handler) /*-{ addEventListener('click', handler, false); }-*/; }

This way I can pass a 'normal' GWT handler to this class, and use it from the outside as any other normal GWT UI element. I'm not sure how to hook up the ClickHandler object to the native javascript implementation of the object though?


-------------Problems Reply------------

Because you need a ClickEvent to pass to ClickHandler.onClick and obtaining it from JavaScript poses a problem (AFAICT) - I'd go with a slightly different, more "generic" approach:

Create a simple Callback interface:

public interface Callback {
void execute();

You can then pass it directly and call it like this:

public native void addClickHandler(Callback callback) /*-{
addEventListener('click', function() {
[email protected]::execute()();
}, false);

Or create an intermediate step:

public void addClickHandler(Callback callback) {

private native void _addClickHandler(JavaScriptObject callback) /*-{
addEventListener('click', callback, false);

// This can be moved to a better place
private native static JavaScriptObject getCallback(Callback callback) /*-{
return function()
[email protected]::execute()();

And, of course, you'd use it like this:

SVGRect svg = getMeSVGRect();
svg.addClickHandler(new Callback() {
public void execute() {
// Do some stuff

Personally, I prefer the second solution - while it's more code, I like to keep my native/JSNI methods private (unless it's an overlay object or something similar) and the code is more readable and less error-prone (no need to use the funky syntax to call Java functions from inside native/JSNI code).

Category:java Views:0 Time:2010-01-25

Related post

  • What is the performance impact of adding methods to native JavaScript objects? 2009-07-28

    I realize that adding methods to native JavaScript objects (Object, Function, Array, String, etc) is considered bad practice by some, but is there also a performance hit associated with this? Would instances of native objects take longer to create an

  • Adding methods to native JavaScript objects 2009-09-21

    Adding methods to native JavaScript objects like Object, Function, Array, String, etc considered as bad practice. But I could not understand why? Can some body shed light on this? Thanks in advance. --------------Solutions------------- Because you mi

  • Comparing native javascript objects with jQuery 2010-09-24

    Possible Duplicate: Object comparison in JavaScript I have two native JavaScript objects: var foo = { hello: 'world', holy: { shit: 'batman' } }; var bar = { ... }; I would like to compare the two (foo == bar). --------------Solutions------------- Th

  • How best to inherit from native JavaScript object? (Especially String) 2011-07-24

    I'm a long-time browser but a first time participator. If I'm missing any etiquette details, please just let me know! Also, I've searched high and low, including this site, but I haven't found a clear and succinct explanation of exactly what I'm look

  • Can CPPredicates be used on native javascript objects? 2011-11-28

    Can you use a CPPredicate to check native javascript objects in cappuccino? I am trying to filter a native javascript array that has native javascript objects in it. --------------Solutions------------- It's not likely to work. Objective-J objects ha

  • How to determine if Native JavaScript Object has a Property/Method? 2009-02-27

    I thought this would be as easy as: if(typeof(Array.push) == 'undefined'){ //not defined, prototype a version of the push method // Firefox never gets here, but IE/Safari/Chrome/etc. do, even though // the Array object has a push method! } And it doe

  • How to modify (prototype?) methods of native Javascript objects? 2010-11-09

    Are there any examples of them? --------------Solutions------------- the following script adds a method of contains in the string prototype in javascript, similarly you can add more methods as you like. Usage var myName = "ZainShaikh"; if (myName.con

  • When should I use my own namespace and when should I extend native js objects? 2010-12-28

    I am in the process of refactoring my code. I'm having trouble deciding on how exactly to implement a couple utility functions I have. Specifically, if certain functions are better off in my personal namespace or extending js Objects directly. Exampl

  • Fix Native Javascript Events 2011-11-29

    I'm wondering if there is any well established way to fix browser inconsistencies with DOM events. What is the best way to fix events? Below is what I am playing with right now (though still broken). Event.prototype.fix = function() { //if ( ! event)

  • Using native code functions as JavaScript objects in WebKit 2010-01-18

    I'm unable to use native code functions as JavaScript objects in WebKit-based browsers. Is it impossible to alias these functions directly? This is easiest to explain by example, so here is what I am running in the Developer Tools console: console.wa

  • Length of a JavaScript object (that is, associative array) 2008-08-07

    If I have a JavaScript associative array, say: var myArray = new Object(); myArray["firstname"] = "Gareth"; myArray["lastname"] = "Simpson"; myArray["age"] = 21; Is there a built-in or accepted best practice way to get the length of this array? JavaS

  • How can I merge properties of two JavaScript objects dynamically? 2008-10-05

    I need to be able to merge two (very simple) JavaScript objects at runtime. For example I'd like to: var obj1 = { food: 'pizza', car: 'ford' } var obj2 = { animal: 'dog' } obj1.merge(obj2); //obj1 now has three properties: food, car, and animal Does

  • Access parent's parent from javascript object 2008-10-08

    Somthing like var life= { users : { guys : function(){ this.SOMTHING.mameAndDestroy(this.girls); }, girls : function(){ this.SOMTHING.kiss(this.boys); }, }, mameAndDestroy : function(group){ }, kiss : function(group){ } }; this.SOMTHING is what I ima

  • How to determine equality for two JavaScript objects? 2008-10-14

    A strict equality operator will tell you if two object types are equal. However, is there a way to tell if two objects are equal, much like the hash code value in Java? Stack Overflow question Is there any kind of hashCode function in JavaScript? is

  • Javascript isDOM - How do you check if a Javascript Object is a DOM Object? 2008-12-21

    I'm trying to get: document.createElement('div') //=> true {tagName: 'foobar something'} //=> false In my own scripts, I used to just use this since I never needed tagName as a property: if (!object.tagName) throw ...; So for the 2nd object, I

  • Loop through JavaScript object 2009-03-26

    I have a JavaScript object like the following: var p = { "p1": "value1", "p2": "value2", "p3": "value3" }; Now I want to loop through all p elements (p1,p2,p3...) and get their keys and values. How can I do that? I can modify the JavaScript object if

  • Most elegant way to clone a JavaScript object 2009-04-08

    I have an object x. I'd like to copy it as object y, such that changes to y do not modify x. What's the most elegant way of doing this in JavaScript? Edit: I realize that copying objects derived from built-in JavaScript objects will result in extra,

  • How to serialize a generic JavaScript object to XML 2009-05-07

    Does one of the mainstream JavaScript libraries (YUI, jQuery, Dojo) provide a way to serialize a JavaScript object to XML (as text)? --------------Solutions------------- Have you considered using JSON instead of XML? Anyway, someone posted this link

  • How do I convert a JSON string to a JavaScript object in jQuery? 2009-05-28

    I have a string in my db I want to pull into my page and convert to a JavaScript object. [ {id: 1,title: "Long Event", start: new Date(2009, 5, 6, 14, 0),end: new Date(2009, 5, 11)}, {id: 2,title: "Repeating Event", start: new Date(2009, 5, 2)}, {id:

Copyright (C), All Rights Reserved.

processed in 0.080 (s). 11 q(s)