首页 文章

包装/装饰GWT FileUpload

提问于
浏览
2

GWT FileUpload作为一个小部件产生,以便人们可以在表单提交期间上传文件(至少我是如何理解:) :)我想做的是使它看起来更好看并摆脱标准“浏览 . ..“按钮 .

由于我没有良好的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);
    }
}

但这似乎不起作用:单击'My Browse..'结果无效(以防万一我也尝试使用未注释的 container.add(upload) 行运行) . 能否请您帮助我理解此代码示例中的错误/缺失?

先感谢您 .

附:我知道我必须将它放在FormPanel上,我知道如何在Servlet中执行实际的提交/处理;我唯一想做的就是这种装饰 .

1 回答

  • 9

    由于我没有收到任何答案,我不得不对此问题进行更多调查,因此我对gwtupload项目进行了更深入的代码分析,以便了解如何修饰GWT FileUpload(转换为) .

    原来, element.click() 只适用于支持#click()方法(IE,Chrome,Safari)的浏览器 . 实际上,ManuelCarrascoMoñino--项目作者 - 在评论中提及它 . 当FileInput被放置在透明面板上时,第二种方法(对于Firefox和Opera)使用hack,然而它被放置在一些装饰按钮上(使用绝对定位); Manuel的评论:

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

    之后,主要工作是将样式属性正确应用于元素 .

    因此,有两种自定义文件上载组件的实现,并且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中工作正常 .

    附:感谢曼努埃尔的伟大图书馆:)

相关问题