Custom GWT button with icon above text

Question

I want to create a button with an icon and text where the icon is above the text.

Looking for information, I found an answer from Juri .

With it, I created my own SquareButton class, as shown below:

import com.google.gwt.event.dom.client.ClickHandler; 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; /** * Square Button class * @author julio.palma.vazquez * */ public class SquareButton extends Button { /** Text to show. */ private String text; /** * Constructor. */ public SquareButton() { super(); } public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) { super(text, clickHandler); setResource(imageResource); setPixelSize(60, 60); } /** * Set image resource. * @param imageResource image resource */ public void setResource(ImageResource imageResource){ Image img = new Image(imageResource); String definedStyles = img.getElement().getAttribute("style"); img.getElement().setAttribute("style", definedStyles + "; vertical-align:top;"); DOM.insertBefore(getElement(), img.getElement(), DOM.getFirstChild(getElement())); } /** * Set text. * @param text text to show */ @Override public void setText(String text) { this.text = text; Element span = DOM.createElement("span"); span.setInnerText(text); span.setAttribute("style", "vertical-align:bottom; text-align: center;"); DOM.insertChild(getElement(), span, 0); } /** * Get text. * @return text to show */ @Override public String getText() { return this.text; } } 

Unfortunately, it does not work as I expect, and we display the text above the image.

Could you give me a hand?

Answer 1

You can set the HTML in Button. You can try the following:

 Button button = new Button(); String html = "<div><center><img src = '"+GWT.getModuleBaseURL()+"/images/img1.png' height = '10px' width = '10px'></img></center><label>Text</label></br></div>"; button.setHTML(html); 

Give the correct size to your button as well as the image.

Answer 2

You can see the SquareButton class below, thanks for your help.

 import com.google.gwt.event.dom.client.ClickHandler; import com.google.gwt.resources.client.ImageResource; import com.google.gwt.user.client.ui.Button; /** * Square Button class * @author julio.palma.vazquez * */ public class SquareButton extends Button { public SquareButton(String text, ClickHandler clickHandler, ImageResource imageResource) { super(); String html = "<div><center><img src = '" + imageResource.getSafeUri().asString() + "' height = '32px' width = '32px'></img></center><label>" + text + "</label></br></div>"; addClickHandler(clickHandler); setHTML(html); setPixelSize(60, 60); } }