creating custom button in gwt

Question

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?

score 9 · Answer 1 · edited Feb 08 '17 at 14:22

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:
alt text

score 1 · Answer 2 · answered Dec 05 '09 at 19:46

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

score 1 · Answer 3 · answered Dec 05 '09 at 20:50

I would use the Button-Widget and call the setHTML() function. You could use this code:

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

You just have to provide the text and the img url when you create the button.

score 1 · Answer 4 · answered Dec 08 '09 at 01:13

1

Did you try the CustomButton class of gwt?

here is the link:

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

answered Dec 08 '09 at 01:13

suprasad

1,411
3
18
40

1

Please provide links to current documentation and from official sources: http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/CustomButton.html – Iker Jimenez Dec 08 '09 at 11:46
Oh i am sorry i though it was the new one. – suprasad Dec 08 '09 at 14:52
This link is broken. – Kishor K Apr 18 '19 at 00:42

score 1 · Answer 5 · answered Nov 26 '10 at 22:10

A class that allows the addition of arbitrary widgets to a 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;
    }

}

with UiBinder:

...

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

creating custom button in gwt

5 Answers5

Linked