I am trying to do something pretty common with GWT - creating a button behavior with an image and a text by positioning the text on top of the image.
I have used the HTML
widget but how can I make the text not selectable?
I recently had the same need for a GWT button which allows to add image AND text. So I coded one myself since the already available implementations didn't work. I wrote a post on my blog but I also copy the code here:
Here's the code for my custom button
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;
}
}
Usage with UiBinder XML definition
...
<!-- ImageBundle definition -->
<ui:with field="res" type="com.sample.client.IDevbookImageBundle" />
...
<d:CustomButton ui:field="buttonSave" text="Save" resource="{res.save}"></d:CustomButton>
The screenshot of such a button:
Do you mean to get rid of the text select cursor, or make the text completely unselectable?
To make it look like something clickable, you can use the cursor CSS rule.
.widget_style {cursor: pointer;}
Actually making it unselectable is not well supported from what I understand. It is in the CSS3 specs with user-select.
.widget_style {user-select:none;}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With