java - native GWT : calling java method from native js

Question

我在从 native 脚本调用 java 时遇到问题。我传递了我想要的名为 imagesPanel 的实例作为参数，知道该实例实现了 ImageHolder。 Window.alert() 就在调用被调用之前，但调用从未发生。

有什么我忘记做的事情吗？

/**
 * Used this link as a model: http://blog.revathskumar.com/2012/04/html5-show-thumbnail-preview-of-image.html
 * 
 * http://www.gwtapps.com/doc/html/com.google.gwt.doc.DeveloperGuide.JavaScriptNativeInterface.JavaFromJavaScript.html
 * 
 * FIXME check file size too and eventually add a forbidden icon:  http://www.sanwebe.com/2013/10/check-input-file-size-before-submit-file-api-jquery
 * @param fileUpload
 * @param imagesPanel
 * @return
 */
protected native String initiateFilesInput(Element fileUpload, UploadItemWidget imagesPanel)/*-{
    fileUpload.children[0].children[0].addEventListener("change",
            fileUpload.addEventListener("change", function(e) {
                showThumbnail(fileUpload.children[0].children[0].files,
                        imagesPanel);
            }, false));

    $entry(function showThumbnail(files, imagesPanel) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i]
            var image = $doc.createElement("img");
            image.file = file;

            var reader = new FileReader();
            reader.onload = (function(img) {
                return function(e) {
                    img.src = e.target.result;
                    $wnd.alert('check =' + img);
                    imagesPanel.@fr.onevu.vume.client.common.widget.fileUpload.ImageHolder::addImage(Lcom/google/gwt/dom/client/Element;)(img);
                };
            }(image));

            var ret = reader.readAsDataURL(file);
        }
    })
}-*/;

@Override
public void addImage(Element image) {
    System.out.println( "adding "+ image);
    panel.getElement().appendChild(image);
}

这是接口(interface)代码

import com.google.gwt.dom.client.Element;

public interface ImageHolder {

    void addImage(Element image);
}

Answer 1

在进行一些更改后，它对我来说工作正常。

• 删除所有children[0].children[0]

• 删除$entry()

<小时/>

完整代码:

public static native String initiateFilesInput(Element fileUpload, UploadItemWidget imagesPanel)/*-{
    fileUpload.addEventListener("change", fileUpload.addEventListener(
            "change", function(e) {
                showThumbnail(fileUpload.files, imagesPanel);
            }, false));

    function showThumbnail(files, imagesPanel) {

        for ( var i = 0; i < files.length; i++) {
            var file = files[i]
            var image = $doc.createElement("img");
            image.file = file;

            var reader = new FileReader();
            reader.onload = (function(img) {
                return function(e) {
                    img.src = e.target.result;

                    imagesPanel.@fr.onevu.vume.client.common.widget.fileUpload.ImageHolder::addImage(Lcom/google/gwt/dom/client/Element;)(img);
                };
            }(image));

            var ret = reader.readAsDataURL(file);
        }
    }
}-*/;

<小时/>

您的原始帖子中缺少部分代码。请验证。

public class ImageHolder implements UploadItemWidget {

    public SimplePanel panel = new SimplePanel();

    public FileUpload fileUpload = new FileUpload();

    public ImageHolder() {
        panel.add(fileUpload);
    }
    ...
}

入口点类

public void onModuleLoad() {

    ImageHolder imageHolder = new ImageHolder();
    RootPanel.get().add(imageHolder.panel);

    ImageHolder.initiateFilesInput(imageHolder.fileUpload.getElement(), imageHolder);
}

屏幕截图:(已选择3张图片)