0

アイコンとテキストを含むボタンを作成したいのですが、アイコンはテキストの上にあります。

情報を探している私はジュリからこの答えを見つけました。

これを使用して、次のような独自の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;
   }
}

残念ながら、期待どおりに機能せず、画像の上にテキストが出力されます。

手を貸していただけませんか。

4

3 に答える 3

5

Buttonで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-11T11:17:20.433 に答える
0

You can see 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);
    }
}
于 2012-07-12T06:47:52.883 に答える
0

カスタムボタンは必要ありません。これは、GWT Button、ImageResource、およびCSSを使用して行うことができます。秘訣は、パディングを適切に設定することです。例えば、

Button btnHelp=new Button("Help");
btnHelp.setStyleName("buttonImageText");
// Separate style for each image resource
btnHelp.addStyleName("bgImageHelp");

スタイルシート内:(注：パディングトップは、少なくとも画像の高さと同じ大きさです。）

.buttonImageText{
   background-repeat: no-repeat;
   background-position: 50% 0%;
   background-size: 20px 20px;
   background-color: transparent;
   border: none;
   margin: 0 15px;
   padding: 20px 0 0 0;
   text-align: center;
}

.bgImageHelp {
   background-image: helpUrl;
}

また、CSSファイルで次のように定義しました。

@url helpUrl help;

最後に、Resourcesクラスで次を定義しました。

@Source("resources/images/help.png");
ImageResource help();
于 2020-11-10T02:52:47.327 に答える