0

我使用 gwtupload 库来更改我的应用程序的上传视图。我想实现与此示例“使用可自定义按钮的单个上传器...”中的基本相同。因此我有一个自定义按钮类:

public class CostumButton extends Composite implements HasClickHandlers {
    DecoratorPanel widget;

    public CostumButton() {
      widget = new DecoratorPanel();
      initWidget(widget);
      widget.setStyleName("costum-Button");

      widget.setSize("100%","100%");

    }

    public HandlerRegistration addClickHandler(ClickHandler handler) {
      return addDomHandler(handler, ClickEvent.getType());
    }


  }

和 FileUploadFormImplDefault:

// new costum button
CostumButton button = new CostumButton();


// Create a FileUpload widget.
fileUpload = new SingleUploader(FileInputType.CUSTOM.with(button));

fileUpload.setTitle("costumFileUpload");

fileUpload.getWidget().setSize("100%", "50px");
RootPanel.get().add(fileUpload);

我的css文件:

.base-Button:active {
        position:relative;
        top:1px;
        border: none;
}

.costum-Button {
    cursor: pointer;
    background-color: green;
    background-image: url("resources/img/button_upload0.png");  
}

.custom-Button:hover {
    background-image: url("resources/img/button_upload0_hover.png");    
}

一切都加载了上传视图:

uploadForm = new FileUploadFormImplCostum(actionUrl);
add(uploadForm);

当我启动我的应用程序(在调试模式下)时,什么都没有显示。我尝试使用 chrome 调试模式对其进行调试,但我的服装形式没有任何证据。不太清楚为什么。谢谢任何帮助。

//编辑:修正了一些事情,知道我有我的自定义按钮和每个setAutoSubmit(true); 我禁用了“发送/提交”按钮。禁用工作正常,但它只是不可见,所以它在那里并占用空间,这是一个问题,因为我的上传者在另一个面板中并且知道我无法居中它,因为它位于提交按钮的中心。那么如何删除或重叠按钮。CSS?谢谢 :)

4

1 回答 1

0

我解决了 Css 和位置的问题。

提示:如果将来有人想自定义 UploadForm,对于简单的单文件上传,将 clickHanderler 添加到新表单(图像、按钮等)上会更容易,它会在基本上传上执行元素点击形式。然后,您可以将基本表单放置在显示区域之外,或者将其设置在新的自定义 UploadForm 后面,然后使用 css 美化它。

gwtupload 框架非常好,但是对于这个简单的任务来说就太多了。对于带有动画等的多重文件上传,我可以推荐它:)

于 2014-02-21T07:11:20.633 回答