GWT, JQuery, Tipsy

[kellizer]

Hi All,

I need to get tipsy ( http://onehackoranother.com/projects/jquery/tipsy/ ) working with GWT as the designers have introduced this in along with GWT and I can't face to telling them tipsy can't be supported!

From analysis - it it works with JQUERY to traverse through the DOM and looks for the "title" attribute on an element and if it finds this attribute it adds a mouse over/mouse out to that element. I can get this working without GWT and in the host page (by importing the js files required) but when I bring back in the GWT js bootstrap it stops working? 

I need to populate the tipsy tooltips for both elements in the host page & also elements that are defined in the ui.xml files & what I have been thinking/researching is that if it would be feasible to call the tipsy JS traverse command directly from GWT via the JSNI when the DOM has been built in GWT? Does that sound feasible? anyone got any suggestions/advice on how to crack this one?

Thanks in advance..

[Sebastian Gurin]

I don't see why not. This is what I would do:

1) create a folder named "public" at the same level of your project's *.gwt.xml file

2) In your project's *.gwt.xml file include the required javascripts,
In your case jquery.js and tipsy.js or whatever, like this:

<inherits name="com.google.gwt.user.User" />
...
<script src='jquery.js' />
<script src='tipsy.js' />

3) create a method for invoking tipsy natively:

public static native void tipsy(String id)/*-{
$wnd.$('#'+id).tipsy();
}-*/;

A tip, you can use GWT dom classes for accessing the DOM elements directly and safely.

Good look, tell us about your results!

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
> To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/mBJME9gMRS4J.
> To post to this group, send email to google-we...@googlegroups.com.
> To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
>

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

[kellizer]

Works a treat - thank you very much!!!!

[Sebastian Gurin]

Glad to help. That is one side of developing a porting of an existing javascript toolkit to GWT. The other side of the work
is to let the user to manipulate javascript native objects in your java code. You can use gwt overlay types for that. Explanation, for example, consider this tipsy javascript code:

$('#foo').tipsy({gravity: 'n'})

you can present the argument object {gravity: 'n'} using gwt overlay types like this:

public class TipsyConfig extends JavaScriptObject {
public final native String getGravity()/*-{
this.gravity;
}-*/;
public final native void setGravity(String g)/*-{
this["gravity"]=g;
}-*/;
}

public class TipsyUtil {

//tipsy main method
public static native void tipsy(String id, TipsyConfig cfg) /*-{
$wnd.$('#'+id).tipsy(cfg);
}-*/;

//and create the native TipsyConfig in some method:
public static native TipsyConfig createConfig() /*-{
return {};
}-*/;
}

So now in your java client programs you can do all the job 100% in java like this:

TipsyConfig cfg = createConfig();
cfg.setGravity("w");
TipsyUtil.tipsy("div1", cfg);
TipsyUtil.tipsy("div2", cfg2);
etc

hope that helps too

On Wed, 8 Feb 2012 11:21:22 -0800 (PST)
kellizer <kell...@gmail.com> wrote:

> Works a treat - thank you very much!!!!
>

> --
> You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.

> To view this discussion on the web visit https://groups.google.com/d/msg/google-web-toolkit/-/a7aSczHMxSMJ.