Java 在gwt中创建自定义按钮

我正在尝试使用GWT做一些非常常见的事情——通过将文本放置在图像顶部，创建一个带有图像和文本的按钮行为

---

我已经使用了

HTML

小部件，但是如何使文本不可选择？

您的意思是取消文本选择光标，还是使文本完全不可选择

要使它看起来像可点击的东西，可以使用光标CSS规则

.widget_style {cursor: pointer;}

据我所知，实际上使其不可选择并没有得到很好的支持。它在CSS3规范中，由用户选择

.widget_style {user-select:none;}

---

我将使用Button小部件并调用setHTML（）函数。 您可以使用以下代码：

public class Custombutton extends Button {
    public CustomButton(String text, String img) {
        this.setHTML(text + "<br><img src=\"" + img + "\">");
    }     
}

公共类Custombutton扩展按钮{
公共自定义按钮（字符串文本、字符串img）{
此.setHTML（文本+“
”）；
}     
}

---

创建按钮时只需提供文本和img url。

您尝试过gwt的CustomButton类吗

以下是链接：

---

我最近也需要一个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>

。。。
...

此按钮的屏幕截图：

---

一个允许向按钮添加任意小部件的类：

import java.util.ArrayList;
import java.util.Iterator;

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HasWidgets;
import com.google.gwt.user.client.ui.Widget;

public class ButtonWithWidgets extends Button implements HasWidgets
{
    private ArrayList<Widget> widgets = new ArrayList<Widget>();

    @Override
    public void add(Widget w)
    {
        DOM.insertChild(getElement(), w.getElement(), widgets.size());
    }

    @Override
    public void clear()
    {
        for (Widget widget : widgets)
        {
            DOM.removeChild(getElement(), widget.getElement());
        }
        widgets.clear();
    }

    @Override
    public Iterator<Widget> iterator()
    {
        return widgets.iterator();
    }

    @Override
    public boolean remove(Widget w)
    {
        if (widgets.indexOf(w) != -1)
        {
            widgets.remove(w);
            DOM.removeChild(getElement(), w.getElement());
            return true;
        }
        else
            return false;
    }

}

import java.util.ArrayList；
导入java.util.Iterator；
导入com.google.gwt.user.client.DOM；
导入com.google.gwt.user.client.ui.Button；
导入com.google.gwt.user.client.ui.haswidget；
导入com.google.gwt.user.client.ui.Widget；
公共类ButtonWithWidgets扩展按钮实现HasWidgets
{
private ArrayList widgets=new ArrayList（）；
@凌驾
公共无效添加（小部件w）
{
insertChild（getElement（），w.getElement（），widgets.size（））；
}
@凌驾
公共空间清除（）
{
用于（小部件：小部件）
{
removeChild（getElement（），widget.getElement（））；
}
widgets.clear（）；
}
@凌驾
公共迭代器迭代器（）
{
返回widgets.iterator（）；
}
@凌驾
公共布尔删除（小部件w）
{
if（widgets.indexOf（w）！=-1）
{
widgets.remove（w）；
removeChild（getElement（），w.getElement（））；
返回true；
}
其他的
返回false；
}
}

使用UiBinder：

无论什么

请提供当前文档和官方来源的链接：哦，很抱歉，我以为这是新文档。此链接已断开。

<customwidgets:ButtonWithWidgets>
    <g:Label>Whatever</g:Label>
    <g:Image url="etc.png"/>
</customwidgets:ButtonWithWidgets>