GWT 自定义按钮不适用于 ImageResources答案

【问题标题】：GWT Custom PushButton not working with ImageResourcesGWT 自定义按钮不适用于 ImageResources
【发布时间】：2013-05-24 06:02:40
【问题描述】：

就行为而言，我需要的正是一个 gwt PushButton，除了我需要它除了文本之外还有一个图像。

我使用 GWT、GWTP 和 UiBinder

在我的 ui.xml 文件中，以下代码有效，但如果我悬停或单击按钮，我无法指定另一个图像

<g:SimplePanel height="100%" styleName="{style.button}"
    width="100%">
    <g:HTMLPanel width="100%" height="100%">
        <table align="center">
            <tr>
                <td>
                    <g:Image styleName="{style.pane}" resource='{res.Edit}' />
                </td>
                <td>
                    <g:Label ui:field="label2" text="Edit Project Edit Project" />
                </td>
            </tr>
        </table>
    </g:HTMLPanel>
</g:SimplePanel>

在寻找解决方案后，我从here发现了这段代码

package com.test.gwtptestproject.client;

import com.google.gwt.dom.client.Style;
import com.google.gwt.dom.client.Style.Float;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.safehtml.shared.SafeHtml;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.Image;

public class MyButton implements SafeHtml {

    private static final long serialVersionUID = 1L;
    Image img;
    private String text;
    private String innerHtml = "";

    public void setImage(ImageResource imgr) {
        this.img = new Image(imgr);
        update();
    }

    public void setText(String text) {
        this.text = text;
        update();
    }

    private void update() {
        Element d = DOM.createDiv();
        if (img != null) {
            Element di = DOM.createDiv();
            Style s = di.getStyle();
            s.setPaddingLeft(5, Unit.PX);
            s.setPaddingRight(5, Unit.PX);
            s.setFloat(Float.LEFT);
            di.appendChild(img.getElement());
            d.appendChild(di);
        }
        if (text != null) {
            Element t = DOM.createDiv();
            t.setInnerText(text);
            d.appendChild(t);
        }
        innerHtml = d.getInnerHTML();

    }

    public MyButton() {
    }

    @Override
    public String asString() {
        return innerHtml;
    }
}

我后来像这样在我的 ui.xml 中使用它

...
<ui:with field='res' type='com.test.gwtptestproject.resources.ImageResources' />
...
<g:PushButton>
    <g:upFace>
    <MyButton image="{res.Edit}" text="Edit"></MyButton>
    </g:upFace>
</g:PushButton>

我的 ImageResources 包包含以下接口，并且此包已添加到 gwt.xml 文件中的源代码中

public interface ImageResources extends ClientBundle {
    public ImageResources INSTANCE = GWT.create(ImageResources.class);

    @Source("Edit.png")
    ImageResource Edit();
    
    @Source("Edit_Hover.png")
    ImageResource Edit_Hover();
    
    @Source("Edit_Click.png")
    ImageResource Edit_Click();
}

当我尝试打开设计器时，我一直出现以下错误，我不知道如何解决（如果我尝试从浏览器访问页面，我会遇到同样的错误）

[ERROR] java.lang.String required, but {res.Edit} returns com.google.gwt.resources.client.ImageResource: <MyButton image='{res.Edit}' text='Edit'> (:110)
[ERROR] Deferred binding failed for 'com.test.gwtptestproject.client.SecondView.Binder'; expect subsequent failures

根据我在编写image="{res.Edit}" 时的理解，应用程序应该期待一个 ImageResource 而不是一个字符串，不是吗？

*注意：我对网络开发（学校项目）还很陌生，所以不要以为我可能已经知道一些事情，除非很明显

【问题讨论】：

标签： html gwt uibinder gwtp

【解决方案1】：

不要忘记将MyButton 的包作为xmnls（XML 命名空间）属性添加到打开的ui:Binder 标记中：

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:mybtn='urn:import:com.test.gwtptestproject.client'>

并在 <MyButton> 标签前加上 xmnls 的别名（此处为 mybtn）：

<g:PushButton>
    <g:upFace>
    <mybtn:MyButton image="{res.Edit}" text="Edit"></mybtn:MyButton>
    </g:upFace>
</g:PushButton>

这样，GWT 将知道在哪里查找（包 com.test.gwtptestproject.client）以找到 MyButton 类。

【讨论】：