我正试图将我的大部分本地JavaScript代码从JSNI方法转移到脚本中,并利用本地JSNI方法来调用这些外部方法。
现在我的一个点击处理程序遇到了困难。当用户单击某个特定元素时,JSNI方法会执行一些基于JQuery的动画,然后在回调中调用Java方法。一个简单的例子是:
public native void attachClickHandler(SomeCustomPanel customPanel) /*-{
$wnd.jQuery("#theElement").click(function() {
// some JQuery animation logic here...
$wnd.jQuery("#theElement").animate({ top: "500px" }, 500, function() {
customPanel.@com.something.whatever.client.SomeCustomPanel::doSomething()();
});
// some other code here...
});
}-*/;
此代码有效。它按预期编译和工作。我想把它移到一个外部JavaScript中。我尝试了以下方法。我把它放在外部JavaScript中:
function attachClickAction(customPanel) {
$("#theElement").click(function() {
// other stuff...
$("#theElement").animate({ top: "500px" }, 500, function() {
customPanel.@com.something.whatever.client.SomeCustomPanel::doSomething()();
});
// other stuff...
});
}
并修改了本机函数如下:
public native void attachClickHandler(SomeCustomPanel customPanel) /*-{
$wnd.attachClickAction(customPanel);
}-*/;
但这是不正确的。JavaScript文件甚至无法加载,因为这不是正确的JavaScript。(Chome的开发工具给了我错误消息"Uncaught SyntaxError:Unexpected identifier"。)
是否有方法从外部JavaScript文件调用Java方法,而不是从JSNI方法调用
如果重要的话,我使用GWT2.4。
答案是否,不能从外部JavaScript函数显式调用Java方法
然而,您可以聪明地利用JavaScript允许您将函数本身作为参数传递的事实。
我修改了我的JavaScript函数,如下所示:
function attachClickAction(callbackFunction) {
$("#theElement").click(function() {
// other stuff...
$("#theElement").animate({ top: "500px" }, 500, callbackFunction);
// other stuff...
});
}
在我的Java代码中,我明确地将Java方法作为回调函数参数传递:
public native void attachClickHandler(SomeCustomPanel customPanel) /*-{
$wnd.attachClickAction(function() {
customPanel.@com.something.whatever.client.SomeCustomPanel::doSomething()();
});
}-*/;
这样,当JSNI方法编译时,它会正确地调用doSomething()
Java方法,并且该方法调用会完整正确地传递给外部JavaScript函数。
尽管使用普通GWT不能直接从JavaScript调用Java classe的方法,gwt导出器完成了从本机JavaScript调用"Java"对象的方法所需的大量管道工作。
你可以做这样的事情:
Java:
@ExportPackage("")
@Export("MYOBJ");
class MyClass implements Exportable {
public void doSomething();
}
JavaScript:
MYOBJ.doSomething();
gwt导出器与GWT2.4、
是的,您可以将Java(GWT)方法导出为JavaScript函数,并且可以将Java对象放入JavaScript变量中。这里有一个简单的例子:
@Override
public void onModuleLoad() {
exportJavaMethodsToJs();
final SomeCustomPanel firstCustomPanel = new SomeCustomPanel("first");
exportJavaObjectToJs("firstCustomPanel", firstCustomPanel);
final SomeCustomPanel anotherCustomPanel = new SomeCustomPanel("another");
exportJavaObjectToJs("anotherCustomPanel", anotherCustomPanel);
}
native void exportJavaMethodsToJs() /*-{
$wnd.doSomething = function(panel) {
panel.@com.something.whatever.client.SomeCustomPanel::doSomething()();
}
// Export any methods you need in JavaScript here...
}-*/;
native void exportJavaObjectToJs(final String key, final Object object) /*-{
$wnd[key] = object;
}-*/;
然后,在JavaScript中(在调用onModuleLoad()之后!),你可以像一样轻松地使用它
doSomething(firstCustomPanel);
doSomething(anotherCustomPanel);
您的示例现在看起来是这样的:
jQuery("#theElement").click(function() {
// some JQuery animation logic here...
$wnd.jQuery("#theElement").animate({ top: "500px" }, 500, function() {
doSomething(firstCustomPanel);
});
// some other code here...
});