native events handlers

[Sebastian Gurin]

Hi all. First of all letme congratulate the authors for this library
and just getting started with gwt.. I'm a fan of raphaeljs, and now I
would like to use it in my gwt apps.

I'm a little confused about raphael events and how raphaelgwt relates
raphael shapes with gwt widgets.

I would like to do some drawing in a raphael paper and register/
unregister some events. I'm not interested in widgetize my raphael
shapes. I only want to create a paper, draw some figures and register
some mouse events.

in gwtraphael I see that mouse event to raphael figures are
implemented using gwt widget. I do not fully understand this:

Are each raphaeljs elements a Gwt Widget?
raphaeljs paper is a widget and a drawed circle it is also a (child)
widget?
is it possible to use (and register mouse events) raphaeljs directly,
without referencing gwt widgets?

Regards, thanks in advance.

[Geoff Speicher]

On Sun, Jan 29, 2012 at 10:18 AM, Sebastian Gurin <sgu...@softpoint.org> wrote:

I'm a little confused about raphael events and how raphaelgwt relates
raphael shapes with gwt widgets.

I would like to do some drawing in a raphael paper and register/
unregister some events. I'm not interested in widgetize my raphael
shapes. I only want to create a paper, draw some figures and register
some mouse events.

See:

http://code.google.com/p/raphaelgwt/source/browse/trunk/src/com/hydro4ge/raphaelgwt/client/RaphaelJS.java
http://code.google.com/p/raphaelgwt/source/browse/trunk/src/com/hydro4ge/raphaelgwt/client/Raphael.java

The former is a Javascript "overlay" type that gives you access to the underlying Javascript library.  The latter is a Widget that uses the overlay.  If you use the RaphaelJS overlay exclusively then you have no widgets wrapping your shapes from the underlying Javascript library.
 

in gwtraphael I see that mouse event to raphael figures are
implemented using gwt widget. I do not fully understand this:

Are each raphaeljs elements a Gwt Widget?

RaphaelJS no.  Raphael, yes.
 

raphaeljs paper is a widget and a drawed circle it is also a (child)
widget?

There is no widget named "paper" per se, but Raphael is a widget and all of its nested classes (e.g. Raphael.Circle) are widgets, with the exception of Set.
 

is it possible to use (and register mouse events) raphaeljs directly,
without referencing gwt widgets?

You can always use GWT native Javascript methods to achieve, or else call RaphaelJS.node() to retrieve the underlying element and attach handlers that way.

I would suggest that you might be better off using the widget layer of the library as it was designed.  The whole point is to make it easy to use the native Raphael Javascript library with GWT/Java code and libraries.  Working around that to access the native Javascript directly might be more trouble than it's worth.

Geoff

[Sebastian Gurin]

Geoff, thanks for the reply.

you said:

> I would suggest that you might be better off using the widget layer of the
> library as it was designed. The whole point is to make it easy to use the
> native Raphael Javascript library with GWT/Java code and libraries.
> Working around that to access the native Javascript directly might be more
> trouble than it's worth.

As you said, the library seems to be designed to work along with gwt widgets. I'm trying to learn best practices for porting existing javascript toolkits to GWT. Because of this and because I need raphael2.0 and work only with native objects for adding no overhead to my drawings I decided to start developing my own raphaeljs porting to GWT. I named it raphael4gwt:

project's page:
http://code.google.com/p/raphael4gwt/

wiki explaining in the last section more about the reasons and relation with your's raphaelgwt:
http://code.google.com/p/raphael4gwt/wiki/MainDocumentation

demo. Can vew examples java source clicking "view java sources"
http://cancerbero.vacau.com/gwt/raphael4gwtGallery/

I started source code by scratch and basing on Raphael 2.0. I think my library, do the same thing as your (lower-layer) RaphaelJS class. Neverthess raphael4gwt will support 100% of raphaeljs API, including event registrarion/unregistrarion, animations, etc. It is based on gwt.client.dom. Support very basic integration with gwt widgets: only a simple widget class that shows a raphael paper (canvas) inside.

Perhaps in a future the two libraries can help each other to bring a defenitly raphaeljs api (well integrated with GWT widgets as yours).

Also, I's surprised why your raphaelgwt library do not support raphael events at the lower layer. I would add a MouseEventListener interface and the jsni methods:

RaphaelJs.Element::click(MouseEventListener)
RaphaelJs.Element::unclick(MouseEventListener)
....

the only supported event type I see is RaphaelJs.Element::drag()

I would like to contribute to gwtraphael with this, since I have already done this in my raphael4gwt, but I would like to know your opinion first.

raphael4gwt is Work in progress (I started it few days ago). But I'm feeling very confortable programming GWT jsni stuff in eclipse and I think I solved the most difficult problems, so I think in a week or two I will have a 100% raphael api finished.

Regards,

--
Sebastian Gurin <sgu...@softpoint.org>

[Geoff Speicher]

Certainly, you're free to maintain your own library, but we are accepting contributions, and I am particularly interested any that round out missing parts of the RaphaelJS overlay (such as native drag, which was contributed) and anything involving an upgrade to Raphael v2.0.  Anything to this end that you can contribute back to the project in the form of patches would be greatly appreciated.