JS functions in GWT

Question

how use this simple js functions in GWT? (picture animation script for example)

<script type="text/javascript">
var cSpeed=4;
var cWidth=64;
var cHeight=64;
var cTotalFrames=8;
var cFrameWidth=64;
var cImageSrc='images/sprites.gif';

var cImageTimeout=false;
var cIndex=0;
var cXpos=0;
var cPreloaderTimeout=false;
var SECONDS_BETWEEN_FRAMES=0;

function startAnimation(){

    document.getElementById('loaderImage').style.backgroundImage='url('+cImageSrc+')';
    document.getElementById('loaderImage').style.width=cWidth+'px';
    document.getElementById('loaderImage').style.height=cHeight+'px';

    //FPS = Math.round(100/(maxSpeed+2-speed));
    FPS = Math.round(100/cSpeed);
    SECONDS_BETWEEN_FRAMES = 1 / FPS;

    cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES/1000);

}

function continueAnimation(){

    cXpos += cFrameWidth;
    //increase the index so we know which frame of our animation we are currently on
    cIndex += 1;

    //if our cIndex is higher than our total number of frames, we're at the end and should restart
    if (cIndex >= cTotalFrames) {
        cXpos =0;
        cIndex=0;
    }

    if(document.getElementById('loaderImage'))
        document.getElementById('loaderImage').style.backgroundPosition=(-cXpos)+'px 0';

    cPreloaderTimeout=setTimeout('continueAnimation()', SECONDS_BETWEEN_FRAMES*1000);
}

function stopAnimation(){//stops animation
    clearTimeout(cPreloaderTimeout);
    cPreloaderTimeout=false;
}

function imageLoader(s, fun)//Pre-loads the sprites image
{
    clearTimeout(cImageTimeout);
    cImageTimeout=0;
    genImage = new Image();
    genImage.onload=function (){cImageTimeout=setTimeout(fun, 0)};
    genImage.onerror=new Function('alert(\'Could not load the image\')');
    genImage.src=s;
}

//The following code starts the animation
new imageLoader(cImageSrc, 'startAnimation()');

tried wrapping

    public static native void anim()
/*-{
   js here
}-*/;  

but Uncaught ReferenceError: startAnimation is not defined

i've seen http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html but didn't find examples for js functions

Answer 1

You can use JSNI:

Method 1: if you ALWAYS call imageLoader with fun = 'startAnimation()', i mean, you always use imageLoader this way: imageLoader(s, 'startAnimation()');

class YourMethods
{
    public static native void imageLoader(String s) /*-{
    imageLoader(s, 'startAnimation()');
    }-*/;
}

You can call this method like this:

YourMethods::imageLoader(s);

Method 2: if you fun parameter change (is not always 'startAnimation()'), BUT ALWAYS IS A TYPE STRING

class YourMethods
{
    public static native void imageLoader(String s, String fun) /*-{
    imageLoader(s, fun);
    }-*/;
}

In this case: you define second parameter like "javascript name of function", and call it this way:

YourMethods::imageLoader(s, "startAnimation()");

And GWT understand fun parameter like name of javascript function, and type string

Method 3: convert ALL your javascript code to GWT

Answer 2

You need to add $wnd to access JavaScript which is included directly in your HTML host page.

$wnd.startAnimation();