带图标上方文字的GWT自定义按钮

我想用图标和文字创建一个按钮，其中图标位于文字上方。带图标上方文字的GWT自定义按钮

寻找信息我找到了这个answer from Juri。

有了它，我已经创建了自己的SquareButton类象下面这样：

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

可惜的是，我希望以上的图像输出文本这是行不通的。

你能帮我一下吗？

来源

2012-07-11 restalion

您可以在按钮中设置HTML。您可以尝试以下方法：

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

给出适当的大小，以您的按钮以及图像。

来源

2012-07-11 11:17:20 JankiPanwala

非常感谢。有用。 – restalion 2012-07-11 12:10:16

@restalion，如果答案对你有帮助，那么接受它。如果这是一个很好的答案，它也可以upvote它。 – RAS 2012-07-11 12:13:19

您可以在下面看到SquareButton类，感谢您的帮助。

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

来源

2012-07-12 06:47:52 restalion

是这个问题的答案或编辑？ – RAS 2012-07-12 08:59:33

带图标上方文字的GWT自定义按钮

回答

相关问题