在gwt中创建自定义按钮

Question

我正在尝试与GWT做一些非常常见的事情 - 通过将文本放在图像顶部来创建带有图像和文本的按钮行为.

我使用过HTML小部件但是如何才能使文本无法选择？

Answer 1

我最近对GWT按钮的需求相同,它允许添加图像和文本.所以我自己编写了一个,因为已经可用的实现不起作用.我在博客上写了一篇文章,但我也在这里复制代码:

这是我的自定义按钮的代码

import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Image;

public class CustomButton extends Button {
    private String text;

    public CustomButton(){
        super();
    }

    public void setResource(ImageResource imageResource){
        Image img = new Image(imageResource);
        String definedStyles = img.getElement().getAttribute("style");
        img.getElement().setAttribute("style", definedStyles + "; vertical-align:middle;");
        DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement()));
    }

    @Override
    public void setText(String text) {
        this.text = text;
        Element span = DOM.createElement("span");
        span.setInnerText(text);
        span.setAttribute("style", "padding-left:3px; vertical-align:middle;");

        DOM.insertChild(getElement(), span, 0);
    }

    @Override
    public String getText() {
        return this.text;
    }
}

用于UiBinder XML定义

...
<!-- ImageBundle definition -->
<ui:with field="res" type="com.sample.client.IDevbookImageBundle" />
...
<d:CustomButton ui:field="buttonSave" text="Save" resource="{res.save}"></d:CustomButton>

这样一个按钮的截图: