gwtupload输入类型costum [英] gwtupload input type costum

问题描述

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

I using the gwtupload libary to change the upload view of my application. I want to implement basically the same as in this example "Single uploader using a customizable button...". Therefore I'm having a custom button class:

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 ：

and a 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");    
}

一切都以上传视图加载：

everything is loaded with an upload view:

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

当我启动我的应用程序我试图用chrome调试模式调试它，但没有证据从我的服装形式。不太确定为什么。

When I start my application (in debug mode) nothing is shown. I try to debug it with the chrome debug mode, but no evidence from my costume form. Not quite sure why. thx for any help.

//编辑：
修正了一些事情，我知道我有我的自定义按钮和每个 setAutoSubmit 我已停用发送/提交按钮。禁用工作正常，但它只是隐形，所以它在那里，并占用空间，这是一个问题，因为我的上传者是在另一个面板中，并知道我无法集中它，因为它的中心与提交按钮。那么如何删除或重叠的按钮。 css？ thx：）

// Fixed a few things know I'm having my custom button and per setAutoSubmit(true); I disabled the "Send/submit" button. Disabling works fine, but it is just invisible so it is there and takes space away which is a problem because my uploader is within another Panel and know I can not center it because it's center with the submit button. So how can I delete or overlap the button. css? thx :)

推荐答案

我修复了Css和postion的问题。

I fixed the problem with Css and postion.

提示：如果有人想在将来定制一个UploadForm，为了简单的单文件上传，更容易添加一个clickHanderler到你的新表单（图像，按钮等），它执行元素点击基本上传表单。然后你可以把你的基本形式的显示区域或设置它的新的自定义UploadForm后，然后用css美化它。

Hint: If somebody wants to customize an UploadForm in the future, for a simple one-file-upload, it's easier to to add a clickHanderler onto your new form (image, button etc.), which performs an element click on the base upload form. Then you can position your base form out of the display area or set it behind the your new customize UploadForm and then beautify it with css.

gwtupload框架是非常好的，但对于这个简单的任务来说太多了。对于multipy文件上传和动画等，我可以推荐它：）

The gwtupload framework is very good, but for this simple task to much. For multipy fileupload with animation etc. i can recommend it :)

这篇关于gwtupload输入类型costum的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！