Wednesday, September 8, 2010

How to use external JS from GWT?

Hello group,

I'm trying to see how to use JS from GWT. Already been through JSNI
docs, but let's take a little more complex example.

Say I've found a nice jQuery plugin, such as http://itgroup.com.ph/alphanumeric/
The goal is to use it on the "Please enter your name:" field from
default Eclipse project.

Step 1
add to project.html file, just to see this working:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.alphanumeric.pack.js"></
script>
...
<input type="text" class="sample1" size="10" />
<script type="text/javascript">
$('.sample1').alphanumeric();
</script>

Step 2
move <script> tags to UiBinder xml files.
Question: How could JS external files be included there? (<script
src=""> doesn't work)

Step 3
Add sample2 class to name field (from Java or UiBinder) :
nameField.setStylePrimaryName("sample2");

Step 4
Define this in EntryPoint project file
public static native void jsSetup() /*-{
$wnd.alert("a");
$('.sample2').alphanumeric();
}-*/;

Call it near the end of onModuleLoad()

jsSetup();

Question: Why doesn't this work? Maybe not everything is loaded at the
time of JS call, but replacing JSNI line with
$('.sample1').alphanumeric();
and removing this line from project.html still doesn't work (sample1
is already in host html)

I also get
Error: $entry(__gwt_makeTearOff(null, 1179695, 0)) is not a function
Source File: http://127.0.0.1:8888
Line: 34

Any suggestions kindly appreciated.

PS: I know about GQuery and it works great, if you write functionality
from scratch. For some cases we want to re-use what's already done out
there for jQuery and other AJAX frameworks.

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

No comments:

Post a Comment