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

Andrei Volgin · Accepted Answer · 2016-08-29 01:19:55Z

1

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

$wnd.startAnimation();

answered Aug 29, 2016 at 1:19

Andrei Volgin

41.1k6 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ing. Gerardo Sánchez · Accepted Answer · 2016-08-29 03:27:02Z

0

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

edited Aug 29, 2016 at 3:27

answered Aug 29, 2016 at 0:20

Ing. Gerardo Sánchez

1,68515 silver badges14 bronze badges

2 Comments

Jack Over a year ago

but "fun" is a function in args here. js function is not a real java type :/ and in general, where to find different examples of use a native js in gwt? in network are not very many such examples

Jack Over a year ago

it ended up that i just put js code in html and call it from the application. but the task was to add it to the page dynamically. I am afraid that the answer to the question of how to generate and use native js in gwt directly from the app, we have not received. although I'll mark your answer as correct, it gives reason to think

Collectives™ on Stack Overflow

JS functions in GWT

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related