How to use external JS from GWT?

[marius.andreiana]

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.

[marius.andreiana]

On Sep 9, 12:26 am, "marius.andreiana" <marius.andrei...@gmail.com>
wrote:

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

and an exception:
com.google.gwt.core.client.JavaScriptException: (ReferenceError): $ is
not defined
fileName: http://127.0.0.1:8888
lineNumber: 3
stack: ()@http://127.0.0.1:8888:3

[Zack Grossbart]

You are having a timing problem that is common for GWT. Consider how
this would work in pure JavaScript.

1. The page loads
2. The external JavaScript files load
3. The page renders
4. Your JavaScript code is called and you make your field
alphanumeric.

With GWT the order of operations changes. This is because GWT has a
bootstrap mechanism they use to load the correct GWT files based on
your browser and language. In GWT the order looks like this:

1. The page loads
2. The external JavaScript files load
3. The page renders
4. Your JavaScript code is called
5. GWT JavaScript loads the new HTML page with your JavaScript code
6. GWT calls your onModuleLoad method
7. GWT add the HTML controls to the DOM

In your example you are trying to access DOM elements in step six, but
they aren't available until step seven. I had a similar problem when
I wanted to use the JQuery date picker on a GWT text box. The
solution is the onAttach method in
com.google.gwt.user.client.ui.Widget.

My class looks like this:

public class DatePickerTextBox extends TextBox
{
public DatePickerTextBox(String id)
{
super();
getElement().setId(id);
}

public void onAttach()
{
super.onAttach();
addDatePickerJS(getElement().getId());
}

private static native void addDatePickerJS(String id) /*-{
$wnd.$('#' + id).datepicker();
}-*/;
}

In this case I require the field to have an ID so I can use JQuery to
find it. I then wait until the attach happens because I call my
JQuery function. Now my order of operations looks like this:

6. GWT calls your onModuleLoad method
7. GWT add the HTML controls to the DOM
8. GWT calls the onAttach method and I call my JavaScript function

It is also worth noting that this pattern creates a reusable widget
that internalizes all of the JavaScript. Code using this widget has
no idea that it is using JavaScript and I could easy replace the
implementation without breaking the contract of the control.

I hope this helps,
Zack

[marius.andreiana]

Thanks Zack ;)

In your example, where and how do you include the jQuery UI datepicker
widget?
(I tried in UiBinder .ui.xml files, but didn't work for me with
<script src=".." />)

Marius

[Zack Grossbart]

> In your example, where and how do you include the jQuery UI datepicker
> widget?

I defined them in the HTML file containing my GWT code. Just a simple
JavaScript reference the same way I would in any other HTML page.

[marius.andreiana]

Right. I was aiming for a solution where that js is loaded only when
needed, e.g. no need to load datepicker.js in the signin screen.

I saw this but seems too much for a simple <script src> equivalent in
View.ui.xml
http://www.amateurinmotion.com/articles/2009/09/07/injecting-javascript-in-gwt-2.html