包装/装饰 GWT FileUpload

Question

GWT FileUpload 作为一个小部件来生成，以便人们可以在表单提交期间上传文件（至少这是我的理解:)）我想做的是使其看起来更好并摆脱标准的“Browse.txt”。 ..“ 按钮。

由于我没有良好的 GWT 经验（也没有 JavaScript），所以我寻找现有的解决方案并发现了一个相当好的项目 - gwtupload。这很好，但我意识到我很想拥有自己的微型版本（而且我很好奇它是如何工作的）。所以我浏览了代码并尝试提取神奇的部分。我意识到使用了 GWT FileInput，但没有显示，并且按钮单击被委托给此 FileInput。在查看 gwtupload 的来源后，我尝试提取的代码（仅委托点击的部分）包含这个棘手的 elem.click() JSNI：

class MyUpload extends Composite {
    private static native void clickOnInputFile(Element elem) /*-{
        elem.click();
    }-*/;

    public MyUpload() {
        final FileUpload upload = new FileUpload();
        AbsolutePanel container = new AbsolutePanel();
        // container.add(upload);
        Button btn = new Button("My Browse..");
        btn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                clickOnInputFile(upload.getElement());
            }
        });
        container.add(btn);
        initWidget(container);
    }
}

但这似乎不起作用：单击“我的浏览..”不会产生任何效果（以防万一我也尝试使用未注释的 container.add(upload) 行）。您能帮助我理解此代码示例中的错误/缺失吗？

先感谢您。

PS 我知道我必须将它放在 FormPanel 上，并且我知道其余的如何在 Servlet 中执行实际的提交/处理；我唯一想做的就是这样的装饰。

Answer 1

由于我没有收到任何答案，因此我必须对这个问题进行更多调查，因此我对 gwtupload 项目，以了解如何装饰 GWT FileUpload（转换为 ）。

事实证明， element.click() 仅适用于支持 #click() 方法的浏览器（IE、Chrome、Safari）。事实上，项目作者 Manuel Carrasco Moñino 在评论中提到了这一点。还有第二种方法（对于 Firefox 和 Opera），当 FileInput 放置在透明面板上时使用 hack，但是将其放置在一些装饰按钮上（使用绝对定位）；曼努埃尔评论：

当用户将鼠标放在按钮上并单击它时，真正发生的是用户单击显示选择文件对话框的透明文件输入。

之后的主要工作就是正确地将样式属性应用到元素上。

因此，自定义文件上传组件有两种实现，并且根据浏览器使用GWT延迟绑定来实例化它们。

例如，我在问题中提到，有一些修复（必须将“上传”添加到容器中，并且可以将其设置为 #setVisible(false)）：

class MyUpload extends Composite {
    private static native void clickOnInputFile(Element elem) /*-{
        elem.click();
    }-*/;

    public MyUpload() {
        final FileUploadWithMouseEvents upload = new FileUploadWithMouseEvents();
        AbsolutePanel container = new AbsolutePanel();
        container.add(upload);
        upload.setVisible(false);
        Button btn = new Button("My Browse..");
        btn.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                clickOnInputFile(upload.getElement());
            }
        });
        container.add(btn);
        initWidget(container);
    }
}

此示例在 IE8 中运行良好。

PS 感谢曼努埃尔提供的伟大的图书馆:)