在gwt中创建自定义按钮

我正在尝试与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定义

 ...   ...  

这样一个按钮的截图：

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 widgets = new ArrayList(); @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 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：

…

  Whatever   

Answer 5

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

 public class Custombutton extends Button { public CustomButton(String text, String img) { this.setHTML(text + "
"); } } 

您只需在创建按钮时提供文本和img URL。