Question

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

我使用了HTML窗口小部件但是如何才能使文字无法选择？

Answer 1

我最近对GWT按钮的需求相同，它允许添加图像和文本。所以我自己编写了一个，因为已经可用的实现不起作用。我wrote a post on my blog但我也在这里复制代码：

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

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>

这样一个按钮的截图：
alt text

Answer 2

您是要删除文本选择光标，还是使文本完全无法选择？

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

.widget_style {cursor: pointer;}

实际上让它无法选择并不能得到我所理解的支持。它是CSS3规范中的用户选择。

.widget_style {user-select:none;}

Answer 3

您是否尝试过Gwt的CustomButton类？

这是链接：

http://projectpossibility.org/projects/word_prediction/gwt-linux-1.4.60/doc/javadoc/com/google/gwt/user/client/ui/CustomButton.html

Answer 4

允许向Button添加任意小部件的类：

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;
    }

}

与UiBinder：

...

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

Answer 5

我会使用Button-Widget并调用setHTML（）函数。您可以使用此代码：

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

您只需在创建按钮时提供文本和图片网址。

在gwt中创建自定义按钮

5 个答案: