GWT 中的 JS 函数

Question

如何在 GWT 中使用这个简单的 js 函数？（以图片动画脚本为例）

<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()');

尝试包装

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

但未捕获 ReferenceError：未定义 startAnimation

我看过 http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJSNI.html 但没有找到 js 函数的示例

Answer 1

你可以使用 JSNI:

方法 1： 如果您总是使用 fun = 'startAnimation()' 调用 imageLoader，我的意思是，您总是这样使用 imageLoader：imageLoader(s, 'startAnimation()');

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

你可以这样调用这个方法：

YourMethods::imageLoader(s);

方法 2： 如果您 fun 更改参数（并不总是 'startAnimation()'），但始终是一个类型字符串

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

在这种情况下：您定义第二个参数，如 "javascript name of function"，并这样调用它：

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

GWT 理解有趣的参数，例如 javascript 函数的名称，并键入字符串

方法 3： 将所有 javascript 代码转换为 GWT

Answer 2

您需要添加 $wnd 才能访问直接包含在您的 HTML 主机页面中的 JavaScript。

$wnd.startAnimation();

GWT 中的 JS 函数

JS functions in GWT

gwt

gwt-2.5