原生GWT：從原生js調用java方法

我有一個從原生腳本調用java的問題。我通過我想要的實例imagesPanel作爲參數，知道該實例實現了ImageHolder。調用被調用之前的Window.alert（），但是調用永遠不會發生。原生GWT：從原生js調用java方法

有什麼我忘記了嗎？

/** 
* 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); 
        [email protected]Holder::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); 
}

這裏的接口代碼

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

public interface ImageHolder { 

    void addImage(Element image); 
}

來源

2014-05-09 Zied Hamdi

它做了一些更改後的工作對我罰款。

刪除所有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; 

        [email protected]Holder::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個圖像被選擇）

enter image description here

來源

2014-05-09 14:26:42 Braj

嗨Braj，感謝您的答覆。我有的問題是，那fileUpload是一個iFrame（這就是爲什麼我沒有得到它的工作）我添加了$條目，因爲我想：也許該腳本沒有看到方法showThumbnail（），但它沒有絕望（我知道它應該看到它），所以如果你替換公共FileUpload fileUpload = new FileUpload（）;與IFrame的問題將是可見的。其實這是爲了這個目的：https：//groups.google.com/forum/#!topic/gwtupload/O1cjVxK-HTQ –

我會把你的答案正確，因爲我的問題沒有很好地問： - / –

原生GWT：從原生js調用java方法

回答

相關問題