在GWT创建自定义按钮 [英] creating custom button in gwt

问题描述

我试图做的GWT共同之处pretty - 创建带有图像的按钮行为，并通过对图像的顶部放置文本的文本。

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.

我已经使用了 HTML 部件，但我怎样才能让文字不可选？

I have used the HTML widget but how can I make the text not selectable?

推荐答案

我最近有一个GWT按钮，允许添加图片​​和文字同样需要。所以我codeD一个自己既然已经可用的实现没有工作。我写上我的博客一个职位，但这里我也复制code：

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:

这里的code为我的自定义按钮

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

与UiBinder的XML定义使用

...
<!-- 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:

这篇关于在GWT创建自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！